如何要求角度控制器

Question

我是Angularjs的新手，我正尝试与使用RequireJS的应用程序集成。 我使用ng-submit在测试页上运行应用程序。 但是，在我的app.js文件中，我认为我并不是以最佳方式“要求”我的控制器。

我正在使用AngularJS v1.1.5

这是我的树：

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>

同样，如果您认为还有其他方法可以改善我的代码，并且可以随意建议代码结构。

谢谢

Answer 1

也许您可以通过制作一个“ app.controllers”模块来改善代码，该模块将负责加载所有控制器。 然后在app.js中，您只需将此模块添加为依赖项即可。

例如。

应用程序/控制器/ MyController.js：

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

应用程序/ controllers.js：

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

应用程序/ 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;
});

您还可以通过这种方式异步加载控制器，例如：

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

这种加载的缺点是您必须手动调用$ scope。$ apply（）;。 为了手动请求摘要，否则将不考虑在此控制器上进行的范围修改，因为在“标准”加载中是一样的。 但是，我不建议这种加载。 最后，当使用r.js在一个文件中最小化和优化代码时，“延迟加载”代码没有多大意义。