Ik ben op zoek naar twee hoekige apps / modules toe te voegen aan een pagina.
In de violen hieronder zie je dat altijd alleen de eerste module, waarnaar wordt verwezen in de html-code, zal goed werken, terwijl de tweede niet door hoekige wordt herkend.
In deze viool we kunnen alleen doSearch2methode, terwijl in dit fiddle alleen de doSearchmethode goed werkt.
Ik ben op zoek naar de manier hoe je de juiste plaats twee hoekige modules op één pagina.
Antwoord 1, Autoriteit 100%
Slechts één angularjs applicatie kan worden auto-bootstrapped per HTML-document. De eerste ngApp in het document wordt gebruikt voor het basiselement om automatisch bootstrap definiëren als een applicatie. Als u meerdere toepassingen in een HTML-document dat u moet ze handmatig bootstrappen behulp angular.bootstrap plaats uit te voeren. Angularjs toepassingen kunnen niet worden genest in elkaar.
– http://docs.angularjs.org/api/ng.directive:ngApp
Zie ook
- https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ
- http://docs.angularjs.org/api/angular.bootstrap
Antwoord 2, Autoriteit 31%
Ik heb een alternatief richtlijn die niet ngApp‘s beperkingen heeft. Het heet ngModule. Dit is wat je code eruit zou zien als je het gebruikt:
<!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>
U kunt de source code te krijgen bij:
http://www.simplygoodcode.com/2014/ 04 / angularjs-krijgt-around-ngapp-beperkingen-met-ngmodule /
Het is in wezen dezelfde code intern door angularjs zonder beperkingen.
Antwoord 3, Autoriteit 15%
Waarom wilt u meerdere [ng-app] gebruiken? Sinds Hoekige door het gebruik van modules wordt hervat, kunt u een app die meerdere afhankelijkheden te gebruiken te gebruiken.
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>
BEWERKEN
Houd er rekening mee dat als je de controller in de controller wilt gebruiken, je de syntaxis van controllerAs moet gebruiken, zoals:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>
Antwoord 4, autoriteit 7%
Je kunt meerdere hoekige applicaties opstarten, maar:
1) U moet ze handmatig opstarten
2) Gebruik “document” niet als de root, maar het knooppunt waar de hoekige interface zich bevindt om:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);
Dit zou veilig zijn.
Antwoord 5, autoriteit 2%
Handmatige bootstrapping van beide modules zal werken. Kijk dit eens
<!-- 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']);
});
Hier is de link naar de Plunker
http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
OPMERKING:In html is er geen ng-app. In plaats daarvan is idgebruikt.
Antwoord 6
Ik heb een POC gemaakt voor een Angular-applicatie met behulp van meerdere modules en router-outlets om sub-apps te nesten in een app met één pagina.
U kunt de broncode verkrijgen op: https://github.com/AhmedBahet/ng-sub- apps
Ik hoop dat dit zal helpen