如何要求角度控制器

Im是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>

同樣，如果你認爲還有其他的方式，我可以提高我的代碼和代碼結構感免費提供。

感謝

來源

2014-04-14 Oam Psy

也許你可以只通過做一個「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中的一個文件中被縮小和優化時，它對「延遲加載」代碼沒有多大意義。

來源

2014-04-14 12:29:55 Charles

如何要求角度控制器

回答

相關問題