Angularjs's controller dependancy with requirejs?

Question

I am using angular js with require js to make a single page template. Everything is working accept one thing. When I am trying to define controller name in $routeProvider, it shows an error:

Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=SignIn&p1=not%20aNaNunction%2C%20got%20undefined

I separate the files like that:

rootfolder
    js
      -require.js
      -angular.min.js
      -angular-route.js
      -main.js
      -app.js
      -signin.js
      -signup.js

    index.php
    sign_in.php
    sign_up.php

My code:

Main.js

 require.config({
        baseUrl: "./js",
        paths: {
            'angular': 'angular.min',
            'angularRoute': 'angular-route'
        },
        shim: { 
            'angular' : { exports : 'angular' },
            'angularRoute' : { deps : ['angular'] }
        },
        deps: ['app']
    });

App.js

  define(['angular','angularRoute'], function (angularRoute) {
        var app = angular.module('webapp', ['ngRoute']);
        app.config(['$routeProvider',
                            function($routeProvider) {
                                $routeProvider.
                                  when('/signin', {
                                    templateUrl: 'sign_in.php',
                                    controller: 'SignIn'
                                  }).
                                  when('/signup', {
                                    templateUrl: 'sign_up.php',
                                    controller: 'SignUp'
                                  }).
                                  otherwise({
                                    redirectTo: '/signin'
                                  });
                              }
          ]);
        return app;
    });

controller - signin.js

define(['app'], function (app) {
    app.controller('SignIn', function ($scope) {
        $scope.message = "Sign in page"; 
    });

});

controller - signup.js

define(['app'], function (app) {
    app.controller('SignUp', function ($scope) {
        $scope.message = "Sign up page"; 
    }); 
});

When I define controller: 'SignIn' or controller: 'SignUp' in $routeProvider it shows an error otherwise it works fine.

Where do you require SignIn and SignUp? So far I cannot see where you include them... controller: 'SignIn' will not trigger any requirejs to run... — Michael Rose

Michael Rose Michael Rose · Accepted Answer · 2015-12-10T09:42:59

You need to make requirejs include signin.js and signup.js, too. The code you have in App.js does not trigger any requirejs calls to load these two files.

when('/signin', {
    templateUrl: 'sign_in.php',
    controller: 'SignIn'
})

only tells AngularJS to try and instantiate the controller called 'SignIn' once you navigate to /signin. However, this will not result in the loading of the signin.js file.

Make sure to have your outer most module to depend on signin and signup, too.

Angularjs's controller dependancy with requirejs?

1 Answers