CODEWITHSUNDEEP
javascriptangularjs
serge
serge

Reputation: 15219

Nest/Share Angular applications

I have 2 list of items say, news and people.

These 2 lists have different logic and are located in different pages, so don't share shame ng-app: 

<!-- News.html -->
<div id="newsList" ng-app="newsListApp">
   <div id="{{news.id}}" ng-app="modalApp" ng-repeat="news in newsList">
      ...
   </div>
</div>

<!-- People.html -->    
<div id="peopleList" ng-app="peopleListApp">
   <div id="{{person.id}}" ng-app="modalApp" ng-repeat="person in people">
      ...
   </div>
</div>

I need to open each item in a modal popup, so I have to use a modalApp, but I want to use the same modalApp(that will use the same popup template) in the news and people lists...

What is the concept of sharing angular application/modules in cases like this?

Upvotes: 0

Views: 43

Answers (2)

Tom Makin
Tom Makin

Reputation: 3303

I think you are mixing up ng-app and ng-controller. Probably you are looking for something like this. In general angular only expects one app per page, and they certainly shouldn't be nested

<body ng-app="myApp">
  <div id="newsList" ng-controller="newsListCtrl">
    <div id="{{news.id}}" ng-controller="modalCtrl" ng-repeat="news in newsList">
      ...
    </div>
  </div>

  <div id="peopleList" ng-controller="peopleListCtrl">
    <div id="{{person.id}}" ng-controller="modalCtrl" ng-repeat="person in people">
       ...
    </div>
  </div>
</body>

https://docs.angularjs.org/api/ng/directive/ngController

Edit:
If news and people are different pages then you need a router of some kind. Your main options are ngRoute or ui-router. I think ui-router is more flexible to I would go with that. Couple of useful links that might help out:
https://scotch.io/tutorials/angular-routing-using-ui-router http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview

Upvotes: 2

R. Salisbury
R. Salisbury

Reputation: 2006

You can't do it using ng-app. You have to manually bootstrap at least one of them. See this question for more info.

Upvotes: 2

Related Questions