Multiple controllers with AngularJS in single page app

Question

I want to know is how to use multiple controllers for a single page application  I have tried to figure it out and I ve found questions very similar to mine  but there is just a ton of different answers solving a specific problem where you end up not using multiple controllers for a single page app   Is that because it would not be wise to use multiple controllers for a single page  Or is it just not possible   Let s say I already have a kick-ass image carousel controller working the main page  but then I learn how to  let s say  use modals and I need a new controller for that as well  or any other thing I need a controller   What will I do then   I have seen some answers to other questions where they ask about almost the same things as me and people answer   OMG  Why would you even do that  just do this        What is the best way  or how do you do it   Edit  Many of you are answering to just declare two controllers and then use ng-controller to call it  I use this bit of code below and then call MainCtrl with ng-controller    app config function  routeProvider   locationProvider                               routeProvider                                                                         when                                                             templateUrl   templates main html                                                           controller  MainCtrl                                                                                                                             otherwise                                     template   does not exists                             Why do I even need to set a controller here if I can just use ng-controller without it  This is what confused me   and you can t add two controllers this way  I think

User · Answer

You could also have embed all of your template views into your main html file. For Example:

<body ng-app="testApp">
  <h1>Test App</h1>
  <div ng-view></div>
  <script type = "text/ng-template" id = "index.html">
    <h1>Index Page</h1>
    <p>{{message}}</p>
  </script>
  <script type = "text/ng-template" id = "home.html">
    <h1>Home Page</h1>
    <p>{{message}}</p>
  </script>
</body>

This way if each template requires a different controller then you can still use the angular-router. See this plunk for a working example http://plnkr.co/edit/9X0fT0Q9MlXtHVVQLhgr?p=preview

This way once the application is sent from the server to your client, it is completely self contained assuming that it doesn't need to make any data requests, etc.

User · Answer

We can simply declare more than one Controller in the same module  Here s an example      lt  DOCTYPE html gt       lt html gt        lt head gt          lt script src  https   ajax googleapis com ajax libs angularjs 1 6 4 angular min js  gt          lt  script gt         lt title gt  New Page  lt  title gt         lt  head gt        lt body ng-app  mainApp  gt   lt  -- if we remove ng-app the add book button  show hide  will has no effect -- gt          lt h2 gt  Books  lt  h2 gt        lt  --  lt input type  checkbox  ng-model  hideShow  ng-init  hideShow   false  gt  lt  input gt  -- gt       lt input type    button  value    Add Book ng-click  hideShow  hideShow   false   true   gt   lt  input gt        lt div ng-app    mainApp  ng-controller    bookController  ng-if  hideShow  gt               Enter book name   lt input type    text  ng-model    book name  gt  lt br gt               Enter book category   lt input type    text  ng-model    book category  gt  lt br gt               Enter book price   lt input type    text  ng-model    book price  gt  lt br gt               Enter book author   lt input type    text  ng-model    book author  gt  lt br gt                 You are entering book    book bookDetails           lt  div gt        lt script gt               var mainApp   angular module  mainApp                      mainApp controller  bookController   function  scope                     scope book                        name                         category                         price                        author                           bookDetails  function                           var bookObject                        bookObject    scope book                        return  Book name      bookObject name      n     Book category      bookObject category       n     Book price      bookObject price       n     Book Author      bookObject author                                                                 lt  script gt        lt h2 gt  Albums  lt  h2 gt       lt input type    button  value    Add Album ng-click  hideShow2  hideShow2   false   true   gt   lt  input gt        lt div ng-app    mainApp  ng-controller    albumController  ng-if  hideShow2  gt               Enter Album name   lt input type    text  ng-model    album name  gt  lt br gt               Enter Album category   lt input type    text  ng-model    album category  gt  lt br gt               Enter Album price   lt input type    text  ng-model    album price  gt  lt br gt               Enter Album singer   lt input type    text  ng-model    album singer  gt  lt br gt                 You are entering Album    album albumDetails           lt  div gt        lt script gt                 no need to declare this again                   var mainApp   angular module  mainApp                      mainApp controller  albumController   function  scope                     scope album                        name                         category                         price                        singer                          albumDetails  function                           var albumObject                        albumObject    scope album                        return  Album name      albumObject name      n     album category      albumObject category     n     Book price      albumObject price     n     Album Singer      albumObject singer                                                                lt  script gt        lt  body gt       lt  html gt

User · Answer

I think you are missing the  single page app  meaning   That doesn t mean you will physically have one  html  instead you will have one main index html and several NESTED  html file  So why single page app  Because this way you do not load pages the standard way  i e  browser call that completely refreshes the full page  but you just load the content part using Angular Ajax  Since you do not see the flickering between page changes  you have the impression that you didn t move from the page  Thus  you feel like you are staying on a single page   Now  I m assuming that you want to have MULTIPLE contents for your SINGLE PAGE app   e g   home  contacts  portfolio and store  Your single page multiple content app  the angular way  will be organized this way    index html  contains header   lt ng-view gt  and footer  contacts html contains the contact form  no header  no footer  portfolio html contains the portfolio data  no header no footer  store html  contains the store  no header no footer    You are in index  you click on the menu called  contacts  and what happens  Angular replaces the  lt ng-view gt  tag with the contacts html code  How do you achieve that  with ngRoute  as you are doing  you will have something like   app config function  routeProvider   locationProvider                               routeProvider                                                                         when                                                             templateUrl   templates index html                                                           controller  MainCtrl                                                       when   contacts                                                          templateUrl   templates contacts html                                                           controller  ContactsCtrl                                                                                                                        otherwise                                     template   does not exists                             This will call the right html passing the right controller to it  please note  do not specify ng-controller directive in contacts html if you are using routes   Then  of course  you can declare as many ng-controller directives inside your contacts html page  Those will be child controllers of ContactCtrl  thus inheriting from it   But for a single route  inside the routeProvider  you can declare a single Controller that will act as the  Father controller of the partial view    EDIT Imagine the following templates contacts html   lt div gt       lt h3 gt Contacts lt  h3 gt       lt p gt This is contacts page    lt  p gt   lt  div gt    the above routeProvider will inject a controller into your containing div  Basically the above html automaticaly becomes    lt div ng-controller  ContactsCtrl  gt       lt h3 gt Contacts lt  h3 gt       lt p gt This is contacts page    lt  p gt   lt  div gt    When I say you can have others controllers  means that you can plug controllers to inner DOM elements  as the following    lt div gt       lt h3 gt Contacts lt  h3 gt       lt p ng-controller  anotherCtrl  gt Hello   name    This is contacts page              lt  p gt   lt  div gt    I hope this clarify things a bit   A

User · Answer

I m currently in the process of building a single page application  Here is what I have thus far that I believe would be answering your question  I have a base template  base html  that has a div with the ng-view directive in it  This directive tells angular where to put the new content in  Note that I m new to angularjs myself so I by no means am saying this is the best way to do it   app   angular module  myApp                                                                                      app config function  routeProvider   locationProvider                               routeProvider                                                                         when   home                                                           templateUrl   templates home html                                                           controller  homeController                                                                                                                             when   about                                                         templateUrl   templates about html                    controller   aboutController                          otherwise                                     template   does not exists                            app controller  homeController                         scope                                     function homeController  scope                      scope message    HOME PAGE                                                                                                                                  app controller  aboutController                             scope                                      function aboutController  scope                     scope about    WE LOVE CODE                                                                                       base html   lt html gt   lt body gt        lt div id  sideMenu  gt           lt  -- MENU CONTENT -- gt       lt  div gt        lt div id  content  ng-view    gt           lt  -- Angular view would show here -- gt       lt  div gt    lt body gt   lt  html gt

User · Answer

I just put one simple declaration of the app  var app   angular module  app     xeditable       Then I built one service and two controllers  For each controller I had a line in the JS  app controller  EditableRowCtrl   function   scope  CRUD OperService      And in the HTML I declared the app scope in a surrounding div   lt div ng-app  app  gt    and each controller scope separately in their own surrounding div  within the app div    lt div ng-controller  EditableRowCtrl  gt    This worked fine

User · Answer

What is the problem  To use multiple controllers  just use multiple ngController directives    lt div class  widget  ng-controller  widgetController  gt       lt p gt Stuff here lt  p gt   lt  div gt    lt div class  menu  ng-controller  menuController  gt       lt p gt Other stuff here lt  p gt   lt  div gt    You will need to have the controllers available in your application module  as usual   The most basic way to do it could be as simple as declaring the controller functions like this   function widgetController  scope          stuff here    function menuController  scope          stuff here

User · Answer

lt div class  widget  ng-controller  widgetController  gt       lt p gt Stuff here lt  p gt   lt  div gt    lt div class  menu  ng-controller  menuController  gt       lt p gt Other stuff here lt  p gt   lt  div gt                    OR                   lt div class  widget  ng-controller  widgetController  gt       lt p gt Stuff here lt  p gt       lt div class  menu  ng-controller  menuController  gt           lt p gt Other stuff here lt  p gt       lt  div gt   lt  div gt    menuController have access for menu div  And widgetController have access to        both

[javascript] Multiple controllers with AngularJS in single page app

Examples related to javascript

Examples related to angularjs

Examples related to controller