Saya mencoba menambahkan dua aplikasi / modul sudut ke satu halaman. Di fiddles di bawah ini Anda dapat melihat bahwa selalu hanya modul pertama, yang direferensikan dalam kode html, akan bekerja dengan benar, sedangkan yang kedua tidak dikenali oleh angular.
Pada rebab ini kita hanya dapat menjalankan doSearch2metodenya, sedangkan pada rebab ini hanya doSearchmetodenya yang bekerja dengan benar.
Saya mencari cara bagaimana menempatkan dua modul sudut dengan benar ke dalam satu halaman.
Jawaban:
Hanya satu aplikasi AngularJS yang dapat di-bootstrap secara otomatis per dokumen HTML. NgApp pertama yang ditemukan dalam dokumen akan digunakan untuk mendefinisikan elemen root ke auto-bootstrap sebagai aplikasi. Untuk menjalankan banyak aplikasi dalam dokumen HTML Anda harus melakukan bootstrap secara manual menggunakan angular.bootstrap sebagai gantinya. Aplikasi AngularJS tidak dapat bertumpuk satu sama lain. - http://docs.angularjs.org/api/ng.directive:ngApp
Lihat juga
ng-app(karena tidak akan berhasil). ng-apphanya dapat digunakan satu kali per dokumen HTML. Ini benar-benar hanya jalan pintas jika Anda hanya memiliki satu aplikasi di halaman, yang merupakan kasus normal.
Saya membuat arahan alternatif yang tidak memiliki ngAppbatasan. Ini namanya ngModule. Seperti inilah tampilan kode Anda saat Anda menggunakannya:
<!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>Anda bisa mendapatkan kode sumber di:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
Ini pada dasarnya adalah kode yang sama yang digunakan secara internal oleh AngularJS tanpa batasan.
Mengapa Anda ingin menggunakan beberapa [ng-app]? Karena Angular dilanjutkan dengan menggunakan modul, Anda dapat menggunakan aplikasi yang menggunakan banyak dependensi.
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
Perlu diingat bahwa jika Anda ingin menggunakan controller di dalam controller Anda harus menggunakan sintaks controllerAs, seperti ini:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>Anda dapat mem-bootstrap beberapa aplikasi sudut, tetapi:
1) Anda perlu melakukan bootstrap secara manual
2) Anda tidak boleh menggunakan "document" sebagai root, tetapi node tempat antarmuka bersudut berada:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);Ini akan aman.
Bootstrap manual kedua modul akan berfungsi. Lihat ini
<!-- 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']);
});Ini link ke Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
CATATAN: Dalam html, tidak ada ng-app. idtelah digunakan sebagai gantinya.
Saya membuat POC untuk aplikasi Angular menggunakan beberapa modul dan outlet router untuk membuat sub aplikasi dalam satu aplikasi halaman. Anda bisa mendapatkan kode sumbernya di: https://github.com/AhmedBahet/ng-sub-apps
Semoga ini bisa membantu
ng-app="project"dan mengatakan bahwa "ini memungkinkan Anda memiliki modul yang berjalan di bagian halaman yang berbeda" tetapi dokumen ngApp menyatakan bahwa "hanya satu direktif yang dapat digunakan per dokumen HTML".