AngularJS Multi-aplikasi dalam satu halaman

180

Saya baru saja mulai belajar Angular JS dan membuat beberapa sampel dasar namun saya terjebak dengan masalah berikut.

Saya telah membuat 2 modul dan 2 pengendali.

shoppingCart -> ShoppingCartController
namesList -> NamesController

Ada tampilan terkait untuk setiap pengontrol. Tampilan pertama membuat baik-baik saja tetapi yang kedua tidak rendering. Tidak ada kesalahan.

http://jsfiddle.net/ep2sQ/

Tolong bantu saya menyelesaikan masalah ini.

Juga apakah ada kemungkinan untuk menambahkan konsol di Lihat untuk memeriksa nilai-nilai apa yang dilewatkan dari Kontroler.

misal di div berikut ini bisa kita tambahkan console.log dan output nilai-nilai controller

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
angularjs Nitin Mukesh
sumber
10
mungkin ini akan membantu: stackoverflow.com/questions/12860595/…
Cherniv
Terima kasih, Cherniv. Ini sangat membantu dan saya memecahkan masalah menggunakan tautan yang Anda berikan. Anda juga bisa memberikan info tentang cara menggunakan console.log untuk membuang Controller di dalam View / Template {{console.log}} tidak berfungsi.
Nitin Mukesh
terimakasih kembali. perhatikan bahwa Anda sudah melakukan "konsol" dalam tampilan, ini: {{item.product_name}}sebenarnya "mencetak" nilai dari model Anda
Cherniv
1
Apakah ada yang salah dengan membuat beberapa aplikasi untuk aplikasi web? Saya memiliki proyek ini di mana setiap halaman html memiliki aplikasi sendiri, saya ingin tahu apakah kinerja akan terpengaruh?
T. Rex
Meskipun dimungkinkan untuk melakukan bootstrap lebih dari satu aplikasi AngularJS per halaman, kami tidak secara aktif menguji skenario ini. Mungkin Anda akan mengalami masalah, terutama dengan aplikasi yang rumit, jadi berhati-hatilah. Lihat Panduan Pengembang AngularJS - Bootstrap .
georgeawg

Jawaban:

190

Jadi pada dasarnya seperti yang disebutkan oleh Cherniv kita perlu mem-bootstrap modul untuk memiliki beberapa aplikasi-ng dalam halaman yang sama. Terima kasih banyak atas semua masukan.

var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
  function($scope) {
    $scope.items = [{
      product_name: "Product 1",
      price: 50
    }, {
      product_name: "Product 2",
      price: 20
    }, {
      product_name: "Product 3",
      price: 180
    }];
    $scope.remove = function(index) {
      $scope.items.splice(index, 1);
    }
  }
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
  function($scope) {
    $scope.names = [{
      username: "Nitin"
    }, {
      username: "Mukesh"
    }];
  }
);
angular.bootstrap(document.getElementById("App2"), ['namesList']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
  <h1>Your order</h1>
  <div ng-repeat="item in items">
    <span>{{item.product_name}}</span>
    <span>{{item.price | currency}}</span>
    <button ng-click="remove($index);">Remove</button>
  </div>
</div>

<div id="App2" ng-app="namesList" ng-controller="NamesController">
  <h1>List of Names</h1>
  <div ng-repeat="_name in names">
    <p>{{_name.username}}</p>
  </div>
</div>
Luaskan cuplikan

Nitin Mukesh
sumber
2
Anda dapat membuat arahan untuk melakukan ini sebagai gantinya stackoverflow.com/a/22898036/984780
Luis Perez
33
Dokumentasi sudut mengatakan bahwa ketika secara manual bootstrap aplikasi, BUKAN untuk menggunakan arahan ngApp. Jadi ng-app = "namesList" (bisa / harus) dihapus kembali. docs.angularjs.org/guide/bootstrap
Mike_K
4
Bagi mereka yang memiliki aplikasi-ng dalam file js yang terpisah dua kode di bawah ini dapat membantu angular.element (document) .ready (function () {angular.bootstrap (document.getElementById ("App2"), ['namesList']) ;});
Siva Kannan
3
Catatan: di aplikasi saya, saya harus meletakkan baris ini "angular.bootstrap (document.getElementById (" App2 "), ['namesList']);" dalam $ (dokumen). Sudah berfungsi
La masse
Ini tidak berfungsi untuk saya. Hanya aplikasi pertama yang bekerja dengan benar
SIVAKUMAR.J
120

Untuk menjalankan banyak aplikasi dalam dokumen HTML Anda harus secara manual bootstrap menggunakan angular.bootstrap ()

HTML

<!-- Automatic Initialization -->
<div ng-app="myFirstModule">
    ...
</div>
<!-- Need To Manually Bootstrap All Other Modules -->
<div id="module2">
    ...
</div>

JS

angular.
  bootstrap(document.getElementById("module2"), ['mySecondModule']);

Alasannya adalah hanya satu aplikasi AngularJS yang dapat di-boot secara otomatis per dokumen HTML. Yang pertama ng-appditemukan dalam dokumen akan digunakan untuk mendefinisikan elemen root untuk bootstrap otomatis sebagai aplikasi.

Dengan kata lain, walaupun secara teknis dimungkinkan untuk memiliki beberapa aplikasi per halaman, hanya satu petunjuk aplikasi-ng yang akan secara otomatis dipakai dan diinisialisasi oleh kerangka kerja Angular.

Selalu Belajar
sumber
20
Hanya satu ngApparahan yang dapat di -boot secara otomatis per Dokumen HTML tetapi Anda dapat memiliki beberapa aplikasi selama Anda melakukan bootstrap secara manual.
JaredMcAteer
@ KodeHater di mana namesListmodul itu berada? Bisakah Anda memperbarui jawaban Anda, sehingga lebih jelas?
Eugene
Ini salah. Anda BISA memiliki beberapa aplikasi ng. Lihat stackoverflow.com/a/24867989/753632
AndroidDev
3
@AndroidDev, saya tidak mengikuti. Tautan yang Anda referensi tidak menunjukkan beberapa atribut aplikasi-ng.
Jpnh
42

Anda dapat menggunakan angular.bootstrap()langsung ... masalahnya adalah Anda kehilangan manfaat arahan.

Pertama, Anda perlu mendapatkan referensi ke elemen HTML untuk bootstrap, yang berarti kode Anda sekarang digabungkan ke HTML Anda.

Kedua, hubungan antara keduanya tidak begitu jelas. Dengan ngAppAnda dapat dengan jelas melihat HTML apa yang terkait dengan modul apa dan Anda tahu di mana mencari informasi itu. Tetapi angular.bootstrap()bisa dipanggil dari mana saja dalam kode Anda.

Jika Anda akan melakukannya di semua cara terbaik adalah dengan menggunakan arahan. Itulah yang saya lakukan. Itu disebut ngModule. Berikut ini kode Anda akan terlihat seperti 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 sumbernya di:

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

Diimplementasikan dengan cara yang sama seperti ngApp. Itu hanya panggilan di angular.bootstrap()belakang layar.

Luis Perez
sumber
9

Dalam kasus saya, saya harus membungkus bootstrap aplikasi kedua saya angular.element(document).readyagar bisa berfungsi:

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById("app2"), ["app2"]);
});
Saeb Amini
sumber
V1.6 Sudah usang: Gunakan angular.element(callback)sebagai ganti angular.element(document).ready(callback)). Lihat Referensi API angularJS angular.element . Juga github.com/angular/angular.js/commit/…
georgeawg
7

Berikut adalah contoh dari dua aplikasi dalam satu halaman html dan dua conrollers dalam satu aplikasi:

    <div ng-app = "myapp">
      <div  ng-controller = "C1" id="D1">
         <h2>controller 1 in app 1 <span id="titre">{{s1.title}}</span> !</h2>
      </div>

      <div  ng-controller = "C2" id="D2">
         <h2>controller 2 in app 1 <span id="titre">{{s2.valeur}}</span> !</h2>
      </div>
    </div>
    <script>
        var A1 = angular.module("myapp", [])

        A1.controller("C1", function($scope) {
            $scope.s1 = {};
            $scope.s1.title = "Titre 1";
         });

        A1.controller("C2", function($scope) {
            $scope.s2 = {};
            $scope.s2.valeur = "Valeur 2";
         });
    </script>

    <div ng-app="toapp" ng-controller="C1" id="App2">
        <br>controller 1 in app 2
        <br>First Name: <input type = "text" ng-model = "student.firstName">
        <br>Last Name : <input type="text" ng-model="student.lastName">
        <br>Hello : {{student.fullName()}}
        <br>
    </div>

    <script>
        var A2 = angular.module("toapp", []);
        A2.controller("C1", function($scope) {
            $scope.student={
                firstName:"M",
                lastName:"E",
                fullName:function(){
                    var so=$scope.student;
                    return so.firstName+" "+so.lastName;
                }
            };
        });
        angular.bootstrap(document.getElementById("App2"), ['toapp']);
    </script>
<style>
    #titre{color:red;}
    #D1{ background-color:gray; width:50%; height:20%;}
    #D2{ background-color:yellow; width:50%; height:20%;}
    input{ font-weight: bold; }
</style>

merrais
sumber
6

Anda dapat menggabungkan beberapa modul dalam satu rootModule, dan menetapkan modul itu sebagai aplikasi-ng ke elemen superior, misalnya: tag tubuh.

kode ex:

    <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="namesController.js"></script>
<script src="myController.js"></script>
<script>var rootApp = angular.module('rootApp', ['myApp1','myApp2'])</script>
<body ng-app="rootApp">

<div ng-app="myApp1" ng-controller="myCtrl" >
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>

<div ng-app="myApp2" ng-controller="namesCtrl">
<ul>
  <li ng-bind="first">{{first}}
  </li>
</ul>
</div>

</body>
</html>
Vijay Tripathi
sumber
4
Anda mengumpulkan dua aplikasi berbeda di dalam rootApp, Angular tidak mengizinkan aplikasi bersarang
kodin
4 

         var shoppingCartModule = angular.module("shoppingCart", [])
          shoppingCartModule.controller("ShoppingCartController",
           function($scope) {
             $scope.items = [{
               product_name: "Product 1",
               price: 50
             }, {
               product_name: "Product 2",
               price: 20
             }, {
               product_name: "Product 3",
               price: 180
             }];
             $scope.remove = function(index) {
               $scope.items.splice(index, 1);
             }
           }
         );
         var namesModule = angular.module("namesList", [])
          namesModule.controller("NamesController",
           function($scope) {
             $scope.names = [{
               username: "Nitin"
             }, {
               username: "Mukesh"
             }];
           }
         );


         var namesModule = angular.module("namesList2", [])
          namesModule.controller("NamesController",
           function($scope) {
             $scope.names = [{
               username: "Nitin"
             }, {
               username: "Mukesh"
             }];
           }
         );


         angular.element(document).ready(function() {
           angular.bootstrap(document.getElementById("App2"), ['namesList']);
           angular.bootstrap(document.getElementById("App3"), ['namesList2']);
         });
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body>

  <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
    <h1>Your order</h1>
    <div ng-repeat="item in items">
      <span>{{item.product_name}}</span>
      <span>{{item.price | currency}}</span>
      <button ng-click="remove($index);">Remove</button>
    </div>
  </div>

  <div id="App2" ng-app="namesList" ng-controller="NamesController">
    <h1>List of Names</h1>
    <div ng-repeat="_name in names">
      <p>{{_name.username}}</p>
    </div>
  </div>
  <div id="App3" ng-app="namesList2" ng-controller="NamesController">
    <h1>List of Names</h1>
    <div ng-repeat="_name in names">
      <p>{{_name.username}}</p>
    </div>
  </div>


</body>

</html>
Luaskan cuplikan

Praneeth
sumber
Hanya perpanjangan untuk memiliki beberapa aplikasi-ng dalam satu halaman saya hanya perlu menggabungkan kedua kode saeb-amini dan @Nithin Mukesh - Terima kasih keduanya
Praneeth
Konsep ini bekerja untuk saya. angular.element (document) .ready (function () {angular.bootstrap (document.getElementById ("App2"), ['namesList']); angular.bootstrap (document.getElementById ("App3"), ['namesList2' ]);});
SIVAKUMAR.J
2

Hanya satu aplikasi yang diinisialisasi secara otomatis. Yang lain harus diinisialisasi secara manual sebagai berikut:

Sintaksis:

angular.bootstrap(element, [modules]);

Contoh:

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="[email protected]"></script>
  <script data-require="[email protected]" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script>
    var parentApp = angular.module('parentApp', [])
  .controller('MainParentCtrl', function($scope) {
    $scope.name = 'universe';
  });



var childApp = angular.module('childApp', ['parentApp'])
  .controller('MainChildCtrl', function($scope) {
    $scope.name = 'world';
  });


angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('childApp'), ['childApp']);
});
    
  </script>
</head>

<body>
  <div id="childApp">
    <div ng-controller="MainParentCtrl">
      Hello {{name}} !
      <div>
        <div ng-controller="MainChildCtrl">
          Hello {{name}} !
        </div>
      </div>
    </div>
  </div>
</body>

</html>
Luaskan cuplikan

API AngularJS

Premraj
sumber
1

Anda dapat mendefinisikan Aplikasi Root dan di Aplikasi ini Anda dapat mendefinisikan beberapa nd-Kontroler. Seperti ini

    <!DOCTYPE html>
    <html>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>

<style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }

         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }

         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>

     <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller('studentController1', function ($scope) {
      $scope.student = {
      firstName: "MUKESH",
      lastName: "Paswan",

      fullName: function () {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
                     }
                 };
             });

             mainApp.controller('studentController2', function ($scope) {
                 $scope.student = {
                     firstName: "Mahesh",
                     lastName: "Parashar",
                     fees: 500,

                     subjects: [
                        { name: 'Physics', marks: 70 },
                        { name: 'Chemistry', marks: 80 },
                        { name: 'Math', marks: 65 },
                        { name: 'English', marks: 75 },
                        { name: 'Hindi', marks: 67 }
                     ],

                     fullName: function () {
                         var studentObject;
                         studentObject = $scope.student;
                         return studentObject.firstName + " " + studentObject.lastName;
                     }
                 };
             });
          </script>

    <body>
    <div ng-app = "mainApp">
    <div id="dv1"  ng-controller = "studentController1">
    Enter first name: <input type = "text" ng-model = "student.firstName"><br/><br/> Enter last name: <input type = "text" ng-model = "student.lastName"><br/>
    <br/>
     You are entering: {{student.fullName()}}
    </div>

    <div id="dv2" ng-controller = "studentController2">
     <table border = "0">
                <tr>
                   <td>Enter first name:</td>
                   <td><input type = "text" ng-model = "student.firstName"></td>
                </tr>

                <tr>
                   <td>Enter last name: </td>
                   <td>
                      <input type = "text" ng-model = "student.lastName">
                   </td>
                </tr>

                <tr>
                   <td>Name: </td>
                   <td>{{student.fullName()}}</td>
                </tr>

                <tr>
                   <td>Subject:</td>

                   <td>
                      <table>
                         <tr>
                            <th>Name</th>.
                            <th>Marks</th>
                         </tr>

                         <tr ng-repeat = "subject in student.subjects">
                            <td>{{ subject.name }}</td>
                            <td>{{ subject.marks }}</td>
                         </tr>

                      </table>
                   </td>

                </tr>
             </table>

          </div>
    </div>

    </body>
    </html>
santosh
sumber
1 

// root-app
const rootApp = angular.module('root-app', ['app1', 'app2E']);

// app1
const app11aa = angular.module('app1', []);
app11aa.controller('main', function($scope) {
  $scope.msg = 'App 1';
});

// app2
const app2 = angular.module('app2E', []);
app2.controller('mainB', function($scope) {
  $scope.msg = 'App 2';
});

// bootstrap
angular.bootstrap(document.querySelector('#app1a'), ['app1']);
angular.bootstrap(document.querySelector('#app2b'), ['app2E']);
<!-- [email protected] -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>

<!-- root-app -->
<div ng-app="root-app">

  <!-- app1 -->
  <div id="app1a">
    <div ng-controller="main">
      {{msg}}
    </div>
  </div>

  <!-- app2 -->
  <div id="app2b">
    <div ng-controller="mainB">
      {{msg}}
    </div>
  </div>

</div>
Luaskan cuplikan

Ruben Rivero
sumber
0

Saya telah memodifikasi jsfiddle Anda, dapat membuat sebagian besar modul sebagai rootModule untuk sisa modul. Di bawah Modifikasi diperbarui pada jsfiddle Anda.

  1. Modul kedua dapat disuntikkan di RootModule.
  2. Dalam Html, ng-app kedua didefinisikan ditempatkan di dalam Root ng-app.

Updated JsFiddle: http://jsfiddle.net/ep2sQ/1011/

Mano
sumber
Adakah yang tahu mengapa ini hanya mengevaluasi yang pertama ng-app? jsfiddle.net/vwcbtzdg
Si8
Pertama hanya diinisialisasi secara otomatis, yang lain harus melakukan inisialisasi secara manual
Mano
0

Gunakan angular.bootstrap(element, [modules], [config])untuk memulai aplikasi AngularJS secara manual (untuk informasi lebih lanjut, lihat panduan Bootstrap ).

Lihat contoh berikut:

// root-app
const rootApp = angular.module('root-app', ['app1', 'app2']);

// app1
const app1 = angular.module('app1', []);
app1.controller('main', function($scope) {
  $scope.msg = 'App 1';
});

// app2
const app2 = angular.module('app2', []);
app2.controller('main', function($scope) {
  $scope.msg = 'App 2';
});

// bootstrap
angular.bootstrap(document.querySelector('#app1'), ['app1']);
angular.bootstrap(document.querySelector('#app2'), ['app2']);
<!-- [email protected] -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>

<!-- root-app -->
<div ng-app="root-app">

  <!-- app1 -->
  <div id="app1">
    <div ng-controller="main">
      {{msg}}
    </div>
  </div>

  <!-- app2 -->
  <div id="app2">
    <div ng-controller="main">
      {{msg}}
    </div>
  </div>

</div>
Luaskan cuplikan

Yas
sumber
-5 
<html>
<head>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="shoppingCartParentModule" >
     <div ng-controller="ShoppingCartController">
        <h1>Your order</h1>
        <div ng-repeat="item in items">
            <span>{{item.product_name}}</span>
            <span>{{item.price | currency}}</span>
            <button ng-click="remove($index);">Remove</button>
        </div>
    </div>

    <div ng-controller="NamesController">
        <h1>List of Names</h1>
        <div ng-repeat="name in names">
            <p>{{name.username}}</p>
        </div>
    </div>
</div>
</body>
<script>
var shoppingCartModule = angular.module("shoppingCart", [])
            shoppingCartModule.controller("ShoppingCartController",
                function($scope) {
                    $scope.items = [
                        {product_name: "Product 1", price: 50},
                        {product_name: "Product 2", price: 20},
                        {product_name: "Product 3", price: 180}
                    ];
                    $scope.remove = function(index) {
                        $scope.items.splice(index, 1);
                    }
                }
            );
            var namesModule = angular.module("namesList", [])
            namesModule.controller("NamesController",
                function($scope) {
                    $scope.names = [
                        {username: "Nitin"},
                        {username: "Mukesh"}
                    ];
                }
            );
   angular.module("shoppingCartParentModule",["shoppingCart","namesList"])
</script>
</html>
Sirigiri Chandu
sumber
1
Tambahkan deskripsi ke jawaban Anda apa yang telah Anda posting
Abhinav Singh Maurya
1
Membutuhkan komentar yang menjelaskan apa yang terjadi! Usaha yang bagus!
Eric Brown - Cal