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
  1. // script.js  
  2.   
  3. // create the module and name it scotchApp  
  4. // also include ngRoute for all our routing needs  
  5. var scotchApp = angular.module('scotchApp', ['ngRoute']);  
  6.   
  7. // configure our routes  
  8. scotchApp.config(function($routeProvider) {  
  9. $routeProvider  
  10.   
  11. // route for the home page  
  12. .when('/', {  
  13. templateUrl : 'pages/home.html',  
  14. controller : 'mainController'  
  15. })  
  16.   
  17. // route for the about page  
  18. .when('/about', {  
  19. templateUrl : 'pages/about.html',  
  20. controller : 'aboutController'  
  21. })  
  22.   
  23. // route for the contact page  
  24. .when('/contact', {  
  25. templateUrl : 'pages/contact.html',  
  26. controller : 'contactController'  
  27. });  
  28. });  
  29.   
  30. // create the controller and inject Angular's $scope  
  31. scotchApp.controller('mainController', function($scope) {  
  32. // create a message to display in our view  
  33. $scope.message = 'Everyone come and see how good I look!';  
  34. });  

  36. var mod1 = angular.module('mod1');
     
  37. mod1.controller('aboutController', function($scope) {  
  38. $scope.message = 'Look! I am an about page.';  
  39. });  

  41. var mod2 = angular.module('mod2');  
  42. mod2.controller('contactController', function($scope) {  
  43. $scope.message = 'Contact us! JK. This is just a demo.';  
  44. }); 
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

  1.    
  2. html  
  3.   
  4.   
  5. "mainController">  
  6.   
  7.   
  8. "main">  
  9. {{ message }}  
  10.   
  11.   
  12.