如何要求角度控制器

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在一個文件中最小化和優化代碼時，“延遲加載”代碼沒有多大意義。