AngularJS is super innovation from the highly talented developers at Google. It is open source javascript framework which is maintained by Google and community developers. It is MV*(Model-View-Whatever) framework for building interactive, single page applications, and the traditional web applications
Introduction
Please check my previous article
Hello AngularJS . In this article, we will discuss in details about controllers with examples. It would be good to get hands on with jsfiddle.net to play with examples.
In simple words jsFiddle is awesome online tool which provides all the readymade infrastructure to play with JavaScript, HTML, and CSS.
What is Controller?
As you all know that AngularJS is MVC based javascript framework. So it is very important to know the controller part in order to have complete understanding of AngularJS. Controller are normal javascript functions which form the starting point for the front-end business logic. Controllers contain all the business logic to control the view behavior. They play the middle man role between model and the views.
Imagine you are working on a requirement to check the existence of user in the application before the user gets added into the system. So here the end user will enter his/her username in the textbox. The code to provide response to the user can be part of the controller. Well this is an example to just show you the usage of the controller. In real application the controller will interact with another layer called services in order to achieve the functionality. We will talk on services in our future articles?.
Before taking a deep look into the controller further let us see some examples of controllers.
HTML:
<div ng-app="" ng-controller="GetFullNameController">FirstName:
<input type="text" ng-model="firstName" />
<br/>LastName:
<input type="text" ng-model="lastName" />
<br/>
<button ng-click="GetFullName()">FullName</button>
<div>Welcome {{ fullName }}</div>
</div>JavaScript:
The below mentioned code forms the controller part.
function GetFullNameController($scope) {
$scope.GetFullName = function () {
$scope.fullName = $scope.firstName + " " + $scope.lastName;
$scope.firstName = "";
$scope.lastName = "";
};
}Output:
You can play with the code by making some updates?. Now from the javascript code you can see that the GetFullNameController is a simple javascript function.
From the above sample there are few things to take a note:
- ng-controller -? Defined in the HTML section of Figure 2.
- $scope? Passed as input parameter to the controller : GetFullNameController()
Let us discuss the above points step by step.
ng-controller:
This is a special directive just like ng-app which associates a controller with view. From the above code snippet (Figure 2) the controller: GetFullNameController will be responsible for the entire DOM content present within the div.
$scope:
There is also an input parameter: $scope which we have passed it to the controller. Behind the scenes this is the actual object which binds the controller with the view. When the controller gets initialized by the AngularJS it automatically creates and injects the $scope object using dependency injection. Scope hold the model data in the form of properties which are finally passed to the view. Scope uses AngularJS two way binding to bind model data to the view. It is the responsibility of the controllers to initialize the model data to the $scope object in the form of properties in order to display it in the view.
By now you must be clear with basic idea of controllers and $scope, ng-controller.
NOTE: In the above example we have created controller functions in the global scope which is not recommended in real applications. In the real application we should use AngularJS Module to hook up the controller. We will talk on this more in my next article.
Nested Controllers
We are setting the scope of controller in the HTML page using the ng-controller directive as shown the below example:
<div ng-controller=”HelloWorldController”>
<%--DOM which is influenced by the controller defined above --%>
</div>
We can create number of controllers and nest them within each other. The ng-controller directive creates a new child scope object and by this we get hierarchy of scopes which inherit from each other.
Let us see an example of nested controllers.
HTML:
<div ng-app"" ng-controller="FoodController">
This is {{ name }} controller of type {{ type }}
<div ng-controller="VegController">
This is {{ name }} controller of type {{ type }}
<div ng-controller="NonVegController">
This is {{ name }} controller of type {{ type }}
</div>
</div>
</div> JavaScript:
The below mentioned code forms the controller part.
function FoodController($scope) {
$scope.name = 'Food';
$scope.type = 'Food';
}
function VegController($scope) {
$scope.name = 'Veg';
}
function NonVegController($scope) {
$scope.name = 'NonVeg';
$scope.type = 'NonVeg';
}CSS:
div {
margin:10px;
padding:15px;
border:1px solid red;
}Output:
In the above sample you can see how each nested controller’s scope is getting overridden. The scope override process flow from outermost controller to the innermost controller.
In the above code snippet we have set the name and type properties to the scope object of FoodController. We have nested the VegController within the FoodController using ng-controller directive. From the output (Figure 3) you can see how the name property is overridden by the VegController but it inherits the type from BaseController. NonVegController is the inner-most controller within controller’s hierarchy. It is overriding both the name and the type properties. This example demonstrates how controllers can be nested.
Conclusion
Okay, by now we have seen what are controllers, and how to create them and usage of $scope object to bind the model data with the views, nesting of controllers. Hope you enjoyed reading the article. Thank you.
Reference