Question

我希望能够在一个页面上使用多个ng-app =“{angular.module}”指令。我想这样做，以使我的应用程序的位更模块化。我想，如果我可以创建角度模块并将其中的几个插入到一个文档中，我可以将这些模块轻松插入到其他项目中。

我见过有人说你只能在页面上使用一个ng-app指令......这是真的吗？是否最准确地说，“每个视图一个ng-app指令”？

我希望事实并非如此，或者是否仍然是实现高度抽象模块化的最佳方式。

以下是我的模块/应用及其控制器......

var searchModj = angular.module('searchModule', []);


var controllers = {};

controllers.SearchList = function ($scope){

    $scope.coworkers = [
            {name: 'Joe Bob', city: 'Ukrainia'},
            {name: 'Adam Blobnovski', city: 'Logan' },
            {name: 'Carlos Sanchez', city: 'Deerbushle'},   
            {name: 'Martin Kellerweller', city: 'Uptown'},
            {name: 'John Doe',  city: 'New York City'}
        ];
};

searchModj.controller(controllers);



var fruitModj = angular.module('fruiter', []);



controllers.SomeFruit = function ($scope) {

    $scope.fruits = ['apple', 'banana', 'pear'];

};

fruitModj.controller(controllers);

好的，现在这里是我标记的相关部分......

<div ng-app="searchModule">

    <div ng-controller="SearchList">

        Name: 
        <br/>
        <input type="text" ng-model="name" /> 
        <br/>
        <ul>
            <li ng-repeat="coworker in coworkers | filter:name">{{ coworker.name }} - {{ coworker.city }}</li>
        </ul>

        <p>You are searching for <em>{{ name }}</em></p>


    </div>


</div>

<div ng-app="fruiter">
    <div ng-controller="SomeFruit">

        <ul>
            <li ng-repeat="fruit in fruits">{{ fruits }}</li>
        </ul>

    </div>

</div>

我认为因为它首先出现在文档中，我的“searchModule”应用程序正常运行而第二个应用程序没有。当我评论第一个应用程序时，第二个应用程序。所以看起来我确认了我最不幸的怀疑。无论如何......如果是这种情况，那么我能想到的最好的方法是什么才能使我的项目上的功能尽可能模块化？

Answer 1

您只需要在页面上有一个ng-app，但您可以将其他模块作为主ng-app模块的依赖项插入。

var app=angular.module('myNgAppName', ['searchModule']);

这将公开您'searchModule'

中的所有指令，控制器等

Answer 2

ngApp指令的局限性就是指令的局限性，而不是AngularJS本身。 Angular允许您将模块与页面中的多个元素相关联，甚至允许您将多个模块与每个元素相关联。

从您的模块引用其他模块将起作用。另一种可行的方法是使用angular.bootstrap()方法。请参阅：https://stackoverflow.com/a/18583329/984780

最后，您可以创建一个类似于ngApp的指令，而不受其限制。它将完全按照它在标记代码中的方式工作。这就是我所做的，你可以在这里得到代码：

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

该指令名为ngModule。这是一个代码示例：

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <script src="angular.ng-modules.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Bob A";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Steve B";
          });
        </script>
    </head>
    <body>
        <div ng-modules="MyModuleA, MyModuleB">
            <h1>Module A, B</h1>
            <div ng-controller="MyControllerA">
                {{name}}
            </div>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>

        <div ng-module="MyModuleB">
            <h1>Just Module B</h1>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>

Answer 3

是的，您每页只需要一个ng-app，但您可以创建其他模块并将其声明为主应用程序的依赖项。

var app=angular.module('appModule'); //resuable module

var app=angular.module('myApp', ['appModule']); //in the HTML ng-app="myApp"

因此，你可以在appModule中放入可重复使用的东西，并在其他项目中使用它。例如，我喜欢将我的路由逻辑（即根据访问级别重新路由用户）放在我在其他项目中重用的模块中。

注意：您可能需要查看$ provider http://docs.angularjs.org/api/AUTO。$如果您想在ng-app的config方法中使用来自可重用（“appModule”）模块的数据（“myApp” “）模块。

页面上有多个ng-app指令

3 个答案: