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 j

Answer 1

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, 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 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

    
Contacts
    
This is contacts page...

the above routeProvider will inject a controller into your containing div. Basically the above html automaticaly becomes:

    
Contacts
    
This is contacts page...

When I say you can have others controllers, means that you can plug controllers to inner DOM elements, as the following:

    
Contacts
    
Hello {{name}}! This is contacts page...     
    

I hope this clarify things a bit.

A