Bagaimana cara menentukan dua aplikasi / modul sudut dalam satu halaman?

118

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.

javascript angularjs Thomas Kremmel
sumber

Jawaban:

123

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

Mark Rajcok
sumber
@MarkRajcok Jadi, apakah praktik yang baik hanya memiliki satu modul per dokumen HTML? Contoh "Wire up a Backend" pada set halaman AngularJS utama 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".
theblang
9
@mattblang, modul dikaitkan dengan aplikasi Angular, dan bukan dokumen HTML. Biasanya Anda hanya membutuhkan satu aplikasi per halaman / dokumen, tetapi jika Anda ingin menjalankan beberapa aplikasi Angular (masing-masing dapat menggunakan satu atau lebih modul) pada halaman / dokumen yang sama, maka Anda harus mem-bootstrap masing-masing secara manual - - jangan gunakan 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.
Mark Rajcok
1
Apakah ada contohnya? Saya melihat dokumentasi api boostrap singkat tetapi saya tidak bisa membuatnya berfungsi. Saya telah mencari ini di Google untuk sementara waktu dan tampaknya tidak ada satu pun contoh yang berfungsi. Selain itu, bagaimana cara ini bekerja dengan rute? Jelas ada masalah tabrakan.
Robert Christian
Juga, saya sangat suka cara menggunakan ng-app menunjukkan kepada pengembang lain dengan tepat bagian halaman mana yang dikontrol oleh modul apa. Apakah tidak ada cara untuk menggunakan markup pada halaman untuk mencapai ini? Atau setidaknya, beberapa petunjuk tentang markup?
chrismarx
1
Dua paragraf pertama untuk arahan ng-app mengatakan semuanya - docs.angularjs.org/api/ng.directive:ngApp
simo
38

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.

Luis Perez
sumber
luisperezphd: Saya membaca entri blog Anda. Apakah ada cara untuk menyarangkan aplikasi (mis. Pembuat widget dengan widget yang dimuat AJAX) atau mendeteksi jika halaman sudah memiliki aplikasi dan memasukkan aplikasi lain sebagai ketergantungan yang pertama? Saya baru saja memposting pertanyaan saya di sini dengan lebih detail tentang apa yang sebenarnya ingin saya capai. Terima kasih!
Daniel Bonnell
@ACIDSTEALTH Fakta bahwa AngularJS melaporkan bahwa elemen sudah di-bootstrap berarti bahwa pasti ada cara untuk mengatakannya - meskipun kode itu mungkin internal AngularJS. Untuk mengetahuinya, Anda dapat mereferensikan versi AngularJS dan breakpoint yang tidak diminimalkan pada kesalahan itu untuk melihat kondisi if. Dari apa yang dapat saya lihat dari tautan pertanyaan StackOverflow Anda, sepertinya Anda ingin "menyuntikkan" modul secara dinamis pada waktu proses. Jika demikian, Anda mungkin ingin melihat artikel ini: weblogs.asp.net/dwahlin/…
Luis Perez
Hai @LuisPerez, saya sudah memeriksa situs web Anda. Saya lelah di mesin saya. angularJS tidak mendeteksi "ng-modules" / "ng-module". Apakah saya memerlukan referensi yang disertakan dalam file saya?
sujay kodamala
Ya @sujaykodamala, ngModule tidak dibangun di AngularJS, itu adalah arahan yang saya buat. Anda dapat mengunduhnya dari GitHub. Anda dapat menemukannya di sini: github.com/luisperezphd/ngModule
Luis Perez
Halo @Luis Perez! Saya telah memeriksa posting blog Anda dan itu benar-benar luar biasa. Jika Anda punya waktu, dapatkah Anda memeriksa posting saya di sini untuk menyelesaikan masalah - stackoverflow.com/questions/46952478/… . Terima kasih.
pengguna8512043
19

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>
Biksu Monyet
sumber
Kesalahan Tidak Tertangkap: [$ injector: modulerr] error.angularjs.org/1.3.14/$injector/…… criptMinification% 2Fbower_components% 2Fangular% 2Fangular.min.js% 3A17% 3A381)
Anandaraja_Srinivasan
Sudahkah Anda mencoba membalik urutan 2 modul? ('OtherModule' sebelum 'app') Karena, saya sering menggunakan solusi ini dan berfungsi dengan sempurna ...
Monkey Monk
1
Baik ! Saya telah melihat kesalahan dalam contoh Javascript yang saya berikan. Saya pikir itu sudah diperbaiki sekarang! Sebagai catatan, saya akan menggunakan sintaks penyetel di 2 tempat untuk modul yang sama ... yang jelas tidak diizinkan! :-)
Biksu Monyet
cara kita berpose untuk melakukannya
Harry Bosh
9

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.

Wouter
sumber
3

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.

Hari Das
sumber
0

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

abahet
sumber