Несколько директив ng-app на странице

Я хочу иметь возможность использовать несколько директив 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" работает, а второе - нет. Когда я комментирую первое приложение, второй работает. Похоже, я подтверждаю мои самые неудачные подозрения. Независимо... если это так, то какой лучший подход я могу иметь в виду, чтобы сделать функциональность моих проектов максимально возможной по модулю?

Ответы

Ответ 1

вам нужно только один ng-app на странице, но вы можете вставить другие модули в зависимости от основного модуля ng-app.

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

Это приведет к появлению любых директив, контроллеров и т.д. в вашем 'searchModule'

Ответ 2

Ограничения директивы ngApp таковы, что ограничения директивы, а не самого AngularJS. Angular позволяет вам связывать модули с несколькими элементами на странице, даже позволяет вам связывать более одного модуля с каждым элементом.

Ссылка на другие модули из вашего модуля будет работать. Другой подход, который будет работать, - использовать метод angular.bootstrap(). См.: fooobar.com/questions/38237/...

Наконец, вы можете создать директиву, которая работает как 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>

Ответ 3

Да, вам нужно только одно ng-приложение на страницу, но вы можете создавать другие модули и объявлять их как зависимости вашего основного приложения.

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. $предоставлять, если вы хотите использовать данные из своего повторно используемого ( "appModule" ) внутри конфигурационного метода вашего модуля ng-app ( "myApp" ).