Multiple controllers with AngularJS function in a single page application

Question

I want to know how to use multiple controllers for a single page application. I tried to figure it out, and I found questions very similar to mine, but there is only a ton of different answers, solving a specific problem, as a result of which you do not use several controllers for a single-page application.

Is it because it would be inappropriate to use multiple controllers for the same page? Or is it simply impossible?

Let's say I already have a control carousel with a picture of a kick working on the main page, but then I will learn how (say) to use modals, and I need a new controller for this (or any other thing that I need a controller for). What will i do?

I saw some answers to other questions on which they ask almost the same thing as I do, and people answer "* OMG. Why would you even do this, just do it ...".

What is the best way, or how do you do it?

Edit

Many of you are responsible to simply declare two controllers and then use ng-controller to call it. I use this bit of code below and then call MainCtrl with an 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 install a controller here if I can just use ng-controller without it? That's what confused me. (and you cannot add two controllers this way, I think ...)

Answer 1

What is the problem? To use multiple controllers, just use several ngController directives:

 <div class="widget" ng-controller="widgetController"> <p>Stuff here</p> </div> <div class="menu" ng-controller="menuController"> <p>Other stuff here</p> </div> 

You will need to have the controllers available in your application module, as usual.

The easiest way to do this is as simple as declaring controller functions as follows:

 function widgetController($scope) { // stuff here } function menuController($scope) { // stuff here } 

Answer 2

I think you are missing the value of a "one-page application."

This does not mean that you will physically have one .html, instead you will have one main index.html and several NESTED.html files. So why a single page application? Because this way you do not load pages in the standard way (i.e. a Browser call that completely refreshes the full page), but you just load some of the content using Angular / Ajax. Since you do not see the flicker between page changes, it seems that you have not moved from the page. This way you feel that you are on the same page.

Now I assume that you want to have MULTIPLE content for your SINGLE PAGE application: (for example, home, contacts, portfolio and store. Your single-page / multi-page application (angular method) will be organized as follows:

• index.html : contains header, <ng-view> and footer
• contacts.html : contains the contact form (no header, no footer)
• portfolio.html : contains portfolio data (without header)
• store.html : contains the store, without a header.

You are in the index, you click on the menu called "contacts" and what happens? angular replaces the <ng-view> with contacts.html code

How do you achieve this? with ngRoute , as you do this, 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 correct html, passing it the right controller (note: do not specify the ng-controller directive in contacts.html if you use routes )

Then of course you can declare so many ng-controller directives inside your contactss.html page. These will be child ContactCtrl controllers (thus inheriting from it). But for one route, inside routeProvider , you can declare one controller that will act as the "Father of the partial view controller".

EDIT Imagine the following templates /contacts.html

 <div> <h3>Contacts</h3> <p>This is contacts page...</p> </div> 

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

 <div ng-controller="ContactsCtrl"> <h3>Contacts</h3> <p>This is contacts page...</p> </div> 

When I say that you may have other controllers, you can connect the controllers to the internal elements of the DOM, as shown below:

 <div> <h3>Contacts</h3> <p ng-controller="anotherCtrl">Hello {{name}}! This is contacts page... </p> </div> 

Hope this makes a little difference.

BUT

Answer 3

I am currently creating a one-page application. Here is what I have so far that, in my opinion, will answer your question. I have a basic template (base.html) which has a div with the ng-view directive. This directive tells angular where to put new content. Note that I'm new to angularjs, so I am not saying in any way that this is the best way to do this.

 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

 <html> <body> <div id="sideMenu"> <!-- MENU CONTENT --> </div> <div id="content" ng-view=""> <!-- Angular view would show here --> </div> <body> </html> 

Answer 4

 <div class="widget" ng-controller="widgetController"> <p>Stuff here</p> </div> <div class="menu" ng-controller="menuController"> <p>Other stuff here</p> </div> ///////////////// OR //////////// <div class="widget" ng-controller="widgetController"> <p>Stuff here</p> <div class="menu" ng-controller="menuController"> <p>Other stuff here</p> </div> </div> 

menuController has access to the div menu. And widgetController have access to both.

Answer 5

I just put one simple application declaration

 var app = angular.module("app", ["xeditable"]); 

Then I built one service and two controllers

For each controller, I had a line in JS

 app.controller('EditableRowCtrl', function ($scope, CRUD_OperService) { 

And in HTML I declared the application area surrounded by div

 <div ng-app="app"> 

and each controller area separately in its own div environment (in the div application)

 <div ng-controller="EditableRowCtrl"> 

That works great

Answer 6

We can simply declare more than one controller in the same module. Here is an example:

  <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script> <title> New Page </title> </head> <body ng-app="mainApp"> <!-- if we remove ng-app the add book button [show/hide] will has no effect --> <h2> Books </h2> <!-- <input type="checkbox" ng-model="hideShow" ng-init="hideShow = false"></input> --> <input type = "button" value = "Add Book"ng-click="hideShow=(hideShow ? false : true)"> </input> <div ng-app = "mainApp" ng-controller = "bookController" ng-if="hideShow"> Enter book name: <input type = "text" ng-model = "book.name"><br> Enter book category: <input type = "text" ng-model = "book.category"><br> Enter book price: <input type = "text" ng-model = "book.price"><br> Enter book author: <input type = "text" ng-model = "book.author"><br> You are entering book: {{book.bookDetails()}} </div> <script> 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; } }; }); </script> <h2> Albums </h2> <input type = "button" value = "Add Album"ng-click="hideShow2=(hideShow2 ? false : true)"> </input> <div ng-app = "mainApp" ng-controller = "albumController" ng-if="hideShow2"> Enter Album name: <input type = "text" ng-model = "album.name"><br> Enter Album category: <input type = "text" ng-model = "album.category"><br> Enter Album price: <input type = "text" ng-model = "album.price"><br> Enter Album singer: <input type = "text" ng-model = "album.singer"><br> You are entering Album: {{album.albumDetails()}} </div> <script> //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; } }; }); </script> </body> </html> 

Answer 7

You can also include all of your templates in 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> 

Thus, if a different controller is required for each template, you can still use angular -router. See this plunger for a working example http://plnkr.co/edit/9X0fT0Q9MlXtHVVQLhgr?p=preview

Thus, as soon as the application is sent from the server to your client, it is completely self-sufficient, assuming that it does not need to make any data requests, etc.