Currently exploring AngularJS and experimenting with $routeProvider, Here is what I have in my HTML:
<div class="container">
<h1>AngularJS Practice</h1>
<div ng-view>
</div>
</div>
In my app.js file, I have the following code:
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'pages/second.html',
controller: 'mainController'
})
}]);
myApp.controller('mainController', ['$scope', function($scope){
$scope.name = "Main controller";
}]);
myApp.controller('secondController', ['$scope', function($scope){
$scope.name = 'Second controller';
}])
And for each template, I have included:
second.html:
<h1>Second</h1>
<h3>Scope name {{ name }}</h3>
main.html:
<h1>Main</h1>
<h3>Scope name: {{ name }}</h3>
I anticipated the $scope object to be distinct in each controller, but upon reaching the second route ('/second'), the scope name remains as "Main controller". Is there something I am overlooking?
Many thanks in advance.