How to use two ng-app in same page

[kirthig...@railsfactory.org]

Hi,

Can anyone suggest me how to create two app in angularjs and how to include it in the same page by using ng-app

Please do the needful.

Thanks,
Kirthiga

[Shishir Ramam]

HI Kirthiga,

The angular way is to use directives or multiple controllers to achieve an almost infinite flexibility in app design.

Without details, two apps on a page sounds like a bad idea.

Can you describe a little more of what you are try to accomplish?

-shishir

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

--
Imagine there were no hypothetical situations. ಠ_ಠ

[kirthig...@railsfactory.org]

Hi Shishir Ramam,

I'll explain:

The web page contains header, left sidebar,right sidebar and central page. Datas which is loaded common for side bar's, and central page.
Separate datas will loaded for header part.

In the js file I have created Contributions app having contributions controller, contribution controller, comments controller and comment controller contains center page,side bar's related functionalities like adding comment, add contribution, listing out all contributions etc.,

I need to create separate app for header in the name of "dashboard" app and i have to create dashboard controller in that and need to add my dashboard related functionalities in that controller. Then need to integrate both contributons and dashboard app in the template by using "ng-app".

[dlo...@googlemail.com]

I'm not sure if I'm right, but you can intergrate both apps into one:

angular.module('biggerapp', ['contributions', 'dashboard'])

Then you need only one ng-app. Since both apps runs in the same DOM, your main partials and any routes should be configured for the "biggerapp" to prevent any conflicts. But maybe I'm wrong cause I'm new too. :)

[Daniel Doyon]

This has been explained before, you would not be using ng-app inside your html, instead you would be manually bootstrapping http://docs.angularjs.org/guide/bootstrap

The doc doesn't really show this, but I know that it is supposed to be possible.  Searching the googlegroup is your best bet. I don't have time to locate it...

--dan

[kirthig...@railsfactory.org]

Hi All,

Thanks a lot for your valuable reply. I integrated two app in the page by using boostrap.

On Friday, December 21, 2012 6:44:14 PM UTC+5:30, kirthig...@railsfactory.org wrote:

[Joshua Miller]

Hello!

Just for my own edification as I am not an angular expert - why multiple apps? You can have several view partials with separate controllers and separate data all inside one app, which shares routing. I can see putting your header, sidebar, and content in separate _modules_ but I am not sure why you need separate _apps_. A multiple modules setup is trivial; in contrast, a multiple app setup takes a bit of effort to get working, so there must be a payoff in your case. What am I missing?

Josh

--

[sunith.s...@gmail.com]

Hi

I am stuck with two different controller with two diffrent app/module,only the first one worked well can anybody give me a example how to overcome this problem...

On Friday, December 21, 2012 6:44:14 PM UTC+5:30, kirthig...@railsfactory.org wrote:

[Andy Joslin]

Hi sunith, it's simple:

HTML:

<div id="app1" ng-controller="app1control">

<div id="app2" ng-controller="app2control">

JS:
angular.module("firstApp", []).controller("app1control", function() {...});

angular.module("secondApp", []).controller("app2control", function() {...});

angular.bootstrap(document.getElementById("app1"), ["firstApp"]);

angular.bootstrap(document.getElementById("app2"), ["secondApp"]);

[Arnaud Breton]

Hi,

I'm working on a similar problem. I would like to run 2 AngularJS app with the second one running inside the first one.

See my question on stackoverflow: http://stackoverflow.com/questions/17096190/angularjs-building-a-chrome-extension-which-will-run-in-an-existing-app/17097659?noredirect=1#17097659

Thanks for your help!

[Roman Bykovskiy]

If it is the same app twice in a page (i.e. widget) - it fails to assign some scope variables from controller in all instances but the last 

четверг, 27 декабря 2012 г., 3:14:26 UTC+8 пользователь Andy Joslin написал:

[Arnaud Breton]

In my case it is 2 different apps.

[Duarte Cunha Leão]

One use case may be that of dynamically adding modules after the bootstrap of the single application. As you currently can't add new modules, then you must create new apps.

[Pat Ferrel]

I have infinite scrolling working with angular-ui ng-scroll but am doing something wrong in how I manage the location bar.

I want to be able to scroll around but not use these scrolling events to create history for back. I would like to save the current location when the user clicks off the page so that back brings them to the right place on the infinite scroll.

I thought I should do a $location.replace every time there is a new top visible item so that, when an off-link is clicked, the location bar’s current state will be stored for back. This works correctly. However every intermediate value of the location bar is also changed as you hit back as you scroll around. These backs do not trigger a change of location or page reload since I’m not using the $window.location.href. BTW I have $location service in HTML5 mode, if that matters here.

I do not want to have these intermediate changes to the $location affect the back button unless an off-link is hit (or refresh is hit). Other than this my implementation is working correctly.

Not sure what I’m doing wrong.

[Trash Match]

I was wondering about the same thing, but going through the tutorials, etc I realized that I can have
one main module that acts as the central place to point to controllers.

'use strict';
/* App Module */

var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers',
'phonecatFilters',
'phonecatServices'
]);

phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);

In the brackets there is 'ngRoute' and 'phonecatControllers' etc. Then have a .js file for Controllers. This is from the tutorial.
http://docs.angularjs.org/tutorial/step_07

The brackets are for an array. So the ng-app is being used to reference as many other modules as you want.

[Pat Ferrel]

I have infinite bi-directional scrolling working with angular-ui ng-scroll but am doing something wrong in how I manage the location bar.

I want to be able to scroll around but not use these scrolling events to create history for back. I would like to have the current location loaded in the url bar--ready when the user clicks an off-page link so that back brings them to the right place on the infinite scroll. The url in the location bar should always reflect the correct thing for bookmarking and refresh should bring them to the current location. This is all working with one unexpected side effect.

My understanding was that to get the above behavior I should do a $location.replace every time there is a new top visible item so that, when an off-link is clicked, the location bar’s current state will be pushed into history for back but that it would not affect any history until then. The off-link back works correctly however every intermediate value put into the location bar using $location.replace is saved in the location bar history. If you scroll down, causing the location bar to change, then hit back, the location bar changes back to the previous url but no page reload happens (since I’m not using the $window.location.href). I did not expect a $location.replace to affect ANY history, especially the intermediate values put in the url bar. What am I doing wrong?

[steve98177]

I had two test files, each containing a single module.

main.1.js has some controllers.

main.2.js has some directives.

I wanted to be able to use both modules in the same index.html

This finally worked for me after I put a bootstrap statement

for each module in the file defining it.

index.html

<html>

<head>

<script type="text/javascript" src="js/vendor/angular.js"></script>

</head>

<body>

<!-- 1. Filters -->

<div id="app1" ng-controller="filterCtrl">

...

</div>

<!-- 2. Directives -->

<div id="app2">

<anewdirective></anewdirective>

...

</div>

<script type="text/javascript" src="js/main.9.js"></script>

<script type="text/javascript" src="js/main.10.js"></script>

</body>

</html>

main.1.js

var app = angular.module('filterApp', []);

...

angular.bootstrap(document.getElementById("app1"), ["filterApp"]);

main.2.js

var app = angular.module('directiveApp', []);

...

angular.bootstrap(document.getElementById("app2"), ["directiveApp"]);

On Wednesday, December 26, 2012 11:14:26 AM UTC-8, Andy Joslin wrote:

[Alon Nisser]

As written before in the threads, you don't need two apps in the same page. both modules can be part of the same app - Actually that's the best way to do this - a module (or module) for directives, module (or modules) for controllers, filters, etc

you need to include all the js file in index.html and and declare one app. you also need to declare all the modules part of the app

something like app.js (or any other name)

with:

    var app = angular.module('myApp',['directiveModule', 'filterModule', 'ngRoute',etc..]) notice that in the array we declare strings with all the modules to be included by the app including our vendor modules (Restangular for example), extra angular modules  that are outside angular core(ngResource, ngSanitize, ngCookies, ngRoute etc) and our modules (we actually can attach everything to one module, but seperation makes some logical sense, and there are rumors that in      the future angular would support lazy loading of modules) such as the filterModule or directiveModule

Then you also won't need all the "bootstraping" boilerplate, which is really to be used behind the scenes by angular, and should be used by wepapps only in very specific and special cases.

Good luck!

[Archana]

Hi. I'm working on angular js just from two weeks. I have a main page index.html in dat i hav included ng-app="dashboardApp".now i should include dashboardApp in controller(example.js) file, i should run evrything from index.html file.M not getting how to do it.Can anyone pls help me out.

Thanks

Archana

[Archana]

This is my example.js file. now m trying to write code for datepicker but m not getting.please do the needful.Thanks

 

'use strict';

angular.module('dashboardApp'.controller('exampleCtrl', function ($scope) {

    

   

});

     

[alonn]

Did you actually create the ```dashboardApp``` module or are you just referencing it without creating it? what exactly isn't working.  please provide a plunker/fiddle so we can look at actual code and trace problems

Twitter:@alonisser

LinkedIn Profile

Facebook

Tech blog:4p-tech.co.il/blog

Personal Blog:degeladom.wordpress.com

Tel:972-54-6734469

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/j7X4-qRKaM0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Archana]

Thank you for your reply!!! ya i'm just refering i have not created. here is my plunker link (here ). example.js,example.html and index .html. these three are my files. I'm tryin to write code for datepicker and i know just 20% about angular js. 

[Luis Perez]

I a directive the ngModule to get around ngApp's limitations. You can find it at: http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

It basically functions like ngApp and calls angular.bootstrap() behind the scenes.

You can make an argument whether this is the right thing to do, or whether ngApp's limitations are just good design. 

I think one argument against ngApp's limitations is the case where a module only contains directives for front end purposes, in which case why should you have to included it as reference from within your JavaScript.