I am currently studying Angularjs through the Tuts+ Easier JavaScript Apps with AngularJS tutorial. I have reached the section on Routing Primer using ng-view and I am attempting to display the list page contents in the ng-view of the index page. However, when I load index.html, nothing is being displayed. After doing some research, I discovered that starting from angular 1.2.0, ngRoute has been moved to its own module which needs to be loaded separately and declared as a dependency. Despite taking these steps, I am still unable to display anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
<a href="#">{{contact.name}}</a>: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});