Hello guys this post really helps for those who wanted to deep dive into Controllers and $scope. So our agenda is as follows
Agenda
- Controllers
- Monolithic Controllers
- Scope/ Controller Inheritance
- Scopeless Controllers
Controller:
- AngularJS applications are controlled by controllers.
- A controller is defined using ng-controller
- A controller is a JavaScript object containing attributes/properties and functions. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller’s constructor function.
- Controllers are used to setup the initial state and adding behaviour of the $scope
- Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has data-binding for most cases and directives to encapsulate manual DOM manipulation.
Monolithic Controllers:
Monolithic Controllers can create only a single view throughout the application.
Let us see some Examples.
Example 1:
Step 1: Design View
|
1 2 3 4 5 6 7 8 9 10 11 |
<div ng-app="myapp"> <div ng-controller="myCtrl"> <input type="text" ng-model="txtName" /> <p>{{txtName}}</p> </div> </div> |
Step 2: Initializing ng-app and ng-controller
|
1 2 3 |
var app = angular.module('myapp', []); app.controller('myCtrl', function ($scope) { }); |
O/P
Example 2:
How to declare ng-app from External JS.
Right click on project 
Add New Item JavaScript name it as app.js
Add reference of app.js in the <head> </head>
|
1 2 3 4 5 6 7 8 9 |
<head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="app.js"></script> </head> |
Now follow the same steps from Example1
Remove the initialization of ng-app from step 2 , and add that in app.js
|
1 |
var app = angular.module('myapp', []); |
Example 3:
Check whether the number is even or Odd.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div ng-app="myapp"> <div ng-controller="myCtrl"> <input type="text" ng-model="txtNum" /> <input type="button" name="btnSubmit" value="Check Even or Odd" ng-click="EvenOrOdd()" /> <p>Entered Num is : {{result}}</p> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
app.controller('myCtrl', function ($scope) { //Business Login starts here $scope.EvenOrOdd = function() { var num = parseInt($scope.txtNum); if (num != NaN) { if (num % 2 == 0) $scope.result = "Even"; else $scope.result = "Odd"; } } //End of Business Logic }); |
O/P
Scope/Controller Inheritance:
The hierarchy of scopes that inherits from each other known as Scope/Controller Inheritance. This can be described briefly as nested Controllers in AngularJS. The $scope that each Controller receives will have access to properties and methods defined by Controllers higher up the hierarchy.
Example 1:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div ng-app="myapp"> <div ng-controller="myCtrl1"> <p>Hello {{fname}} {{lname}}</p> <div ng-controller="myCtrl2"> <p>Hello {{fname}} {{lname}}</p> <div ng-controller="myCtrl3"> <p>Hello {{fname}} {{lname}}</p> </div> </div> </div> </div> |
|
1 2 3 |
app.controller('myCtrl1', function ($scope) { $scope.fname = "Sachin"; $scope.lname = "Tendulkar"; }); app.controller('myCtrl2', function ($scope) { $scope.fname = "Arun" }); app.controller('myCtrl3', function ($scope) { $scope.fname = "Bill"; $scope.lname="Gates" }); |
Scopeless Controllers:
- If an application does not depend upon communication with other controllers, or does not require any inheritance feature, you can use Scopeless Controllers. Scopeless Controllers are useful for small applications, to avoid complexities. Scopeless Controlles will be using this keyword instead $scope.
- But this is not same as $scope.
- $scope is more powerful and its use allows you to share the same data between controllers.
- $watch services are attached with $scope which allows the view to be updated, where this doesn’t have such services. So that views will not get updated when using this
Example:
Using $scope
|
1 2 3 4 5 6 7 8 9 10 11 |
<div ng-app="myapp"> <div ng-controller="myCtrl"> <button ng-click="changeName()">ChangeName</button><br /> {{myname}} </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
app.controller('myCtrl', function ($scope) { $scope.myname = "hello"; $scope.changeName = function () { $scope.myname = "Helloworld"; } }); |
Using this
|
1 2 3 4 5 6 7 8 9 10 11 |
<div ng-app="myapp"> <div ng-controller="myCtrl as Ctrl"> <button ng-click="Ctrl.changeName()">ChangeName</button><br /> {{Ctrl.myname}} </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
app.controller('myCtrl', function () { this.myname = "hello"; this.changeName = function () { this.name = "helloworld"; console.log(this.name); } }); |
O/p: On clicking this button view remains same. That changes can be seen in Console.
