ngRoute - multiple controllers in separate files

Question

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 ..

Try to add all controllers in a separate module then inject that module in your main module. like add all controller to myControllerModule then inject it to angular.module('scotchApp', ['ngRoute','myControllerModule ']); — Amit Ramoliya, Feb 02 '16 at 11:21
include them in your html file. **note - include file which contains var scotchApp = angular.module('scotchApp', ['ngRoute']); before controllers** — Deepak Tripathi, Feb 02 '16 at 11:29
@AmitRamoliya : any reference to add controllers to a module ? — Faiyaz Md Abdul, Feb 02 '16 at 12:33

julien bouteloup · Accepted Answer · 2016-02-03T14:36:04.607

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:

look at my question . i dont want to hav all my controllers in same page — Faiyaz Md Abdul, Feb 02 '16 at 12:19
I've just made a complete change to reflect your question. Everything is tested and works like magic. Enjoy. — julien bouteloup, Feb 03 '16 at 14:37
actually i fixed it .. the problem was the main js was loading again after the controller js.. thanks for your time — Faiyaz Md Abdul, Feb 04 '16 at 16:36

score 0 · Answer 2 · answered Feb 02 '16 at 11:26

0

In my opinion it should work unless you forgot to include your controllers in index file...

answered Feb 02 '16 at 11:26

Kamila

371
5
13

ngRoute - multiple controllers in separate files

2 Answers2