ng view - ngview not working AngularJS -
i trying learn angularjs , having trouble first app. want use ng-view assign html files different links, nothing happens when click link. must missing something.
index.html
<!doctype html> <html lang="en" ng-app="customerapp" ng-controller="customercontrollers" > <head> <title>customer demo app</title> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </head> <body> <ul class="nav"> <li><a href="#/customerlist"> list customers </a></li> <li><a href="#/customerform"> add/edit customer </a></li> </ul> <div ng-view></div> </body> </html>
js/app.js
/* app module */
var customerapp = angular.module('customerapp', ['ngroute', 'customercontrollers' ]); customerapp.config([$routeprovider, function ($routeprovider) { $routeprovider. when('/customerform',{ templateurl: 'partials/customer-form.html', controller: 'customerctrl' }). when('/customerlist',{ templateurl: 'partials/customer-list.html', controller: 'customerlstctrl' }). otherwise({ redirectto: '/customerform' }); }]);
js/controller.js
customerapp.controller('customerctrl', ['$scope', function($scope) { $scope.heading = 'add / edit customer'; }); customerapp.controller('customerlstctrl', ['$scope', function($scope) { $scope.heading = 'customer list'; });
partials/customer-form.html
<h1>{{heading}}</h1> <div> <form> <label>name</label> <input type="text" ng-model="customer.name" /></br> <lablel>email</lablel> <input type="text" ng-model="customer.email"/></br> <label>telephone</label> <input type="text" ng-model="customer.phone"/></br> <label>address</label> <label>street</label> <input type="text" ng-model="customer.street" /></br> <label>city</label> <input type="text" ng-model="customer.city"/></br> <label>state</label> <input type="text" ng-model="customer.state"/></br> <label>zip</label> <input type="text" ng-model="customer.zip"/></br> </form> </p>{{customer}}</p> </div>
partials/customer-list.html
<h1>{{heading}}</h1>
as guys mentioned, there couple of syntax, naming errors, in case here app fixed no bugs.
live example: http://plnkr.co/edit/rdl00s51y37vbnjicqr5?p=preview
Comments
Post a Comment