页面上有多个ng-app指令

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的指令，而不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。$ provide是否要在ng的config方法中使用来自可重用（“appModule”）模块的数据-app（“myApp”）模块。

页面上有多个ng-app指令

问题描述

3 个解决方案

解决方案1
19 已采纳 2013-10-29 19:02:39

解决方案2
7 2014-04-06 19:47:59

解决方案3
4 2013-10-29 19:12:41

页面上有多个ng-app指令

问题描述

3 个解决方案

解决方案1 19 已采纳 2013-10-29 19:02:39

解决方案2 7 2014-04-06 19:47:59

解决方案3 4 2013-10-29 19:12:41

解决方案1
19 已采纳 2013-10-29 19:02:39

解决方案2
7 2014-04-06 19:47:59

解决方案3
4 2013-10-29 19:12:41