Bir sayfadaki AngularJS Çoklu ng-uygulaması

180

Angular JS öğrenmeye başladım ve bazı temel örnekler oluşturdum, ancak aşağıdaki sorunla sıkıştım.

2 modül ve 2 kontrolör oluşturdum.

shoppingCart -> ShoppingCartController
namesList -> NamesController

Her denetleyici için ilişkilendirilmiş görünümler vardır. İlk Görünüm iyi sonuç verirken ikincisi oluşturma değildir. Hata yok.

http://jsfiddle.net/ep2sQ/

Lütfen bu sorunu çözmeme yardımcı olun.

Ayrıca, Denetleyiciden hangi değerlerin aktarıldığını kontrol etmek için Görünüm'de konsol ekleme olasılığı da vardır.

örneğin aşağıdaki div'de console.log ekleyebilir ve denetleyici değerlerini verebiliriz

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
angularjs 
— Nitin Mukesh
kaynak
10
— Cherniv
Teşekkürler Cherniv. Bu çok yararlı ve verdiğiniz bağlantıyı kullanarak sorunu çözdüm. Lütfen {{console.log}} Görünüm / Şablon içindeki Denetleyiciyi boşaltmak için console.log'un nasıl kullanılacağı hakkında da bilgi verebilir misiniz?
— Nitin Mukesh
Hoşgeldin. zaten {{item.product_name}}bir
— görünümde
1
Bir web uygulaması için birden fazla uygulama oluştururken bir sorun mu var? Her html sayfasının kendi uygulaması olan bu projeye sahibim, performansın yine de etkilenip etkilenmeyeceğini bilmek istiyorum?
— T. Rex
Sayfa başına birden fazla AngularJS uygulaması önyükleme yapmak mümkün olsa da, bu senaryoya karşı aktif olarak test yapmıyoruz. Özellikle karmaşık uygulamalarda sorun yaşayabilirsiniz, bu yüzden dikkatli olunması önerilir. Bkz. AngularJS Geliştirici Kılavuzu - Bootstrap .
— georgeawg

Yanıtlar:

190

Temel olarak Cherniv tarafından belirtildiği gibi, aynı sayfada birden çok ng-uygulamasına sahip olmak için modülleri önyüklememiz gerekiyor. Tüm girişler için çok teşekkürler.

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>
Snippet'i genişlet

— Nitin Mukesh
kaynak
2
Bunun yerine bunu yapmak için bir yönerge oluşturabilirsiniz stackoverflow.com/a/22898036/984780
— Luis Perez
33
Açısal belgeler, bir uygulamayı elle önyüklerken ngApp yönergesini KULLANMAYACAKTIR. Bu nedenle ng-app = "namesList" (yeniden yönlendirilebilir / gerekir). docs.angularjs.org/guide/bootstrap
— Mike_K
4
İki ayrı js dosyasında ng uygulamaları olanlar için aşağıdaki kod angular.element (document) .ready (function () {angular.bootstrap (document.getElementById ("App2"), ['namesList']) ;});
— Siva Kannan
3
Not: Uygulamamda, bu satırı "angular.bootstrap (document.getElementById (" App2 "), ['namesList']);" in $ (document) .ready fonksiyonu
— La masse
Benim için çalışmıyor.Sadece ilk ng-uygulaması düzgün çalışıyor
— SIVAKUMAR.J
120

Bir HTML belgesinde birden fazla uygulama çalıştırmak için bunları angular.bootstrap () kullanarak elle önyükleme yapmanız gerekir.

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

Bunun nedeni, HTML belgesi başına yalnızca bir AngularJS uygulamasının otomatik olarak önyüklenebilmesidir. İlkng-appBelgede bulunan öğe, otomatik olarak önyükleme yapılacak kök öğeyi bir uygulama olarak tanımlamak için kullanılacaktır.

Başka bir deyişle, sayfa başına birden fazla uygulamaya sahip olmak teknik olarak mümkün olsa da, Açısal çerçeve tarafından yalnızca bir ng-uygulama yönergesi otomatik olarak başlatılır ve başlatılır.

— AlwaysALearner
kaynak
20
HTML Belgesi başına yalnızca bir ngAppyönerge otomatik olarak önyüklenebilir, ancak sonraki yönergeleri elle önyüklediğiniz sürece birden fazla uygulamanız olabilir.
— JaredMcAteer
@CodeHater namesListmodül nerede ? Cevabınızı daha net olacak şekilde güncelleyebilir misiniz?
— Eugene
Bu yanlış. Birden fazla ng uygulamanız olabilir. Bkz. Stackoverflow.com/a/24867989/753632
— AndroidDev
3
@ AndroidDev, takip etmiyorum. Başvurduğunuz bağlantıda birden fazla ng-uygulama özelliği gösterilmiyor.
— Jpnh
42

angular.bootstrap()Doğrudan kullanabilirsiniz ... sorun direktiflerin faydalarını kaybetmektir.

Öncelikle, önyükleme yapmak için HTML öğesine bir referans almanız gerekir; bu, kodunuzun artık HTML'nize bağlandığı anlamına gelir.

İkincisi, ikisi arasındaki ilişki o kadar belirgin değil. İle ngAppaçıkça neyi modülü ile ilişkili oluğunu HTML görebilir ve nerede bilgi aramak için biliyorum. Ancak angular.bootstrap()kodunuzun herhangi bir yerinden çağrılabilir.

Eğer bunu en iyi şekilde yapacaksanız bir yönerge kullanmak olacaktır. Ben de öyle yaptım. Denir ngModule. Kodunuzu kullanmak gibi 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>

Bunun için kaynak kodunu şu adresten alabilirsiniz:

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

Aynı şekilde uygulanır ngApp. Sadece angular.bootstrap()perde arkasını çağırıyor .

— Luis Perez
kaynak
7

İşte bir html sayfasında iki uygulama ve bir uygulamada iki kontrolör örneği:

    <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
kaynak
6

Bir rootModule içinde birden fazla modülü birleştirebilir ve bu modülü ng-app olarak üstün bir öğeye ex: body etiketi atayabilirsiniz.

kod eski:

    <!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
kaynak
4
RootApp içinde iki farklı uygulamayı iç içe geçiriyorsunuz, Angular uygulamaların iç içe yerleştirilmesine izin vermiyor
— 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>
Snippet'i genişlet

— Praneeth
kaynak
Tek bir sayfada birden fazla ng uygulaması olması için sadece bir uzantı Sadece saeb-amini ve @Nithin Mukesh kodunu birleştirmek zorunda kaldım
— İkinize
Bu kavram benim için çalışıyor. angular.element (document) .ready (function () {angular.bootstrap (document.getElementById ("App2"), ['namesList']); angular.bootstrap (document.getElementById ("App3"), ['namesList2' ]);});
— SIVAKUMAR.J
2

Yalnızca bir uygulama otomatik olarak başlatılır. Diğerleri manuel olarak şu şekilde başlatılmalıdır:

Sözdizimi:

angular.bootstrap(element, [modules]);

Misal:

<!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>
Snippet'i genişlet

AngularJS API'sı

— Premraj
kaynak
1

Bir Kök-Uygulama tanımlayabilir ve bu ng-Uygulamada birden çok nd-Denetleyici tanımlayabilirsiniz. Bunun gibi

    <!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
kaynak
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>
Snippet'i genişlet

— Ruben Rivero
kaynak
0

Ben senin jsfiddle modifiye, modülleri geri kalanı için rootModule olarak en üst modül yapabilirsiniz. Aşağıda Değişiklikler jsfiddle üzerinde güncellenmiştir.

  1. İkinci Modül RootModule'e enjekte edilebilir.
  2. Html'de Root ng uygulamasının içine yerleştirilen ikinci tanımlı ng-uygulaması.

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

— Mano
kaynak
Bunun neden sadece ilkini değerlendirdiğine dair bir fikrin var ng-appmı? jsfiddle.net/vwcbtzdg
— Si8
İlk sadece otomatik olarak başlatıldı, diğerleri manuel olarak başlatmak zorunda
— Mano
0

angular.bootstrap(element, [modules], [config])AngularJS uygulamasını manuel olarak başlatmak için kullanın (daha fazla bilgi için Bootstrap kılavuzuna bakın ).

Aşağıdaki örneğe bakın:

// 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>
Snippet'i genişlet

— Yas
kaynak
-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
kaynak
1
Ne gönderdiğini cevabına açıklama ekle
— Abhinav Singh Maurya
1
Neler olduğunu açıklayan yorumlara ihtiyaç var! İyi deneme!
— Eric Brown - Cal
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.