Использование двух приложений AngularJS на одной странице

Question

У меня есть две приложения AngularJS на одной странице, мне было интересно, почему Angular разбился, а затем понял, что это, вероятно, потому, что оба приложения называют одно и то же (я очень новичок в AngularJS).

Что мне нужно знать, что мне нужно изменить, чтобы различать их, если это имеет смысл.

Это мой код с двумя приложениями в отдельных divs NorthWest и NorthEast.

Если кто-то может помочь мне с этим я был бы очень благодарен,

Спасибо, заранее!

<div id="NorthWest" class="desc"> 

         <script> 

          var app = angular.module('myApp', []); 
          app.controller('regionsLinks', function($scope, $http) { 

          var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest'; 

          $http.get(url).then(function (data) { 

          $scope.data = data.data; 

          });}); 

          app.controller('regionsLinks1', function($scope, $http) { 

          var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast'; 

          $http.get(url).then(function (data) { 

          $scope.data = data.data; 

          });}); 



         </script> 


      <div ng-app="myApp"> 

       <div ng-controller="regionsLinks"> 

          <div ng-repeat="d in data"> 

          <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2> 

          <img src="{{d.acf.logo}}"> 

           <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div> 

           <div id="listing-address-1"> 

            {{d.acf.address_1}}, 


            {{d.acf.address_2}} 


            {{d.acf.address_3}} 


            {{d.acf.town}} 

            {{d.acf.county}} 

            {{d.acf.postcode}} 

           </div> 

           <div id="listing-phone">Telephone: {{d.acf.telephone}}</div> 

           <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div> 

           <div id="listing-email">Email: {{d.acf.email}}</div> 

           <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div> 

           <div id="listing-established">Established: {{d.acf.established}}</div> 

           <div id="listing-about">About: {{d.acf.about}}</div> 

           <div id="listing-mailingaddress"> 

            Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, 
            {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}} 

           </div> 

           <div id="listing-directions">Directions: {{d.acf.directions}}</div> 

           <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div> 

         </div> 



        </div> 



       <div id="NorthEast" class="desc"> 

         <div ng-controller="regionsLinks1"> 

          <div ng-repeat="d in data"> 

          <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2> 

           <div id="listing-address-1"> 

            {{d.acf.address_1}}, 


            {{d.acf.address_2}} 


            {{d.acf.address_3}} 


            {{d.acf.town}} 

            {{d.acf.county}} 

            {{d.acf.postcode}} 

           </div> 

         </div> 



        </div> 

       </div> 

      </div> 

Answer 1

Вы можете иметь две угловые приложения на странице, но только один из них может быть auto-bootstrapped with ng-app.

Вы можете создавать свои приложения (да, давать им разные, значимые имена) на bootstrapping them manually.

В вашем случае я считаю, что имеет смысл иметь только одно приложение с двумя контроллерами, одно для NorthWest и одно для NorthEast.

Answer 2

Для этого случая вы можете просто иметь один контроллер, потому что оба блока div нуждаются в одинаковых данных для привязки. Попробуйте

<script> 
    var app = angular.module('myApp', []); 
    app.controller('regionsLinks', function($scope, $http) { 
     var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest'; 
     $http.get(url).then(function(data) { 
     $scope.data = data.data; 
     }); 
    }); 
    </script> 

    <div ng-app="myApp" ng-controller="regionsLinks"> 
    <div id="NorthWest" class="desc"> 
     <div ng-repeat="d in data"> 
     <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2> 
     <img src="{{d.acf.logo}}"> 
     <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div> 
     <div id="listing-address-1"> 
      {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}} 
     </div> 
     <div id="listing-phone">Telephone: {{d.acf.telephone}}</div> 
     <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div> 
     <div id="listing-email">Email: {{d.acf.email}}</div> 
     <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div> 
     <div id="listing-established">Established: {{d.acf.established}}</div> 
     <div id="listing-about">About: {{d.acf.about}}</div> 
     <div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div> 
     <div id="listing-directions">Directions: {{d.acf.directions}}</div> 
     <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div> 
     </div> 
    </div> 

    <div id="NorthEast" class="desc"> 
     <div ng-repeat="d in data"> 
     <h2 class="entry-title title-post"><a href="{{d.meta.links.self}}">{{d.title}}</a></h2> 
     <div id="listing-address-1"> 
      {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}} 
     </div> 
     </div> 
    </div> 
</div>