AngularJS Multiple ng-app within a page

Question

I have just started learning Angular JS and created some basic samples however I am stuck with the following problem   I have created 2 modules and 2 controllers   shoppingCart - gt  ShoppingCartController namesList - gt  NamesController   There are associated views for each controller  The first View renders fine but second is not rendering  There are no errors   http   jsfiddle net ep2sQ   Please help me solve this issue   Also is there any possibility to add console in View to check what values are passed from Controller   e g  in the following div can we add console log and output the controller values   lt div ng-app  shoppingCart  ng-controller  ShoppingCartController  gt   lt  div gt

User · Answer

To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap()

HTML

<!-- Automatic Initialization -->
<div ng-app="myFirstModule">
    ...
</div>
<!-- Need To Manually Bootstrap All Other Modules -->
<div id="module2">
    ...
</div>

JS

angular.
  bootstrap(document.getElementById("module2"), ['mySecondModule']);

The reason for this is that only one AngularJS application can be automatically bootstrapped per HTML document. The first ng-app found in the document will be used to define the root element to auto-bootstrap as an application.

In other words, while it is technically possible to have several applications per page, only one ng-app directive will be automatically instantiated and initialized by the Angular framework.

User · Answer

I have modified your jsfiddle  can make top most module as rootModule for rest of the modules    Below Modifications updated on your jsfiddle     Second Module can injected in RootModule  In Html second defined ng-app placed inside the Root ng-app    Updated JsFiddle  http   jsfiddle net ep2sQ 1011

User · Answer

So basically as  mentioned by Cherniv we need to bootstrap the modules to have multiple ng-app within the same page  Many thanks for all the inputs    x000D   x000D  var shoppingCartModule   angular module  shoppingCart       x000D  shoppingCartModule controller  ShoppingCartController   x000D    function  scope    x000D       scope items      x000D        product name   Product 1   x000D        price  50 x000D           x000D        product name   Product 2   x000D        price  20 x000D           x000D        product name   Product 3   x000D        price  180 x000D          x000D       scope remove   function index    x000D         scope items splice index  1   x000D        x000D      x000D     x000D  var namesModule   angular module  namesList       x000D  namesModule controller  NamesController   x000D    function  scope    x000D       scope names      x000D        username   Nitin  x000D           x000D        username   Mukesh  x000D          x000D      x000D     x000D  angular bootstrap document getElementById  App2      namesList     x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 5 3 angular min js  gt  lt  script gt  x000D   x000D   lt div id  App1  ng-app  shoppingCart  ng-controller  ShoppingCartController  gt  x000D     lt h1 gt Your order lt  h1 gt  x000D     lt div ng-repeat  item in items  gt  x000D       lt span gt   item product name   lt  span gt  x000D       lt span gt   item price   currency   lt  span gt  x000D       lt button ng-click  remove  index    gt Remove lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div id  App2  ng-app  namesList  ng-controller  NamesController  gt  x000D     lt h1 gt List of Names lt  h1 gt  x000D     lt div ng-repeat   name in names  gt  x000D       lt p gt    name username   lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D     root-app x000D  const rootApp   angular module  root-app     app1    app2E     x000D   x000D     app1 x000D  const app11aa   angular module  app1        x000D  app11aa controller  main   function  scope    x000D     scope msg    App 1   x000D      x000D   x000D     app2 x000D  const app2   angular module  app2E        x000D  app2 controller  mainB   function  scope    x000D     scope msg    App 2   x000D      x000D   x000D     bootstrap x000D  angular bootstrap document querySelector   app1a      app1     x000D  angular bootstrap document querySelector   app2b      app2E     x000D   lt  -- angularjs 1 7 0 -- gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 7 0 angular min js  gt  lt  script gt  x000D   x000D   lt  -- root-app -- gt  x000D   lt div ng-app  root-app  gt  x000D   x000D     lt  -- app1 -- gt  x000D     lt div id  app1a  gt  x000D       lt div ng-controller  main  gt  x000D          msg   x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt  -- app2 -- gt  x000D     lt div id  app2b  gt  x000D       lt div ng-controller  mainB  gt  x000D          msg   x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D           var shoppingCartModule   angular module  shoppingCart       x000D            shoppingCartModule controller  ShoppingCartController   x000D             function  scope    x000D                scope items      x000D                 product name   Product 1   x000D                 price  50 x000D                    x000D                 product name   Product 2   x000D                 price  20 x000D                    x000D                 product name   Product 3   x000D                 price  180 x000D                   x000D                scope remove   function index    x000D                  scope items splice index  1   x000D                 x000D               x000D              x000D           var namesModule   angular module  namesList       x000D            namesModule controller  NamesController   x000D             function  scope    x000D                scope names      x000D                 username   Nitin  x000D                    x000D                 username   Mukesh  x000D                   x000D               x000D              x000D   x000D   x000D           var namesModule   angular module  namesList2       x000D            namesModule controller  NamesController   x000D             function  scope    x000D                scope names      x000D                 username   Nitin  x000D                    x000D                 username   Mukesh  x000D                   x000D               x000D              x000D   x000D   x000D           angular element document  ready function     x000D             angular bootstrap document getElementById  App2      namesList     x000D             angular bootstrap document getElementById  App3      namesList2     x000D               x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script src  http   ajax googleapis com ajax libs angularjs 1 4 8 angular min js  gt  lt  script gt  x000D   x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt div id  App1  ng-app  shoppingCart  ng-controller  ShoppingCartController  gt  x000D       lt h1 gt Your order lt  h1 gt  x000D       lt div ng-repeat  item in items  gt  x000D         lt span gt   item product name   lt  span gt  x000D         lt span gt   item price   currency   lt  span gt  x000D         lt button ng-click  remove  index    gt Remove lt  button gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div id  App2  ng-app  namesList  ng-controller  NamesController  gt  x000D       lt h1 gt List of Names lt  h1 gt  x000D       lt div ng-repeat   name in names  gt  x000D         lt p gt    name username   lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div id  App3  ng-app  namesList2  ng-controller  NamesController  gt  x000D       lt h1 gt List of Names lt  h1 gt  x000D       lt div ng-repeat   name in names  gt  x000D         lt p gt    name username   lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Only one app is automatically initialized  Others have to manually initialized as follows     Syntax   angular bootstrap element   modules      Example    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script src  https   code angularjs org 1 5 8 angular js  data-semver  1 5 8  data-require  angular js 1 5 8  gt  lt  script gt  x000D     lt script data-require  ui-router 0 2 18  data-semver  0 2 18  src    cdn rawgit com angular-ui ui-router 0 2 18 release angular-ui-router js  gt  lt  script gt  x000D     lt link rel  stylesheet  href  style css    gt  x000D     lt script gt  x000D      var parentApp   angular module  parentApp       x000D     controller  MainParentCtrl   function  scope    x000D       scope name    universe   x000D        x000D   x000D   x000D   x000D  var childApp   angular module  childApp     parentApp    x000D     controller  MainChildCtrl   function  scope    x000D       scope name    world   x000D        x000D   x000D   x000D  angular element document  ready function     x000D    angular bootstrap document getElementById  childApp      childApp     x000D      x000D       x000D     lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div id  childApp  gt  x000D       lt div ng-controller  MainParentCtrl  gt  x000D        Hello   name     x000D         lt div gt  x000D           lt div ng-controller  MainChildCtrl  gt  x000D            Hello   name     x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    AngularJS API

User · Answer

Here s an example of two applications in one html page and two conrollers in one application                           lt div ng-app    myapp  gt         lt div  ng-controller    C1  id  D1  gt            lt h2 gt controller 1 in app 1  lt span id  titre  gt   s1 title   lt  span gt    lt  h2 gt         lt  div gt          lt div  ng-controller    C2  id  D2  gt            lt h2 gt controller 2 in app 1  lt span id  titre  gt   s2 valeur   lt  span gt    lt  h2 gt         lt  div gt       lt  div gt       lt script gt          var A1   angular module  myapp                A1 controller  C1   function  scope                 scope s1                    scope s1 title    Titre 1                         A1 controller  C2   function  scope                 scope s2                    scope s2 valeur    Valeur 2                     lt  script gt        lt div ng-app  toapp  ng-controller  C1  id  App2  gt           lt br gt controller 1 in app 2          lt br gt First Name   lt input type    text  ng-model    student firstName  gt           lt br gt Last Name    lt input type  text  ng-model  student lastName  gt           lt br gt Hello     student fullName              lt br gt       lt  div gt        lt script gt          var A2   angular module  toapp                A2 controller  C1   function  scope                 scope student                   firstName  M                   lastName  E                   fullName function                        var so  scope student                      return so firstName     so lastName                                                       angular bootstrap document getElementById  App2      toapp          lt  script gt   lt style gt       titre color red        D1  background-color gray  width 50   height 20         D2  background-color yellow  width 50   height 20        input  font-weight  bold     lt  style gt

User · Answer

Use angular bootstrap element   modules    config   to manually start up AngularJS application  for more information  see the Bootstrap guide    See the following example    x000D   x000D     root-app x000D  const rootApp   angular module  root-app     app1    app2     x000D   x000D     app1 x000D  const app1   angular module  app1        x000D  app1 controller  main   function  scope    x000D     scope msg    App 1   x000D      x000D   x000D     app2 x000D  const app2   angular module  app2        x000D  app2 controller  main   function  scope    x000D     scope msg    App 2   x000D      x000D   x000D     bootstrap x000D  angular bootstrap document querySelector   app1      app1     x000D  angular bootstrap document querySelector   app2      app2     x000D   lt  -- angularjs 1 7 0 -- gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 7 0 angular min js  gt  lt  script gt  x000D   x000D   lt  -- root-app -- gt  x000D   lt div ng-app  root-app  gt  x000D   x000D     lt  -- app1 -- gt  x000D     lt div id  app1  gt  x000D       lt div ng-controller  main  gt  x000D          msg   x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt  -- app2 -- gt  x000D     lt div id  app2  gt  x000D       lt div ng-controller  main  gt  x000D          msg   x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can merge multiple modules in one rootModule   and assign that module as  ng-app to a superior element ex  body tag   code ex        lt  DOCTYPE html gt   lt html gt   lt script src  http   ajax googleapis com ajax libs angularjs 1 3 14 angular min js  gt  lt  script gt   lt script src  namesController js  gt  lt  script gt   lt script src  myController js  gt  lt  script gt   lt script gt var rootApp   angular module  rootApp     myApp1   myApp2    lt  script gt   lt body ng-app  rootApp  gt    lt div ng-app  myApp1  ng-controller  myCtrl   gt  First Name   lt input type  text  ng-model  firstName  gt  lt br gt  Last Name   lt input type  text  ng-model  lastName  gt  lt br gt   lt br gt  Full Name    firstName         lastName    lt  div gt    lt div ng-app  myApp2  ng-controller  namesCtrl  gt   lt ul gt     lt li ng-bind  first  gt   first      lt  li gt   lt  ul gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

In my case I had to wrap the bootstrapping of my second app in angular element document  ready for it to work   angular element document  ready function       angular bootstrap document getElementById  app2      app2

User · Answer

You can define a Root ng-App and in this ng-App you can define multiple nd-Controler  Like this       lt  DOCTYPE html gt       lt html gt       lt script src    https   ajax googleapis com ajax libs angularjs 1 3 3 angular min js  gt  lt  script gt    lt style gt           table  th   td               border  1px solid grey              border-collapse  collapse              padding  5px                       table tr nth-child odd                background-color   f2f2f2                       table tr nth-child even                background-color   ffffff                    lt  style gt         lt script gt        var mainApp   angular module  mainApp               mainApp controller  studentController1   function   scope           scope student           firstName   MUKESH         lastName   Paswan          fullName  function               var studentObject           studentObject    scope student           return studentObject firstName         studentObject lastName                                                                            mainApp controller  studentController2   function   scope                      scope student                          firstName   Mahesh                        lastName   Parashar                        fees  500                        subjects                              name   Physics   marks  70                              name   Chemistry   marks  80                              name   Math   marks  65                              name   English   marks  75                              name   Hindi   marks  67                                                 fullName  function                               var studentObject                           studentObject    scope student                           return studentObject firstName         studentObject lastName                                                                         lt  script gt        lt body gt       lt div ng-app    mainApp  gt       lt div id  dv1   ng-controller    studentController1  gt      Enter first name   lt input type    text  ng-model    student firstName  gt  lt br  gt  lt br  gt  Enter last name   lt input type    text  ng-model    student lastName  gt  lt br  gt       lt br  gt       You are entering    student fullName          lt  div gt        lt div id  dv2  ng-controller    studentController2  gt        lt table border    0  gt                   lt tr gt                      lt td gt Enter first name  lt  td gt                      lt td gt  lt input type    text  ng-model    student firstName  gt  lt  td gt                   lt  tr gt                    lt tr gt                      lt td gt Enter last name   lt  td gt                      lt td gt                         lt input type    text  ng-model    student lastName  gt                      lt  td gt                   lt  tr gt                    lt tr gt                      lt td gt Name   lt  td gt                      lt td gt   student fullName     lt  td gt                   lt  tr gt                    lt tr gt                      lt td gt Subject  lt  td gt                       lt td gt                         lt table gt                            lt tr gt                               lt th gt Name lt  th gt                                lt th gt Marks lt  th gt                            lt  tr gt                             lt tr ng-repeat    subject in student subjects  gt                               lt td gt    subject name    lt  td gt                               lt td gt    subject marks    lt  td gt                            lt  tr gt                          lt  table gt                      lt  td gt                    lt  tr gt                lt  table gt              lt  div gt       lt  div gt        lt  body gt       lt  html gt

User · Answer

You can use angular bootstrap   directly    the problem is you lose the benefits of directives   First you need to get a reference to the HTML element in order to bootstrap it  which means your code is now coupled to your HTML   Secondly the association between the two is not as apparent  With ngApp you can clearly see what HTML is associated with what module and you know where to look for that information  But angular bootstrap   could be invoked from anywhere in your code   If you are going to do it at all the best way would be by using a directive  Which is what I did  It s called ngModule  Here is what your code would look like using it    lt  DOCTYPE html gt   lt html gt       lt head gt           lt script src  angular js  gt  lt  script gt           lt script src  angular ng-modules js  gt  lt  script gt           lt script gt            var moduleA   angular module  MyModuleA                  moduleA controller  MyControllerA   function  scope                   scope name    Bob A                            var moduleB   angular module  MyModuleB                  moduleB controller  MyControllerB   function  scope                   scope name    Steve B                          lt  script gt       lt  head gt       lt body gt           lt div ng-modules  MyModuleA  MyModuleB  gt               lt h1 gt Module A  B lt  h1 gt               lt div ng-controller  MyControllerA  gt                    name                lt  div gt               lt div ng-controller  MyControllerB  gt                    name                lt  div gt           lt  div gt            lt div ng-module  MyModuleB  gt               lt h1 gt Just Module B lt  h1 gt               lt div ng-controller  MyControllerB  gt                    name                lt  div gt           lt  div gt       lt  body gt   lt  html gt    You can get the source code for it at   http   www simplygoodcode com 2014 04 angularjs-getting-around-ngapp-limitations-with-ngmodule   It s implemented in the same way as ngApp  It simply calls angular bootstrap   behind the scenes

User · Answer

lt html gt   lt head gt       lt script src  angular min js  gt  lt  script gt   lt  head gt   lt body gt   lt div ng-app  shoppingCartParentModule   gt        lt div ng-controller  ShoppingCartController  gt           lt h1 gt Your order lt  h1 gt           lt div ng-repeat  item in items  gt               lt span gt   item product name   lt  span gt               lt span gt   item price   currency   lt  span gt               lt button ng-click  remove  index    gt Remove lt  button gt           lt  div gt       lt  div gt        lt div ng-controller  NamesController  gt           lt h1 gt List of Names lt  h1 gt           lt div ng-repeat  name in names  gt               lt p gt   name username   lt  p gt           lt  div gt       lt  div gt   lt  div gt   lt  body gt   lt script gt  var shoppingCartModule   angular module  shoppingCart                   shoppingCartModule controller  ShoppingCartController                   function  scope                         scope items                              product name   Product 1   price  50                            product name   Product 2   price  20                            product name   Product 3   price  180                                              scope remove   function index                             scope items splice index  1                                                                      var namesModule   angular module  namesList                   namesModule controller  NamesController                   function  scope                         scope names                              username   Nitin                             username   Mukesh                                                              angular module  shoppingCartParentModule    shoppingCart   namesList     lt  script gt   lt  html gt

[angularjs] AngularJS Multiple ng-app within a page

To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap()

HTML

JS

Examples related to angularjs