我把所有的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中包含这两个文件，但应该如何结构化呢?我试着做一些这样的事情，它在web浏览器控制台抛出一个错误，说它找不到我的控制器。有提示吗?
我搜索了StackOverflow，发现了类似的问题——但是，这种语法在Angular之上使用了不同的框架(CoffeeScript)，所以我没能理解。
如何在多个文件中创建控制器
当前回答
为了简洁起见，这里有一个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)
其他回答
不是很优雅，但是实现方案非常简单——使用全局变量。
在“first”文件中:
window.myApp = angular.module("myApp", [])
....
在“第二”、“第三”等方面:
myApp.controller('MyController', function($scope) {
....
});
为了简洁起见，这里有一个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)
使用angular。模块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将无法初始化你的控制器。
这个解呢?文件中的模块和控制器(在页面的末尾) 它可以与多个控制器、指令等一起工作:
app.js
var app = angular.module("myApp", ['deps']);
myCtrl.js
app.controller("myCtrl", function($scope) { ..});
html
<script src="app.js"></script>
<script src="myCtrl.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
谷歌还有一个Angular应用结构的最佳实践建议 我很喜欢根据上下文来分组。不是所有的html在一个文件夹，但例如所有的登录文件(html, css, app.js,controller.js等)。所以如果我在一个模块上工作，所有的指令都更容易找到。
虽然两个答案在技术上都是正确的，但我想为这个答案引入一种不同的语法选择。这让我们更容易理解注入，区分它们。
文件一个
// 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
}
文件3
// 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
}
