How to Require Angular Controllers

Question

Im new to Angularjs and i am trying to integrate with my application that uses RequireJS. I have the application working on a test page using the ng-submit . However, in my app.js file i dont think i am "require"ing my controllers in the best way.

I am using AngularJS v1.1.5

Here's my tree:

resources
   - CSS
   - js
        - controllers
             - TestController1.js
             - TestController2.js
             - TestController3.js
             - TestController4.js
             - TestController5.js
        - libs
             - angular.js
             - jquery.js
             - require.js
             - mondernizr.js
             ......
             ......
             ......
        main.js
        app.js
pages
        test1.html
        test2.html
        test3.html
        test4.html
        test5.html

main.js

(function(require) {
'use strict';

require.config({
    baseUrl: '/libs',
    paths: {
        'zepto'     : 'zepto',
        'jquery'    : 'jquery',
        'angular'   : 'angular',
        'router'    : 'page',
        'history'   : 'history.iegte8',
        'event'     : 'eventemitter2'
    },
    shim: {
        'zepto'     : { exports: '$' },         
        'angular'   : { deps: ['jquery'], exports: 'angular' },
        'app'       : { deps: ['angular'] },
        'router'    : { exports: 'page'},
        'modernizr' : { exports: 'Modernizr' }
    }
});

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

})(this.require);

app.js

define("app", ["angular"], function(angular){

    var app = angular.module("app", []);

    app.config(function($routeProvider, $locationProvider){
        $routeProvider
            .when("/test1", {
                templateUrl: "test1.html",
                controller: "TestController1"
            })
            .when("/test2", {
                templateUrl: "test2.html",
                controller: "TestController2"
            })
            .when("/test3", {
                templateUrl: "test3.html",
                controller: "TestController3"
            })
            .when("/test4", {
                templateUrl: "test4.html",
                controller: "TestController4"
            })
            .when("/test5", {
                templateUrl: "test5.html",
                controller: "TestController5"
            })
            .otherwise({ redirectTo: '/test1'});            
    });

    return app;
});

require(["app", "controllers/TestController1"]);
require(["app", "controllers/TestController2"]);
require(["app", "controllers/TestController3"]);
require(["app", "controllers/TestController4"]);
require(["app", "controllers/TestController5"]);

TestController1-5.js

require(['app'], function(app) {
    app.controller("TestController1", function($scope) {        
        $scope.clickMe = function()  {                      
            alert('TestController1.js is responding');
            $scope.title = "Title";
            $scope.data = {message: "Hello"};
            $scope.message = "Hello World!";            
        };
    });
 });

test1-5.html

<div ng-controller="TestController1">       

    <form ng-submit="clickMe()">
        <div>
            <button type="submit">Test TestController1</button>
        </div>
    </form>

    {{ data.message + " world" }}
    {{ title }}    

</div>

Equally if you think there are other ways i can improve my code and code structure feel free to suggest.

Thanks

Answer 1

Maybe you could just improve your code by making an "app.controllers" module that will be in charge of loading all your controllers. Then in your app.js, you just add this module as dependency.

So for instance.

app/controllers/MyController.js:

define(['angular'], function(angular) {
  return angular.module('app.controllers.MyCtrl', [])
    .controller('MyCtrl', [function(){
      [...]
    }]);

app/controllers.js:

define([
  'angular',
  'app/controllers/MyController'
],
function(angular) {
  return angular.module('app.controllers', [
    'app.controllers.MyCtrl'
  ]);
});

app/app.js:

define("app", "app/controllers", ["angular"], function(angular){

  var app = angular.module("app", ['app.controllers']);

  app.config(function($routeProvider, $locationProvider){
    $routeProvider
      .when("/my", {
         templateUrl: "my.html",
         controller: "MyCtrl"
      })
      .otherwise({ redirectTo: '/test1'});            
  });

  return app;
});

You could also load controllers asynchronously this way for instance:

angular.module('myApp.controllers', [])
  .controller('MyCtrl', ['$scope','$injector', function($scope, $injector){
    require(['app/controllers/MyController'], function(MyCtrl){
      $injector.invoke(MyCtrl, this,{'$scope':$scope});
    });
  }]);

The downpoint of this kind of loading is that you will have to manually call $scope.$apply(); in order to manually ask for a digest otherwise your scope modifications on this controller will not be taken into account as it is with "standard" loading. However, I will not recommend this kind of loading. In the end when the code is minified and optimized in one file with r.js, it does not make much sense to "lazy load" code.