Próbuję dodać dwie aplikacje / moduły kątowe do jednej strony. Na poniższych skrzypcach widać, że zawsze tylko pierwszy moduł, do którego odwołuje się kod html, będzie działał poprawnie, podczas gdy drugi nie jest rozpoznawany przez angular.
Na tych skrzypcach możemy wykonać tylko doSearch2metodę, podczas gdy na tych skrzypcach tylko doSearchmetoda działa poprawnie.
Szukam sposobu, jak poprawnie umieścić dwa kątowe moduły na jednej stronie.
Odpowiedzi:
Tylko jedna aplikacja AngularJS może zostać automatycznie załadowana na dokument HTML. Pierwsza aplikacja ngApp znaleziona w dokumencie zostanie użyta do zdefiniowania elementu głównego do automatycznego ładowania jako aplikacji. Aby uruchomić wiele aplikacji w dokumencie HTML, należy ręcznie załadować je za pomocą angular.bootstrap. Aplikacje AngularJS nie mogą być zagnieżdżane w sobie. - http://docs.angularjs.org/api/ng.directive:ngApp
Zobacz też
ng-app(bo to nie zadziała). ng-appmoże być użyty tylko raz na dokument HTML. To naprawdę jest tylko skrót, jeśli masz tylko jedną aplikację na stronie, co jest normalnym przypadkiem.
Stworzyłem alternatywną dyrektywę, która nie ma ngAppograniczeń. To się nazywa ngModule. Tak wyglądałby kod, gdy go używasz:
<!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>
Możesz pobrać kod źródłowy pod adresem:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
Zasadniczo jest to ten sam kod, który jest używany wewnętrznie przez AngularJS bez ograniczeń.
Dlaczego chcesz używać wielu [ng-app]? Ponieważ Angular jest wznawiany przy użyciu modułów, możesz użyć aplikacji, która używa wielu zależności.
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>
EDYTOWAĆ
Pamiętaj, że jeśli chcesz używać kontrolera wewnątrz kontrolera, musisz użyć składni controllerAs, na przykład:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>
Możesz załadować wiele aplikacji kątowych, ale:
1) Musisz ręcznie załadować je
2) Nie należy używać „document” jako katalogu głównego, ale węzeł, w którym znajduje się interfejs kątowy, do:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);To byłoby bezpieczne.
Ręczne ładowanie obu modułów będzie działać. Spójrz na to
<!-- 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']);
});Oto link do Plunkera http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
UWAGA: w html nie ma ng-app. idzostał użyty zamiast tego.
Zrobiłem POC dla aplikacji Angular, używając wielu modułów i gniazd routera, aby zagnieżdżać aplikacje podrzędne w jednej aplikacji strony. Możesz uzyskać kod źródłowy na: https://github.com/AhmedBahet/ng-sub-apps
Mam nadzieję, że to pomoże
ng-app="project"i mówi, że „pozwala to mieć moduły działające w różnych częściach strony”, ale dokument ngApp stwierdza, że „tylko jedna dyrektywa może być używana na dokument HTML”.