How to create separate AngularJS controller files?
我的所有AngularJS控制器都在一个文件中，controllers.js。此文件的结构如下：
1 2 3 4 5 | angular.module('myApp.controllers', []) .controller('Ctrl1', ['$scope', '$http', function($scope, $http) { }]) .controller('Ctrl2', ['$scope', '$http', function($scope, $http) } }]) |
我想把ctrl1和ctrl2放在单独的文件中。然后，我将在index.html中包含这两个文件，但是应该如何构造呢？我尝试过这样做，它在Web浏览器控制台中抛出一个错误，说它找不到我的控制器。有什么暗示吗？
我搜索了stackoverflow并发现了类似的问题——然而，这个语法在angular之上使用了一个不同的框架(coffeeesccript)，所以我还没能理解。
AngularJS：如何在多个文件中创建控制器
文件一：
1 | angular.module('myApp.controllers', []); |
文件二：
1 2 3 | angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){ }]); |
文件三：
1 2 3 | angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){ }]); |
按顺序包括。我推荐3个文件，所以模块声明是独立的。
至于文件夹结构，关于这个主题有很多意见，但是这两个都很好
https://github.com/angular/angular-seed
网址：http://briantford.com/blog/huuuuge-angular-apps.html
使用末尾带有数组的angular.module API将告诉angular创建一个新模块：
MyAPP.JS
1 2 | // It is like saying"create a new module" angular.module('myApp.controllers', []); // Notice the empty array at the end here |
在没有数组的情况下使用它实际上是一个getter函数。要分离控制器，可以执行以下操作：
CTRL1.JS
1 2 | // 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
1 | angular.module('myApp.controllers').controller('Ctrlr2', ['$scope', '$http', function($scope, $http) {}]); |
在您的javascript导入过程中，只要确保myapp.js在angularjs之后，但在任何控制器/服务之前……否则angular将无法初始化您的控制器。
虽然这两个答案在技术上都是正确的，但我想为这个答案介绍一个不同的语法选择。这个IMHO使您更容易了解注射的情况、区别等。
文件一
1 2 | // Create the module that deals with controllers angular.module('myApp.controllers', []); |
文件二
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 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 } |
文件三
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 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 } |
这个解决方案怎么样？文件中的模块和控制器(在页面末尾)它与多个控制器、指令等一起工作：
App.JS
1 | var app = angular.module("myApp", ['deps']); |
MycTr.JS
1 | app.controller("myCtrl", function($scope) { ..}); |
HTML
1 2 | <script src="app.js"> <script src="myCtrl.js"> |
谷歌还为Angular应用程序结构提供了最佳实践建议。我真的喜欢按上下文分组。不是一个文件夹中的所有HTML，而是所有用于登录的文件(html、css、app.js、controller.js等)。因此，如果我在一个模块上工作，所有的指令都更容易找到。
为了简洁起见，这里有一个不依赖全局变量的ES2015示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // 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) |
不是那么优雅，而是非常简单的实现方案-使用全局变量。
在"第一个"文件中：
1 2 | window.myApp = angular.module("myApp", []) .... |
在"第二"、"第三"等字中：
1 2 3 | myApp.controller('MyController', function($scope) { .... }); |