i am very new in angular and learning angular v1+. just come across a example which show how to load controller by routing when all controllers in same file. code taken from https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating see the code details // 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!' ; }); var mod1 = angular.module( 'mod1'); mod1 .controller( 'aboutController' function($scope) { $scope.message = 'Look! I am an about page.' ; }); var mod2 = angular.module( 'mod2'); mod2 .controller( 'contactController' function($scope) { $scope.message = 'Contact us! JK. This is just a demo.' ; }); now see the above code all controllers are attach to different module. so tell me how routing will know which module need to contact to load controllers html mainController > main > {{ message }} this is where content will be injected --> class = jumbotron text-center > Home Page {{ message }} class = jumbotron text-center > About Page {{ message }} class = jumbotron text-center > Contact Page {{ message }} now my question is if about and contact controller reside in different module in different folder then how angular routing would load these modules when user click on links? so please tell me how to instruct angular routing to load controllers in different module with path ? please discuss with a small example. thanks

Answer

How ng load module & controller in different file by routing

tri_inn

240

i am very new in angular and learning angular v1+. just come across a example which show how to load controller by routing when all controllers in same file.

code taken from https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

see the code details

// 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!';
});
var mod1 = angular.module('mod1');
mod1.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
var mod2 = angular.module('mod2');
mod2.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});

now see the above code all controllers are attach to different module. so tell me how routing will know which module need to contact to load controllers

html
<body ng-controller="mainController">
<div id="main">
{{ message }}
<div ng-view></div>
</div>
</body>
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
</div>
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>

now my question is if about and contact controller reside in different module in different folder then how angular routing would load these modules when user click on links?

so please tell me how to instruct angular routing to load controllers in different module with path ?

please discuss with a small example. thanks