ngRoute - multiple controllers in separate files
I am now in the process of changing my web app to single page web app . i followed tutorial from this .link
this is a sample script.js
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
since my controllers are large and more in number , i have separated them into individual files .
but now the controllers are not recognised ..
Answer
Updated with separated controllers and html views.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js'></script>
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js'></script>
<script type="text/javascript" src='./app.js'></script>
<script type="text/javascript" src='./HomeController.js'></script>
<script type="text/javascript" src='./AboutController.js'></script>
<script type="text/javascript" src='./ContactController.js'></script>
</head>
<body ng-app="myAPP">
<div>
<div id="navigation">
<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>
</div>
<div ng-view></div>
</div>
</body>
</html>
app.js
'use strict';
var myAPP = angular.module('myAPP', [ 'ngRoute' ]);
myAPP.config(['$routeProvider',
function (
$routeProvider
) {
$routeProvider.
when('/home', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'pages/about.html',
controller: 'AboutController'
}).
when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'ContactController'
}).
otherwise({
redirectTo: '/home'
});
}]);
HomeController.js
angular.module('myAPP')
.controller('HomeController', function ($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
AboutController.js
angular.module('myAPP')
.controller('AboutController', function ($scope) {
$scope.message = 'Look! I am an about page.';
});
ContactController.js
angular.module('myAPP')
.controller('ContactController', function ($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
pages/About.html
<h1> About </h1>
{{message}}
pages/Contact.html
<h1> Contact </h1>
{{message}}
pages/Home.html
<h1> Home </h1>
{{message}}
Folder view:
Result:
