Bir sayfaya iki açısal uygulama / modül eklemeye çalışıyorum. Aşağıdaki kemanlarda, yalnızca html kodunda belirtilen ilk modülün her zaman doğru çalıştığını, ancak ikincisinin açısal olarak tanınmadığını görebilirsiniz.
Bu kemanla sadece doSearch2yöntemi uygulayabiliriz , oysa bu kemanla sadece doSearchyöntem doğru çalışır.
Bir sayfaya iki açısal modülü nasıl doğru şekilde yerleştireceğimi arıyorum.
Yanıtlar:
HTML belgesi başına yalnızca bir AngularJS uygulaması otomatik olarak önyüklenebilir. Belgede bulunan ilk ngApp, bir uygulama olarak otomatik önyükleme yapmak için kök öğeyi tanımlamak için kullanılacaktır. Bir HTML belgesinde birden çok uygulamayı çalıştırmak için, bunun yerine angular.bootstrap kullanarak bunları manuel olarak önyüklemelisiniz. AngularJS uygulamaları birbirinin içine yerleştirilemez. - http://docs.angularjs.org/api/ng.directive:ngApp
Ayrıca bakınız
ng-app(çünkü işe yaramayacaktır). ng-appHTML belgesi başına yalnızca bir kez kullanılabilir. Sayfada yalnızca bir uygulamanız varsa, bu normal bir durumdur.
ngAppSınırlamaları olmayan alternatif bir yönerge oluşturdum . Denir ngModule. Kodunuzu kullandığınızda şöyle görünecektir:
<!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>Kaynak kodunu şu adresten alabilirsiniz:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
AngularJS tarafından dahili olarak sınırlamalar olmaksızın kullanılan kodun aynısıdır.
Neden birden fazla [ng-app] kullanmak istiyorsunuz? Angular modüller kullanılarak sürdürüldüğünden, birden çok bağımlılık kullanan bir uygulama kullanabilirsiniz.
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>DÜZENLE
Denetleyicinin içinde denetleyiciyi kullanmak istiyorsanız, denetleyici gibi sözdizimini kullanmanız gerektiğini unutmayın:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>Birden çok açısal uygulamayı önyükleyebilirsiniz, ancak:
1) Bunları manuel olarak önyüklemeniz gerekir
2) Kök olarak "belge" kullanmamalısınız, ancak açısal arayüzün bulunduğu düğümü:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);Bu güvenli olur.
Manuel önyükleme, her iki modül de çalışacaktır. Şuna bak
<!-- 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']);
});İşte Plunker'ın bağlantısı http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
NOT: html'de yok ng-app. idonun yerine kullanıldı.
Alt uygulamaları tek sayfalık bir uygulamaya yerleştirmek için birden çok modül ve yönlendirici çıkışı kullanan bir Angular uygulaması için bir POC yaptım. Kaynak kodunu şu adresten alabilirsiniz: https://github.com/AhmedBahet/ng-sub-apps
Umarım bu yardımcı olur
ng-app="project"Uç Bağla " örneği ve "bu, sayfanın farklı bölümlerinde çalışan modüllere sahip olmanıza izin verir" diyor, ancak ngApp belgesi "HTML belgesi başına yalnızca bir yönerge kullanılabilir" diyor.