All geek questions in one place

How to add multiple controllers on the same page in AngularJS

I'm new to AngularJS I have a problem with this code. I want to add multiple controllers in one ng-app . But he performs the first. Why not the second?

 <!DOCTYPE html> <html ng-app="myapp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angul /1.4.8/angular.min.js"></script> </head> <body> <div ng-controller="cont1"> <input type="text" ng-model="fullname"> {{fullname}} </div> <div ng-controller="cont2"> <input type="text" ng-model="fname"> {{fname}} </div> <script> var app = angular.module("myapp", []); app.controller('cont1', function ($scope) { $scope.fullname = ""; }); var new = angular.module('myapp', []); new.controller('cont2', function ($scope) { $scope.fname = ""; }); </script> </body> </html>
+5
source share
3 answers

Since you are rewriting the first myapp module when you execute var new= angular.module('myapp',[]); .

Your code should be:

 var app = angular.module("myapp", []); app.controller('cont1', function($scope) { $scope.fullname = ""; }); app.controller('cont2', function($scope) { $scope.fname = ""; });

or

 var app = angular.module("myapp", []); app.controller('cont1', function($scope) { $scope.fullname = ""; }); angular.module("myapp").controller('cont2', function($scope) { $scope.fname = ""; });

The second parameter [] passed to module() makes the difference

+8
source 
 you can define multiple controllers in single module in this way also angular.module("myapp",[]); .controller('cont1',function($scope){ $scope.fullname=""; }); .controller('cont2',function($scope){ $scope.fname=""; });

When you define modules, do not use var , you can find some of the best angular methods here Angular Style Guide / Best Practices

0
source

The best way to define controllers, directives, factories, etc. - this is

define the names of your modules in a separate file

app.module.js

 angular.module("myapp",[]); // inside [] you define your module dependencies

a separate file is created for the controllers (depending on your requirement, even you can create 1 file for 1 controller)

some.controller.js

 angular.module("myapp").controller('someCtrl'['$scope', function($scope){ }]); angular.module("myapp").controller('someOtherCtrl'['$scope', function($scope){ }]);

Note:

Two types you can write a controller

TYPE1 (not recommended)

 .controller('ctrlName', function($scope){ });

TYPE2 (recommended)

 .controller('ctrlName', ['$scope', function($scope){ }]);

Cause

So, as you can see in TYPE2, we pass the controller dependencies in an array, so when we compile our program, angular will give a name, for example: a to $ scope inside the function () and treat it like $ scope.

With TYPE1, you need to follow a certain order, defining the controller dependency, otherwise angular will go through an error, because in this approach angular just treats the first dependency as $ anchcope, the second as $ scope, etc ...

For instance:

you cannot transfer dependencies with your controller like this

 .controller('ctrlName', function($http, $scope) { });

it will cause an error

if you determine how

 .controller('ctrlName', function($scope, $http) { });

this will work fine since it wants angular.

0
source

Source: https://habr.com/ru/post/1241782/

More articles:


All Articles