Recently delving into AngularJS, I managed to set up a basic routing system with two controllers. However, the second controller seems to be inactive and troubleshooting has proven difficult.
app.js:
angular.module('foodListerApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch']).config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
MainCtrl (main.js):
angular.module('foodListerApp').controller('MainCtrl', ['$scope' , $window , $location , function ($scope , $window , $location) {
console.log("In Main Controller ... ");
$scope.onSubmit = function() {
$window.location.href = 'views/about.html';
};
}]);
AboutCtrl (about.js):
angular.module('foodListerApp').controller('AboutCtrl', ['$scope' , function ($scope) {
console.log("In 'about' controller ...");
}]);
The HTML files are omitted, but they seem fine. The "onSubmit" method is functional in the first controller, however, the second controller remains silent without any output, leaving me puzzled about the root cause.