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

我将所有的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：我如何在多个文件中创建控制器

---

文件一：

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之后，但在任何控制器/服务/等之前;否则角将不能初始化你的控制器。

---

尽管两个答案在技术上都是正确的，但我想为这个答案介绍一个不同的语法选项。 这个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
}

链接地址: http://www.djcxy.com/p/13649.html

上一篇: How to create separate AngularJS controller files?

下一篇: What's the difference between ngModel.$modelValue and ngModel.$viewValue