I am trying to learn AngularJS and am having some trouble with my first app. I want to use ng-view to assign html files to different links, but nothing happens when I click the link. I must be 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>
ng-controller="customerControllers"in yourhtmltag makes no sense and may be breaking the entire application. And since you aren't namespacing your controllers you don't need to include it in your module declaration either (angular.module('customerApp', ['ngroute']);)