12

我希望能够在一页上使用多个 ng-app="{angular.module}" 指令。我想这样做是为了使我的应用程序的各个部分更加模块化。我想，如果我可以创建 Angular 模块并将其中的几个插入到一个文档中，我就可以轻松地将这些模块插入到其他项目中。

我看到有人说你只能在你的页面上使用一个 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”应用程序可以工作，而第二个应用程序不能。当我注释掉第一个应用程序时，第二个应用程序有效。所以看起来我正在证实我最不幸的怀疑。无论如何......如果是这种情况，那么我可以记住的最佳方法是使我的项目中的功能尽可能模块化？

4

3 回答 3

19

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

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

这将暴露你在你的任何指令，控制器等'searchModule'

于 2013-10-29T19:02:39.913 回答
7

指令的限制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>
于 2014-04-06T19:47:59.803 回答
4

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

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

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

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

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

于 2013-10-29T19:12:41.037 回答