Я намагаюся додати два кутових програми / модулі на одну сторінку. У наведених нижче скрипках ви бачите, що завжди тільки перший модуль, на який посилається в html-коді, буде працювати правильно, тоді як другий не розпізнається по кутовим.
У цій скрипці ми можемо виконати лише 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>EDIT
Майте на увазі, що якщо ви хочете використовувати контролер всередині контролера, ви повинні використовувати синтаксис controllerAs, наприклад:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>Ви можете завантажувати кілька кутових програм, але:
1) Вам потрібно вручну завантажувати їх
2) Ви не повинні використовувати "документ" як корінь, але вузол, де міститься кутовий інтерфейс для:
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']);
});Ось посилання на http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu Plunker http://plnkr.co/edit/1pd
ПРИМІТКА: У html немає ng-app. idбуло використано замість цього.
Я створив POC для програми Angular, використовуючи кілька модулів та маршрутизаторів, щоб гніздовати додаткові додатки в одному додатку сторінки. Ви можете отримати вихідний код за адресою: https://github.com/AhmedBahet/ng-sub-apps
Сподіваюсь, це допоможе
ng-app="project"Підключення резервного копію" на головних наборах сторінок AngularJS і говорить, що "це дозволяє мати модулі, які працюють у різних частинах сторінки", але документ ngApp говорить, що "для одного документа HTML можна використовувати лише одну директиву".