页面上有多个ng-app指令

Question

I want to be able to use multiple ng-app="{angular.module}" directives on one page. 我希望能够在一个页面上使用多个ng-app =“{angular.module}”指令。 I want to do this to make the bits of my app more modular. 我想这样做，以使我的应用程序的位更模块化。 I figure, if I can create angular modules and plug several of them into one document, I could take those modules and plug them into other projects easily. 我想，如果我可以创建角度模块并将其中的几个插入到一个文档中，我可以将这些模块轻松插入到其他项目中。

I have seen people say that you can only use one ng-app directive on your page... is this true? 我见过有人说你只能在页面上使用一个ng-app指令......这是真的吗？ Is it most accurate to say, "one ng-app directive per view"? 是否最准确地说，“每个视图一个ng-app指令”？

I hope this is not the case, or if it is the case that there is still a best way to achieve a high degree of abstract modularity. 我希望情况并非如此，或者是否仍然是实现高度抽象模块化的最佳方式。

Here are my modules/apps and their controllers... 这是我的模块/应用程序及其控制器......

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);

Ok, now here is the relevant part of my markup... 好的，现在这里是我标记的相关部分......

<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>

I think because it comes first in the document, my "searchModule" app works and the second app does not. 我认为因为它首先出现在文档中，我的“searchModule”应用程序正常运行，而第二个应用程序则没有。 When I comment out the first app, the second works. 当我评论第一个应用程序时，第二个应用程序。 So it looks like I'm confirming my most unfortunate suspicions. 所以看起来我确认了我最不幸的怀疑。 Regardless... if this is the case, then what is the best approach I can bear in mind to make the functionality on my projects as modular as possible? 无论如何......如果是这种情况，那么我能想到的最好的方法是什么才能使我的项目上的功能尽可能模块化？

Answer 1

you only want one ng-app on a page, but you can insert your other modules as dependencies of the main ng-app module. 您只想在页面上使用一个ng-app ，但是您可以将其他模块作为主要ng-app模块的依赖项插入。

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

This will expose any directives , controllers etc you have in your 'searchModule' 这将暴露您在'searchModule'任何指令，控制器等

Answer 2

The limitations of the ngApp directive is just that, limitations of the directive, not AngularJS itself. ngApp指令的局限性只是指令的局限性，而不是AngularJS本身。 Angular allow you to associate modules with multiple elements in a page, it even allows you to associate more than one module with each element. Angular允许您将模块与页面中的多个元素相关联，甚至允许您将多个模块与每个元素相关联。

Referencing other modules from you module will work. 从您的模块引用其他模块将起作用。 Another approach that will work is using the angular.bootstrap() method. 另一种方法是使用angular.bootstrap()方法。 See: https://stackoverflow.com/a/18583329/984780 请参阅： https ： //stackoverflow.com/a/18583329/984780

Finally you can create a directive that works like ngApp without it's limitations. 最后，您可以创建一个类似于ngApp的指令，而不ngApp限制。 It would work exactly the way it does in your markup code. 它将完全按照它在标记代码中的方式工作。 That's what I did you can get the code here: 这就是我所做的，你可以在这里得到代码：

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

The directive is called ngModule . 该指令称为ngModule 。 Here's a code sample: 这是一个代码示例：

<!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

Yes you only want one ng-app per page, but you can create other modules and declare them as dependencies of your main app. 是的，您每页只需要一个ng-app，但您可以创建其他模块并将其声明为主应用程序的依赖项。

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

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

So you can put re-usable stuff in appModule and use it in other projects. 所以你可以在appModule中放入可重用的东西并在其他项目中使用它。 For example, I like to put my routing logic (ie re-routing users depending on their access levels) in a module that I reuse in other projects. 例如，我喜欢在我在其他项目中重用的模块中放置我的路由逻辑（即根据访问级别重新路由用户）。

Note: You might want to look into $provider http://docs.angularjs.org/api/AUTO .$provide if you want to use data from your re-usable ("appModule") module inside the config method of your ng-app ("myApp") module. 注意：您可能需要查看$ 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