How to resolve dependencies for a project using AngularJS and RequireJS?

Question

I have a simple AngularJS application which I am trying to refactor to use RequireJS.

Since controllers and services are loaded async, I can't use ng-app in my index.html.

Following is my main.js

require.config({
    paths: {
        "angular": '../../bower_components/angular/angular',
        "angularCookies": '../../bower_components/angular-cookies/angular-cookies'
    },
    shim: {
        angular: {
            exports: "angular"
        },
        angularCookies : {
            deps: ["angular"]
        }
    }
});

require(['angular', './login/js/login'],
    function (angular) {
        angular.bootstrap(document, ['loginApp']);
    }
);

My login.js is where I am defining an angular module. Following is my login.js

'use strict';
define(['angular',
        'angularCookies',
        './login.controller'],
    function(angular, angularCookies, loginController) {
    angular.module('loginApp', [
            'ngCookies'])
        .config(['$cookiesProvider',
            function($cookiesProvider) {
              $cookiesProvider.defaults.path = '/';
              $cookiesProvider.defaults.domain = 'localhost';
            }
        ])
        .run(['$cookies',
            'loginService',
            function($cookies, loginService) {

            }
        ]).controller(loginController);
});

As seen, it is dependent on loginController and loginController is dependent on loginService.

My loginService is defined as --

"use strict";

define(['angular',
        'angularCookies'],

    function (angular, angularCookies) {

        var loginService = angular.module('loginApp')
            .factory('loginService', [
                '$http',
                '$cookies',
                function ($http, $cookies) {

                    // My functions and other code here.

                }]);
        return loginService;
    });

With this configuration I am getting an error - Module 'loginApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

What am I missing here? What configuration do I need to do to make it right?

Answer 1

I see a couple of problems. First the app shouldn't be created inside login. The app is the base of all controllers and services.

So I would move the app creation to another file called app.js.

Then in my require config:

shim: {
    'app': {
        deps: ['angular', 'angular-route', 'angularCookies']
    },
    angularCookies : {
        deps: ["angular"]
    }
}

And:

require
(
    [
        'app'
    ],
    function(app)
    {
        angular.bootstrap(document, ['loginApp']);
    }
);

And then your controller would be:

 define(['loginApp'], function(app)
 {
     app.controller('loginController',
     [
         '$scope',

         function($scope)
         {
             //...
         }
     ]);
 });