CODEWITHSUNDEEP
angularjs
Lucy Brown
Lucy Brown

Reputation: 384

Using two AngularJS apps in one page

I have two AngularJS apps in one page, I was wondering why the Angular was breaking then realised it was probably because both apps are name the same thing (I'm very new to AngularJS).

What I need to know if what I need to change to differentiate between them if this makes sense.

This is my code with the two apps in separate divs NorthWest and NorthEast.

If anyone could help me with this I would be very grateful,

Thanks, in advance!

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

Upvotes: 2

Views: 152

Answers (2)

Dinesh ML
Dinesh ML

Reputation: 931

For this case, you can simply have one controller, because both div blocks needs same data to bind. Try it 

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

Upvotes: 1

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

You can have two Angular applications in page, but only one of them can be auto-bootstrapped with ng-app.

You can instantiate your apps (yes, give them different, meaningful names) by bootstrapping them manually.

In your case, I think it makes more sense to have just one application with two controllers, one for NorthWest and one for NorthEast.

Upvotes: 2

Related Questions