AngularJS is an open source web application framework to build large scale and high performance web applications while keeping them easy to maintain. It provides developers options to write client-side application in a clean Model View Controller (MVC) architecture. AngularJS automatically handles JavaScript code suitable for different browsers and so, the developer does not have to make his JavaScript application cross-browser compliant.
Building blocks of AngularJS:
Controller – JavaScript functions that are bound to a particular scope.
Scope – Objects that refer to the model. They act as a glue between controller and view.
Directives – Markers on DOM elements, these can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel, ngBind, etc.)
Data-binding – It is the automatic synchronization of data between model and view components.
Services – AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in an app.
Dependency Injection – AngularJS has a built-in dependency injection sub-system that helps the developer by making the application easier to develop, understand, and test.
In this blog, I will focus on Controller and Directives.
Controller
A Controller is a JavaScript object which contains attributes and functions. A Controller is defined using the AngularJS built-in directive ng-controller. A Controller handles all the operations related to a view to which it has been associated.
A Controller is defined as follows:
angular.module('myApp', []).controller('myController', function($scope) {
});And the above controller can be declared as follows:
<div id="myDiv" ng-app="myApp" ng-controller="myController"> ...... </div>
Built-in Directives
As the name itself indicates, Directive is an indicator to the angular compiler. It directs the angular compiler that what to do when it comes across a Directive. AngularJS provides such built-in directives to ease the developer work. Some of the important directives necessary to build an AngularJS app are-
- ng-app – This directive defines and links an AngularJS application to HTML.
- ng-controller – This directive associates a controller to a view.
- ng-model – This directive binds the values of AngularJS application data to HTML input controls.
- ng-bind – This directive binds the AngularJS Application data to HTML tags.
- ng-repeat – This directive is used to iterate through a list and generate elements dynamically.
- There are many other built-in directives which you can refer from the AngularJS documentation as and how you come across different requirements.
Sample Application
Let’s build a sample application which will give you a clear picture about how AngularJS application works. And then I shall introduce you to other AngularJS features.
What do you need to build an AngularJS app?
All you need is AngularJS framework JavaScript file, which you can download from https://angularjs.org/ or simply include the following script tag in your application template.
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”>
You can use any text editor to create a AngularJS application.
Step-1: Create a template
<div id="myDiv"> <p>Type your name in the input field:</p> <p><input type="text"></p> <p>Hello <span></span></p> </div>
Step-2: Create a Module
<script>
angular.module('myApp', []);
</script>Step-3: Create a Controller
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.name = "";
});
</script>Step-4: Update the HTML template to attach Module and Controller
<div id="myDiv" ng-app="myApp" ng-controller="myCtrl"> <p>Type your name in the input field:</p> <p><input type="text" ng-model="name"></p> <p>Hello <span ng-bind="name"></span></p> </div>
Result
In the above example you can see $scope model variable “name” has been associated to an input box. As the user types a name in the input box the same value will be reflected below the input box. This is called two-way data binding. In two-way data binding a model value updated in controller will be reflected in the view automatically and vice-versa.
Custom Directives
Custom directives are used to extend the HTML functionality. Custom directives are defined using the “directive” function. A custom directive replaces an element to which it has been applied. Let’s understand this with an example.
I want to define a custom tag as follows, which has an attribute called “name”.
<employee name=””></employee>
To handle above custom tag a custom directive has to be written
var app = angular.module('myApp', []);
app.directive('employee', function() {
var directive = {};
directive.template = "Employee: <b>{{ name }}</b> “;
directive.scope = {
name : "=name"
}
directive.compile = function(element, attributes) {
element.css("background", "lightgreen");
}
return directive;
});Result
This directive will be called as soon as any employee element is encountered in the HTML, and that element will be replaced with the directive’s template wherein it displays the employee name in bold letter with a light green background color.
Don’t miss my next blog where I discuss Dependency and Injection Services!
