Question

我有一个包含多个容器的页面。每个容器都有自己的控制器，但指向一个工厂，该工厂处理与Web服务API交互的所有逻辑。我想为每个控制器都有一个单独的文件但是我希望所有这些都在一个模块中。对于我的生活，我找不到如何将不同文件中的控制器包含在一个模块中。

//file 1
MyController ....

//file 2
MyOtherController

//file 3
MyFactory

//file 4
The Module

该模块将由三个独立文件中定义的MyController，MyOtherController和MyFactory组成。有人可以帮忙解决这个问题，还是指向一个好的资源？谢谢！

Answer 1

您可以将模块视为应用程序不同部分的容器 - 控制器，服务，过滤器，指令等。要访问容器，只需调用其模块名称，例如

// file.4

angular.module("theModule",[]);

现在您已经将角度模块声明为角度，现在可以使用angular

从任何地方访问mainModule

// file 1

angular.module("theModule").controller("MyController",[function(){...}]);

// file 2

angular.module("theModule").controller("MyOtherController",[function(){...}]);

// file 3

angular.module("mainModule").factory("MyFactory",[function(){...}]);

Check out the documentation for more information.

I also suggest reading Google's style guide and conventions manual

Also read about setting up app structure for maintainability

Answer 2

以下是我在应用程序中使用的Angular模块设置示例，该应用程序允许为每种模块类型提供单独的外部文件。请注意，应用必须在外部文件之前加载。在Angular 1.4.9上测试。

的index.html

<script src="bower_components/angular/angular.min.js"></script>
<script src="js/ng-app.js"></script>
<script src="js/ng-factories.js"></script>
<script src="js/ng-directives.js"></script>
<script src="js/ng-controllers.js"></script>

NG-app.js

var app = angular.module('myApp', [
    'factories',
    'directives',
    'controllers'
]);

NG-controllers.js

//note: I am injecting the helloFac factory as an example
var ctrl = angular.module('controllers', []);

ctrl.controller('MyCtrl', ['$scope', 'helloFac', function($scope, helloFac) {
    console.log(helloFac.sayHello('Angular developer'));
}]);

NG-directives.js

angular.module('directives',[])
    .directive('test', function () {
        return {
            //implementation
        }
    })
    .directive('test2', function () {
            return {
                //implementation
            }
    });

NG-factories.js

var factories = angular.module("factories", []);

factories.factory('helloFac', function() {
    return {
        sayHello: function(text){
            return 'Hello ' + text;
        }
    }
});

AngularJS模块和外部控制器

2 个答案: