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

I have all of my AngularJS controllers in one file, controllers.js. This file is structured as follows:

我的AngularJS控制器都在一个文件中，controller .js。此文件的结构如下:

angular.module('myApp.controllers', [])
  .controller('Ctrl1', ['$scope', '$http', function($scope, $http) {    
  }])
  .controller('Ctrl2', ['$scope', '$http', function($scope, $http) }
  }])

What I'd like to do is put Ctrl1 and Ctrl2 into separate files. I would then include both files in my index.html, but how should that be structured? I tried doing some thing like this and it throws an error in the web browser console saying it can't find my controllers. Any hints?

我想要做的是将ctrl - l1和ctrl + 2放到单独的文件中。然后我将把这两个文件都包含在我的索引中。html，但它应该如何构建呢?我试过这样做，它在web浏览器控制台抛出一个错误，说它找不到我的控制器。有提示吗?

I searched * and found this similar question - however, this syntax is using a different framework (CoffeeScript) on top of Angular, and so I haven't been able to follow.

我搜索了*，发现了这个类似的问题——但是，这个语法使用了一个不同的框架(CoffeeScript)，在角度上，所以我还没能跟上。

AngularJS: How do I create controllers in multiple files

如何在多个文件中创建控制器

6 个解决方案

#1

390

File one:

文件1:

angular.module('myApp.controllers', []);

File two:

文件2:

angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){

}]);

File three:

文件3:

angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){

}]);

Include in that order. I recommend 3 files so the module declaration is on its own.

包括在这个秩序。我推荐3个文件，以便模块声明本身。

As for folder structure there are many many many opinions on the subject, but these two are pretty good

关于文件夹结构，关于这个问题有很多不同的看法，但这两个观点都很好

https://github.com/angular/angular-seed

http://briantford.com/blog/huuuuuge-angular-apps.html

#2

173

Using the angular.module API with an array at the end will tell angular to create a new module:

使用角。模块API，末尾有一个数组将告诉angle创建一个新的模块:

myApp.js

myApp.js

// It is like saying "create a new module"
angular.module('myApp.controllers', []); // Notice the empty array at the end here

Using it without the array is actually a getter function. So to seperate your controllers, you can do:

在不使用数组的情况下使用它实际上是一个getter函数。为了分离控制器，你可以这样做:

Ctrl1.js

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

Ctrl2.js

angular.module('myApp.controllers').controller('Ctrlr2', ['$scope', '$http', function($scope, $http) {}]);

During your javascript imports, just make sure myApp.js is after AngularJS but before any controllers / services / etc...otherwise angular won't be able to initialize your controllers.

在您的javascript导入期间，只需确保myApp。js在寻找AngularJS，但在任何控制器/服务等之前……否则角将无法初始化控制器。

#3

Although both answers are technically correct, I want to introduce a different syntax choice for this answer. This imho makes it easier to read what's going on with injection, differentiate between etc.

虽然这两个答案在技术上都是正确的，但是我想为这个答案引入一个不同的语法选择。这个imho可以让我们更容易地了解注射过程中发生了什么，如何区分等等。

File One

文件一个

// Create the module that deals with controllers
angular.module('myApp.controllers', []);

File Two

两个文件

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

File Three

文件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
}

#4

What about this solution? Modules and Controllers in Files (at the end of the page) It works with multiple controllers, directives and so on:

这个解决方案呢?文件中的模块和控制器(在页面末尾)与多个控制器、指令等一起工作:

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 has also a Best Practice Recommendations for Angular App Structure I really like to group by context. Not all the html in one folder, but for example all files for login (html, css, app.js,controller.js and so on). So if I work on a module, all the directives are easier to find.

谷歌也有一个关于角度应用程序结构的最佳实践建议，我非常喜欢根据上下文进行分组。不是一个文件夹中的所有html，而是所有用于登录的文件(html、css、app.js、controller)。js等等)。如果我在一个模块上工作，所有的指令都很容易找到。

#5

For brevity, here's an ES2015 sample that doesn't rely on global variables

为了简单起见，这里有一个不依赖全局变量的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)

#6

Not so graceful, but the very much simple in implementation solution - using global variable.

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

In the "first" file:

在“第一次”文件:


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

in the "second" , "third", etc:

在“第二”、“第三”等:


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

#1

390