Question

我将所有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），因此我无法遵循。

AngularJS: How do I create controllers in multiple files

Answer 1

文件一：

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

Answer 2

使用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将无法初始化您的控制器。

Answer 3

尽管两个答案在技术上都是正确的，但我想为此答案引入不同的语法选择。这个imho可以更容易地阅读注射的内容，区分等等。

文件一

// 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
}

Answer 4

这个解决方案怎么样？ Modules and Controllers in Files（在页面末尾）它适用于多个控制器，指令等：

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">

Google也有Best Practice Recommendations for Angular App Structure 我真的很想按上下文分组。并非所有html都在一个文件夹中，但是例如所有用于登录的文件（html，css，app.js，controller.js等）。因此，如果我处理模块，所有指令都更容易找到。

Answer 5

为简洁起见，这是一个不依赖于全局变量的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)

Answer 6

不是那么优雅，但实现解决方案非常简单 - 使用全局变量。

在＆＃34;第一＆＃34;文件：


window.myApp = angular.module("myApp", [])
....

在＆＃34;第二＆＃34; ，＆＃34;第三＆＃34;等：


myApp.controller('MyController', function($scope) {
    .... 
    });

如何创建单独的AngularJS控制器文件？

6 个答案: