0
Reply

How ng load module & controller in different file by routing

tri_inn

tri_inn

May 12 2017 7:01 AM
216
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. <!-- index.html -->  
  5. <body ng-controller="mainController">  
  6.   
  7. <!-- MAIN CONTENT AND INJECTED VIEWS -->  
  8. <div id="main">  
  9. {{ message }}  
  10.   
  11. <!-- angular templating -->  
  12. <!-- this is where content will be injected -->  
  13. <div ng-view></div>  
  14. </div>  
  15.   
  16. </body>  
  17.   
  18. <!-- home.html -->  
  19. <div class="jumbotron text-center">  
  20. <h1>Home Page</h1>  
  21.   
  22. <p>{{ message }}</p>  
  23. </div>  
  24.   
  25. <!-- about.html -->  
  26. <div class="jumbotron text-center">  
  27. <h1>About Page</h1>  
  28.   
  29. <p>{{ message }}</p>  
  30. </div>  
  31.   
  32. <!-- contact.html -->  
  33. <div class="jumbotron text-center">  
  34. <h1>Contact Page</h1>  
  35.   
  36. <p>{{ message }}</p>  
  37. </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

Next Recommended Forum