Я пытаюсь добавить на одну страницу два приложения / модуля angular. В скриптах ниже вы можете видеть, что всегда только первый модуль, на который есть ссылка в html-коде, будет работать правильно, тогда как второй не распознается angular.
В этой скрипке мы можем выполнять только doSearch2метод, тогда как в этой скрипкеdoSearch правильно работает только метод.
Ищу способ как правильно разместить два угловых модуля на одной странице.
Ответы:
Только одно приложение AngularJS может быть автоматически загружено для каждого HTML-документа. Первый ngApp, найденный в документе, будет использоваться для определения корневого элемента для автоматической загрузки в качестве приложения. Чтобы запустить несколько приложений в документе HTML, вы должны вручную загрузить их, используя вместо этого angular.bootstrap. Приложения AngularJS не могут быть вложены друг в друга. - http://docs.angularjs.org/api/ng.directive:ngApp
Смотрите также
ng-app(потому что это не сработает). ng-appможно использовать только один раз в документе HTML. Это действительно просто сокращение, если у вас есть только одно приложение на странице, что является нормальным случаем.
Я создал альтернативную директиву, которая не имеет ngAppограничений. Это называется 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>Вы можете получить исходный код по адресу:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
По сути, это тот же код, который используется внутри AngularJS без ограничений.
Почему вы хотите использовать несколько [ng-app]? Поскольку Angular возобновляется с использованием модулей, вы можете использовать приложение, использующее несколько зависимостей.
Javascript:
// setter syntax -> initializing other module for demonstration
angular.module('otherModule', []);
angular.module('app', ['otherModule'])
.controller('AppController', function () {
// ...do something
});
// getter syntax
angular.module('otherModule')
.controller('OtherController', function () {
// ...do something
});HTML:
<div ng-app="app">
<div ng-controller="AppController">...</div>
<div ng-controller="OtherController">...</div>
</div>РЕДАКТИРОВАТЬ
Имейте в виду, что если вы хотите использовать контроллер внутри контроллера, вы должны использовать синтаксис controllerAs, например:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>Вы можете загрузить несколько приложений angular, но:
1) Вам нужно вручную загрузить их
2) Вы должны использовать не «документ» в качестве корня, а узел, в котором содержится интерфейс angular:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);Это было бы безопасно.
Ручная загрузка обоих модулей будет работать. Посмотри на это
<!-- IN HTML -->
<div id="dvFirst">
<div ng-controller="FirstController">
<p>1: {{ desc }}</p>
</div>
</div>
<div id="dvSecond">
<div ng-controller="SecondController ">
<p>2: {{ desc }}</p>
</div>
</div>
// IN SCRIPT
var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');
angular.element(document).ready(function() {
angular.bootstrap(dvFirst, ['firstApp']);
angular.bootstrap(dvSecond, ['secondApp']);
});Вот ссылка на Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
ПРИМЕЧАНИЕ. В html нет ng-app. idвместо этого был использован.
Я сделал POC для приложения Angular, используя несколько модулей и выходов маршрутизатора для вложения вложенных приложений в одностраничное приложение. Вы можете получить исходный код по адресу: https://github.com/AhmedBahet/ng-sub-apps
Надеюсь, это поможет
ng-app="project"и говорит, что «это позволяет вам иметь модули, которые запускаются в разных частях страницы», но в документе ngApp говорится, что «только одна директива может использоваться для каждого HTML-документа».