I have three files:
- index.html
- players.html
- app.js
index.html: pretty simple.
<body>
<main ng-view></main>
</body>
players.html: which should display a list of players.
<section>
<ul>
<li ng-repeat="player in players">
<h4>{{player}}</h4>
</li>
</ul>
</section>
app.js: which contains a route to /players and controller that has a list of players to be displayed on the view.
// Module
const myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', $routeProvider => {
$routeProvider
.when('/players', {
controller: 'playersController',
templateUrl: 'views/players.html'
})
}]);
// Controller
myApp.controller('playersController', ['$scope', $scope => {
$scope.players = ['Kaka', 'Maldini', 'Nesta'];
}]);
When I route to '/players', the controller doesn't get called and nothing displays, however when I use ng-include instead and add the controller as an attribute, it works fine.