我将所有 AngularJS 控制器都放在一个文件 controllers.js 中。该文件的结构如下:
angular.module('myApp.controllers', [])
.controller('Ctrl1', ['$scope', '$http', function($scope, $http) {
}])
.controller('Ctrl2', ['$scope', '$http', function($scope, $http) }
}])
我想做的是将 Ctrl1 和 Ctrl2 放入单独的文件中。然后我会将这两个文件都包含在我的 index.html 中,但是应该如何构建呢?我尝试做这样的事情,它在网络浏览器控制台中抛出一个错误,说它找不到我的控制器。有什么提示吗?
我搜索了 StackOverflow 并发现了这个类似的问题 - 但是,这种语法在 Angular 之上使用了不同的框架(CoffeeScript),所以我无法遵循。
档案一:
angular.module('myApp.controllers', []);
文件二:
angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){
}]);
文件三:
angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){
}]);
包括在该顺序中。我推荐 3 个文件,所以模块声明是独立的。
至于文件夹结构,这个主题有很多很多很多意见,但这两个还不错
https://github.com/angular/angular-seed
http://briantford.com/blog/huuuuuge-angular-apps.html
最后使用带有数组的 angular.module API 将告诉 angular 创建一个新模块:
myApp.js
// It is like saying "create a new module"
angular.module('myApp.controllers', []); // Notice the empty array at the end here
在没有数组的情况下使用它实际上是一个 getter 函数。因此,要分离您的控制器,您可以执行以下操作:
Ctrl1.js
// It is just like saying "get this module and create a controller"
angular.module('myApp.controllers').controller('Ctrlr1', ['$scope', '$http', function($scope, $http) {}]);
Ctrl2.js
angular.module('myApp.controllers').controller('Ctrlr2', ['$scope', '$http', function($scope, $http) {}]);
在您的 javascript 导入期间,只需确保 myApp.js 在 AngularJS 之后但在任何控制器/服务 / 等之前...否则 Angular 将无法初始化您的控制器。
虽然这两个答案在技术上都是正确的,但我想为这个答案引入不同的语法选择。这个恕我直言,可以更容易地阅读注射的情况,区分等等。
文件一
// Create the module that deals with controllers
angular.module('myApp.controllers', []);
文件二
// Here we get the module we created in file one
angular.module('myApp.controllers')
// We are adding a function called Ctrl1
// to the module we got in the line above
.controller('Ctrl1', Ctrl1);
// Inject my dependencies
Ctrl1.$inject = ['$scope', '$http'];
// Now create our controller function with all necessary logic
function Ctrl1($scope, $http) {
// Logic here
}
文件三
// Here we get the module we created in file one
angular.module('myApp.controllers')
// We are adding a function called Ctrl2
// to the module we got in the line above
.controller('Ctrl2', Ctrl2);
// Inject my dependencies
Ctrl2.$inject = ['$scope', '$http'];
// Now create our controller function with all necessary logic
function Ctrl2($scope, $http) {
// Logic here
}
这个解决方案怎么样? Modules and Controllers in Files(在页面末尾)它适用于多个控制器、指令等:
应用程序.js
var app = angular.module("myApp", ['deps']);
我的Ctrl.js
app.controller("myCtrl", function($scope) { ..});
html
<script src="app.js"></script>
<script src="myCtrl.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Google 还有一个Best Practice Recommendations for Angular App Structure,我非常喜欢按上下文分组。不是一个文件夹中的所有 html,而是例如用于登录的所有文件(html、css、app.js、controller.js 等)。所以如果我在一个模块上工作,所有的指令都更容易找到。
为简洁起见,这是一个不依赖全局变量的 ES2015 示例
// controllers/example-controller.js
export const ExampleControllerName = "ExampleController"
export const ExampleController = ($scope) => {
// something...
}
// controllers/another-controller.js
export const AnotherControllerName = "AnotherController"
export const AnotherController = ($scope) => {
// functionality...
}
// app.js
import angular from "angular";
import {
ExampleControllerName,
ExampleController
} = "./controllers/example-controller";
import {
AnotherControllerName,
AnotherController
} = "./controllers/another-controller";
angular.module("myApp", [/* deps */])
.controller(ExampleControllerName, ExampleController)
.controller(AnotherControllerName, AnotherController)
name
.. 所以您可以简单地使用 ExampleCtrl.name
而不是重复 .. 重复它。
不是那么优雅,但实现解决方案非常简单 - 使用全局变量。
在“第一个”文件中:
window.myApp = angular.module("myApp", [])
....
在“第二”、“第三”等:
myApp.controller('MyController', function($scope) {
....
});
angular.module('myApp').controller('ProductCtrl', ['$scope', '$http', function($scope, $http){ //Your ProductCtrl code goes here }]);
appCtrl
是一个全局window.appCtrl
。这不是一个好习惯。