Multiple ng-app directives on a page

I want to be able to use multiple ng-app="{angular.module}" directives on one page. 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? Is it most accurate to say, "one ng-app directive per view"?

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

标签： javascript angularjs angularjs-directive

3条回答

够拽才男人

2楼-- · 2020-02-09 04:14

Yes you only want one ng-app per page, but you can create other modules and declare them as dependencies of your main 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. For example, I like to put my routing logic (i.e. 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.

0人赞添加讨论(0) 举报

beautiful°

3楼-- · 2020-02-09 04:17

The limitations of the ngApp directive is just that, limitations of the directive, not AngularJS itself. 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.

Referencing other modules from you module will work. Another approach that will work is using the angular.bootstrap() method. See: https://stackoverflow.com/a/18583329/984780

Finally you can create a directive that works like ngApp without it's limitations. 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/

The directive is called 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>

0人赞添加讨论(0) 举报

beautiful°

4楼-- · 2020-02-09 04:21

you only want one ng-app on a page, but you can insert your other modules as dependencies of the main ng-app module.

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

This will expose any directives , controllers etc you have in your 'searchModule'

0人赞添加讨论(0) 举报

Multiple ng-app directives on a page

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间