Ich versuche, einer Seite zwei eckige Apps / Module hinzuzufügen. In den folgenden Geigen sehen Sie, dass immer nur das erste Modul, auf das im HTML-Code verwiesen wird, ordnungsgemäß funktioniert, während das zweite Modul nicht durch Winkel erkannt wird.
In dieser Geige können wir nur die doSearch2Methode ausführen , während in dieser Geige nur die doSearchMethode korrekt funktioniert.
Ich suche nach einer Möglichkeit, zwei Winkelmodule korrekt auf einer Seite zu platzieren.
Antworten:
Pro HTML-Dokument kann nur eine AngularJS-Anwendung automatisch gebootet werden. Die erste im Dokument gefundene ngApp wird verwendet, um das Stammelement für den automatischen Bootstrap als Anwendung zu definieren. Um mehrere Anwendungen in einem HTML-Dokument auszuführen, müssen Sie sie stattdessen manuell mit angle.bootstrap booten. AngularJS-Anwendungen können nicht ineinander verschachtelt werden. - http://docs.angularjs.org/api/ng.directive:ngApp
Siehe auch
ng-app(weil es nicht funktioniert). ng-appkann nur einmal pro HTML-Dokument verwendet werden. Es ist wirklich nur eine Abkürzung, wenn Sie nur eine App auf der Seite haben, was der Normalfall ist.
Ich habe eine alternative Direktive erstellt, die keine ngAppEinschränkungen hat. Es heißt ngModule. So würde Ihr Code aussehen, wenn Sie ihn verwenden:
<!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>
Den Quellcode erhalten Sie unter:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
Es ist im Wesentlichen derselbe Code, der von AngularJS intern ohne Einschränkungen verwendet wird.
Warum möchten Sie mehrere [ng-app] verwenden? Da Angular mithilfe von Modulen wieder aufgenommen wird, können Sie eine App verwenden, die mehrere Abhängigkeiten verwendet.
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>
BEARBEITEN
Beachten Sie, dass Sie, wenn Sie den Controller innerhalb des Controllers verwenden möchten, die ControllerAs-Syntax wie folgt verwenden müssen:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>
Sie können mehrere Winkelanwendungen booten, aber:
1) Sie müssen sie manuell booten
2) Sie sollten nicht "document" als Root verwenden, sondern den Knoten, in dem sich die Winkelschnittstelle befindet, um:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);
Das wäre sicher.
Das manuelle Bootstrapping beider Module funktioniert. Schau dir das an
<!-- 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 ist der Link zum Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
HINWEIS: In HTML gibt es keine ng-app. idwurde stattdessen verwendet.
Ich habe einen POC für eine Angular-Anwendung erstellt, indem ich mehrere Module und Router-Outlets verwendet habe, um Unter-Apps in einer App mit nur einer Seite zu verschachteln. Den Quellcode erhalten Sie unter: https://github.com/AhmedBahet/ng-sub-apps
Hoffe das wird helfen
ng-app="project"und besagt, dass "damit Module in verschiedenen Teilen der Seite ausgeführt werden können", das ngApp-Dokument jedoch angibt, dass "nur eine Direktive pro HTML-Dokument verwendet werden kann".