AngularJS Nhiều ng-app trong một trang

180

Tôi mới bắt đầu học Angular JS và tạo một số mẫu cơ bản tuy nhiên tôi gặp vấn đề sau.

Tôi đã tạo ra 2 mô-đun và 2 bộ điều khiển.

shoppingCart -> ShoppingCartController
namesList -> NamesController

Có quan điểm liên quan cho mỗi bộ điều khiển. Chế độ xem đầu tiên hiển thị tốt nhưng thứ hai không hiển thị. Không có lỗi.

http://jsfiddle.net/ep2sQ/

Xin hãy giúp tôi giải quyết vấn đề này.

Ngoài ra, có bất kỳ khả năng nào để thêm bàn điều khiển trong Chế độ xem để kiểm tra giá trị nào được truyền từ Bộ điều khiển.

ví dụ: trong div sau chúng ta có thể thêm console.log và xuất các giá trị của bộ điều khiển

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>

angularjs

— Nitin Mukesh
nguồn

10

có thể điều này sẽ giúp: stackoverflow.com/questions/12860595/ từ

— Cherniv

Cảm ơn bạn. Điều này rất hữu ích và tôi đã giải quyết vấn đề bằng cách sử dụng liên kết bạn cung cấp. Bạn cũng có thể cung cấp thông tin về cách sử dụng console.log để kết xuất Trình điều khiển trong Chế độ xem / Mẫu {{console.log}} không hoạt động.

— Nitin Mukesh

chào mừng bạn lưu ý rằng bạn đã thực hiện "giao diện điều khiển" trong chế độ xem, điều này: {{item.product_name}}thực sự "in" một giá trị từ mô hình của bạn

— Cherniv

1

Có điều gì sai khi tạo nhiều ứng dụng cho một ứng dụng web? Tôi có dự án này trong đó mỗi trang html có ứng dụng riêng, tôi muốn biết liệu hiệu suất có bị ảnh hưởng không?

— T. Rex

Mặc dù có thể bootstrap nhiều hơn một ứng dụng AngularJS trên mỗi trang, chúng tôi không chủ động kiểm tra kịch bản này. Có thể bạn sẽ gặp vấn đề, đặc biệt là với các ứng dụng phức tạp, vì vậy nên thận trọng. Xem Hướng dẫn dành cho nhà phát triển AngularJS - Bootstrap .

— georgeawg 17/03/2017

190

Vì vậy, về cơ bản như được đề cập bởi Cherniv, chúng ta cần phải khởi động lại các mô-đun để có nhiều ứng dụng ng trong cùng một trang. Rất cám ơn cho tất cả các đầu vào.

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>

Mở rộng đoạn trích

— Nitin Mukesh
nguồn

2

Bạn có thể tạo một lệnh để thực hiện việc này thay vì stackoverflow.com/a/22898036/984780

— Luis Perez

33

Tài liệu góc nói rằng khi tự khởi động ứng dụng, KHÔNG sử dụng lệnh ngApp. Vì vậy, ng-app = "nameList" (có thể / nên) được yêu thích. docs.angularjs.org/guide/bootstrap

— Mike_K

4

Đối với những người có ng-app trong hai tệp js riêng biệt, đoạn mã dưới đây có thể giúp angular.element (document). ;});

— Siva Kannan

3

Lưu ý: trong ứng dụng của mình, tôi đã phải đặt dòng này "angular.bootstrap (document.getEuityById (" App2 "), ['nameList']);" trong $ (tài liệu). hàm chức năng

— La masse

Nó không hoạt động với tôi. Chỉ có ứng dụng ng đầu tiên hoạt động chính xác

— SIVAKUMAR.J

120

Để chạy nhiều ứng dụng trong tài liệu HTML, bạn phải tự khởi động chúng bằng cách sử dụng angular.bootstrap ()

HTML

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

Mã não

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

Lý do cho điều này là chỉ có một ứng dụng AngularJS có thể tự động được khởi động trên mỗi tài liệu HTML. Cái đầu tiên ng-appđược tìm thấy trong tài liệu sẽ được sử dụng để xác định phần tử gốc để tự động bootstrap dưới dạng một ứng dụng.

Nói cách khác, về mặt kỹ thuật có thể có một vài ứng dụng trên mỗi trang, chỉ một lệnh ng-app sẽ được tự động khởi tạo và khởi tạo bởi khung Angular.

— Luôn luôn học hỏi
nguồn

20

Chỉ một lệnh ngAppcó thể được tự động tải cho mỗi Tài liệu HTML nhưng bạn có thể có nhiều ứng dụng miễn là bạn tự khởi động các ứng dụng tiếp theo.

— JaredMcAteer

@CodeHater namesListmô-đun nằm ở đâu? Bạn có thể vui lòng cập nhật câu trả lời của bạn, để nó sẽ rõ ràng hơn?

— Eugene

Cái này sai. Bạn có thể có nhiều ng-app. Xem stackoverflow.com/a/24867989/753632

— AndroidDev

3

@AndroidDev, tôi không theo dõi. Liên kết bạn tham chiếu không hiển thị nhiều thuộc tính ng-app.

— Jpnh

42

Bạn có thể sử dụng angular.bootstrap()trực tiếp ... vấn đề là bạn mất lợi ích của các chỉ thị.

Trước tiên, bạn cần có một tham chiếu đến phần tử HTML để khởi động nó, điều đó có nghĩa là mã của bạn hiện được ghép với HTML của bạn.

Thứ hai, sự liên kết giữa hai không rõ ràng. Với ngAppbạn có thể thấy rõ HTML nào được liên kết với mô-đun nào và bạn biết nơi để tìm thông tin đó. Nhưng angular.bootstrap()có thể được gọi từ bất cứ nơi nào trong mã của bạn.

Nếu bạn sẽ làm điều đó bằng mọi cách tốt nhất sẽ là sử dụng một chỉ thị. Đó là những gì tôi đã làm. Nó được gọi là ngModule. Đây là những gì mã của bạn sẽ trông giống như sử dụng nó:

<!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>

Bạn có thể lấy mã nguồn cho nó tại:

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

Nó được thực hiện theo cách tương tự như ngApp. Nó chỉ đơn giản là gọi angular.bootstrap()phía sau hậu trường.

— Luis Perez
nguồn

9

Trong trường hợp của tôi, tôi phải gói bootstrapping của ứng dụng thứ hai angular.element(document).readyđể nó hoạt động:

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById("app2"), ["app2"]);
});

— Saeb Amini
nguồn

V1.6 Không dùng nữa: Sử dụng angular.element(callback)thay vì angular.element(document).ready(callback)). Xem tài liệu tham khảo API angularJel angular.element . Ngoài ra github.com/angular/angular.js/commit/ từ

— georgeawg 17/03/2017

7

Dưới đây là ví dụ về hai ứng dụng trong một trang html và hai trình điều khiển trong một ứng dụng:

    <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
nguồn

6

Bạn có thể hợp nhất nhiều mô-đun trong một rootModule và gán mô-đun đó dưới dạng ng-app cho một phần tử ưu việt ex: body tag.

mã cũ:

    <!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
nguồn

4

Bạn đang lồng hai ứng dụng khác nhau bên trong rootApp, Angular không cho phép lồng các ứng dụng

— codin

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>

Mở rộng đoạn trích

— Praneeth
nguồn

Chỉ cần một tiện ích mở rộng để có nhiều ứng dụng ng trong một trang, tôi phải kết hợp cả mã saeb-amini và @Nithin Mukesh - Cảm ơn cả hai

— Praneeth

Khái niệm này đang làm việc cho tôi. angular.element (document). yet (function () {angular.bootstrap (document.getEuityById ("App2"), ['nameList']); angular.bootstrap (document.getEuityById ("App3"), [' ]);});

— SIVAKUMAR.J

2

Chỉ có một ứng dụng được tự động khởi tạo. Những người khác phải tự khởi tạo như sau:

Cú pháp:

angular.bootstrap(element, [modules]);

Thí dụ:

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="angular.js@1.5.8"></script>
  <script data-require="ui-router@0.2.18" 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>

Mở rộng đoạn trích

API AngularJS

— Premraj
nguồn

1

Bạn có thể xác định Root ng-App và trong ng-App này, bạn có thể xác định nhiều nd-Controler. Như thế này

    <!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
nguồn

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']);

<!-- angularjs@1.7.0 -->
<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>

Mở rộng đoạn trích

— Ruben Rivero
nguồn

0

Tôi đã sửa đổi jsfiddle của bạn, có thể tạo ra hầu hết các mô-đun dưới dạng rootModule cho các mô-đun còn lại. Dưới đây Sửa đổi cập nhật trên jsfiddle của bạn.

Module thứ hai có thể được tiêm trong RootModule.
Trong Html ứng dụng ng được xác định thứ hai được đặt bên trong ứng dụng Root ng.

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

— Mano
nguồn

Bất cứ ý tưởng tại sao điều này chỉ đánh giá đầu tiên ng-app? jsfiddle.net/vwcbtzdg

— Si8

Đầu tiên chỉ tự động khởi tạo, người khác phải khởi tạo thủ công

— Mano

0

Sử dụng angular.bootstrap(element, [modules], [config])để khởi động thủ công ứng dụng AngularJS (để biết thêm thông tin, xem hướng dẫn Bootstrap ).

Xem ví dụ sau:

// 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']);

<!-- angularjs@1.7.0 -->
<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>

Mở rộng đoạn trích

— Yas
nguồn

-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
nguồn

1

Thêm mô tả vào câu trả lời của bạn những gì bạn đã đăng

— Abhinav Singh Maurya

1

Cần bình luận giải thích những gì đang xảy ra! Cố gắng nhé!

— Eric Brown - Cal