How to run two separate Angular js apps in the same page

Question

New to Angular. I feel like I\'m missing something obvious: Shouldn\'t I easily be able to run to separate AngularJs apps (modules) in the same html page? Something like thi

Answer 1

It is possible, but it requires a little bit coding by hand. You need to bootstrap the angular apps on your own. Don't worry, it is not that complicated

• Do not add ng-app attributes in your HTML
• Make sure you can fetch the DOM elements holding the app
• When DOM is loaded you need to start the apps on your own: angular.bootstrap( domElement, ['AppName']);

Fork of you plunker which works: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

Answer 2

You can specify any nested apps in the module def of the main one.

angular.module("myapp", ['statusapp', 'tickerapp']).controller(....

and in a separate file, you have the other apps defined. We're using a template engine which hides some of this, but you'll end up with HTML that contains nested ng-apps and javascript for each one that defines the module/controller. The code above is the trick to getting more than one bootstrapped.

Answer 3

According to the Angular docs for ngApp:

Use this directive to auto-bootstrap an application. Only one directive can be used per HTML document. The directive designates the root of the application and is typically placed at the root of the page.

Seems it's by design.