Multiple controllers with AngularJS in single page app

base URL  : http://stackoverflow.com/questions/24316355/multiple-controllers-with-angularjs-in-single-page-app

down vote

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, <ng-view> 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 <ng-view> 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".