javascript - How to Require Angular Controllers -

im new angularjs , trying integrate application uses requirejs. have application working on test page using ng-submit. however, in app.js file dont think "require"ing controllers in best way.

i using angularjs v1.1.5

here's 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 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 think there other ways can improve code , code structure feel free suggest.

thanks

maybe improve code making "app.controllers" module in charge of loading controllers. in app.js, add module dependency.

so 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 load controllers asynchronously way 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 kind of loading have manually call $scope.$apply(); in order manually ask digest otherwise scope modifications on controller not taken account "standard" loading. however, not recommend kind of loading. in end when code minified , optimized in 1 file r.js, not make sense "lazy load" code.