November 21, 2016

All about AngularJS..


What is AngularJS?
AngularJS is an open-source JavaScript framework which simplifies binding JavaScript objects with HTML UI elements.

It is distributed as a JavaScript file, and can be added to a web page with a script tag:
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" > < /script >

AngularJS uses HTML as the backbone. It creates extended HTML tags that can be used as normal HTML tags. These tags will help you to write an efficient code. The interesting fact is that you can reduce the lines of code you may need to write when you use normal JavaScript.

e.g:
Suppose, you want to create a text box, which has 'employee name', whenever you make changes in the text box, 'employee' object should get updated and when something is changed internally in the customer object the UI should get updated.

In order to achieve this communication between UI to object, the developers end up writing two functions:
1). Function, which takes data from UI and sets it to the object
2). Function, which takes takes data from the object and sets it to UI.

The same functionality can be achieved from AngularJS in a simpler way.
< div ng-controller="Employee" >
< input type=text id="txtEmployeeName"  ng-model="EmployeeName"/ >
< /div >

The javascript class is attached to a HTML parent div tag using “ng-controller” directive and the properties are binded directly to the text box using “ng-model” declarative. So now whatever you type in the textbox updates the Employee object and when the Employee object gets updated it also updates the UI.

Explain Expressions in AngularJS?
AngularJS Expressions are like JavaScript expressions and are written inside double braces: {{ expression }}. They can contain literals, operators, and variables. AngularJS will "output" data exactly where the expression is written.

What is a Modules and how to create Modules in AngularJS?
An AngularJS module are containers in which application is defined. A module is a collection of services, directives, controllers, filters, and configuration information. You can create a module by angular.module() funtion, e.g:

< div ng-app="myAppModule" > ...< /div >
< script >
var app = angular.module("myAppModule", []);
< /script >

In the above example the "myAppModule" parameter refers to an HTML element in which the application will run. Now you can add controllers, directives, filters, and more, to your AngularJS application.

Advantage of Module: Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts. However in AngularJS, modules reduces this problem, by keeping all functions local to the module.

Explain Directives in Angular?
Directives  are a core AngularJS feature and are attributes decorated on the HTML elements. All directives start with the word “ng”(ng-model, ng-app, ng-repeat, ng-bind). As the name says directive it directs Angular what to do.

The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. Provide type validation for application data (number, email, required) and status for application data (invalid, dirty, touched, error). It can also provide CSS classes for HTML elements.
The ng-bind directive binds application data to the HTML view.
The ng-init directive defines initial values for an AngularJS application. Normally we use controller or module instead of ng-init.

How can you add a directive in a Module?
< body  ng-app="myApp" >
< test-Directive > < /test-Directive >
< script >
var app = angular.module("myApp", []);
app.directive("testDirective", function() {
    return {
        template : "I am a test directive!"
    };
});
< /script >
< /body >

You can invoke a directive by using:
·         Element name: <  test-Directive > < /test-Directive >
·         Attribute : < div test-Directive > < /div >
·         Class : < div class="test-Directive" > < /div >
·         Comment : < !-- directive: test-Directive -- >

You can restrict your directives to only be invoked by some of the methods. Below directive can be invoked only by attributes:

var app = angular.module("myApp", []);
app.directive("testDirective", function() {
    return {
        restrict : "A",
        template : "I am a test directive!"
    };
});

The legal restrict values are: E for Element name, A for Attribute, C for Class, M for Comment. By default the value is EA, meaning that both Element names and attribute names can invoke the directive.
What is the use of ngRepeat directive?
ngRepeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection.
Below are the properties of ngRepeat:-
$index : iterator offset of the repeated element (0..length-1)
$first     : true if the repeated element is first in the iterator.
$middle : true if the repeated element is between the first and last in the iterator.
$last      : true if the repeated element is last in the iterator.
$even   : true if the iterator position $index is even (otherwise false).
$odd      : true if the iterator position $index is odd (otherwise false).

e.g:
< body >
< h3 > AngularJS Expressions example< /h3 >
< div ng-app="" >
< p > Expression to add two numbers: {{ 7 + 2 }}< /p >
< /div >

< h3 > AngularJS Numbers example< /h3 >
< div ng-app="" ng-init="quantity=10;cost=7" >
< p > Total Amount: {{ quantity * cost }}< /p >
OR
< p > Total Amount (using ng-bind): < span ng-bind="quantity * cost" > < /span > < /p >
< /div >  

< h3 > AngularJS Strings example< /h3 >
< div ng-app="" ng-init="firstName='Michael';lastName='Ghomes'" >
< p > Name is {{ firstName + " " + lastName }}< /p >
< /div >  

< h3 > AngularJS Objects example< /h3 >
< div ng-app="" ng-init="employee={empName:'Peter',empID:'10'}" >
< p > Employee Name is {{ employee.empName }}< /p >
< /div >  

< h3 >  AngularJS Arrays example< /h3 >
< div ng-app="", ng-init="colorsPresent=['red', 'blue', 'voilet']" >
< p > Color at 2nd position is {{ colorsPresent[1] }}< /p >
< /div >

< h3 > Iterating using ng-repeat directive< /h3 >
< div ng-app="", ng-init="employeeNamesPresent=['Micheal', 'Mark', 'John']" >
< h4 > showing the names using ng-repeat< /h4 >
< ul >
< li ng-repeat="employeeNamePresent in employeeNamesPresent" > {{ employeeNamePresent }} < /li >
< /ul >
< /div >

< h4 > showing the names using ng-repeat: odd row has color '#f1f1f1' and even Row has a color '#f1aaaa'< /h4 >
< div ng-app="", ng-init="employeeNames=['Micheal', 'Mary', 'Nancy', 'John']" >
< table >
< tr ng-repeat="employeeNamePresent in employeeNames" >  
< td ng-if="$odd" style="background-color:#f1f1f1" > Name : {{ employeeNamePresent }}< /td >  
< td ng-if="$even" style="background-color:#f1aaaa" > Name : {{ employeeNamePresent }}< /td >  
< /tr >
< /table >
< table >
< h4 > ng-repeat variable example:< /h4 >
< tr ng-repeat="employeeNamePresent in employeeNames" >  
< td ng-if="$first"  > First 'Name' in the array : {{ employeeNamePresent }}< /td >  
< td ng-if="$middle"  > Middle 'Name' in the array : {{ employeeNamePresent }}< /td >
< td ng-if="$last"  > last 'Name' in the array : {{ employeeNamePresent }}< /td >
< /tr >
< /table >
< /div >

< div ng-app="" ng-init="customerNames=[{empName:'Mambo',empID:'10'}, {empName:'Marchel',empID:'11'}, {empName:'Eugen',empID:'11'}]" >
< h4 > ng-repeat: with uppercase and lower case< /h4 >
< ul >
< li ng-repeat="customerName in customerNames" > Customer Name in Upper Case : {{ customerName.empName | uppercase }} < /li >
< /ul >
< ul >
< li ng-repeat="customerName in customerNames" > Customer Name in Lower Case : {{ customerName.empName | lowercase }} < /li >
< /ul >
< h4 > ng-repeat: with filters and order by< /h4 >
Search Customer Name: < input type="text" ng-model="custName"/ >
< ul >
< li ng-repeat="customerName in customerNames | filter: custName | orderBy:'empName'" > Customer Name : {{ customerName.empName }} < /li >
< /ul >
< /div >
< /body >

What are controllers and need of ng-controller and ng-model in Angular?
Controllers are simple javascript function which provides data and logic to HTML UI. As the name says controller they control how data flows from the server to HTML UI.

e.g: Employee controller which provides data via 'EmployeeName' and 'EmployeeCode' property and Add/ Update logic to save the data to database.
function Employee($scope)
{
                $scope.EmployeeName = "Martin";
                $scope.EmployeeCode = "108";
                $scope.Add = function () {
                }
                $scope.Update = function () {
                }
}

'ng-controller' is a directive and is used to attach Controllers to the HTML UI. The properties of the controller are attached by using 'ng-model' directive. For example below is a simple HTML UI which is attached to the “Customer” controller via the “ng-controller” directive and the properties are binded using “ng-model” directive.

Explain $scope in AngularJS?
Usually we do not put our logic in the 'view', as its not maintainable. So we keep it in another javascript object 'Controllers'.

'$scope' is the glue (ViewModel) between view and controller. '$scope' object instance gets created when 'ng-controller' directive is encountered.

Here is the simple example, in which we are creating the list of customers. $scope is dynamically injected in CustomerController(). This function serves as the source of data for the view. As the Controllers is unaware about view, so the $scope will act as a glue between view and controller.

The parser first finds “ng-controller” directive which is pointing to CustomerController. He creates a new instance of “$scope” object and connects to the 'custdiv' UI.

< script >
var app = angular.module('myApp', []);
app.controller('CustomerController', function($scope) {
$scope.customers=[
{name:'David', city:'Kempten'},
{name:'Muller', city:'Berlin'},
{name:'Simson', city:'Munich'},
{name:'Richard', city:'Ulm'}
];  
});
< /script >
< div ng-app="myApp" ng-controller="CustomerController" >
< ul >
< li ng-repeat="custo in customers" > {{ custo.name}} - {{ custo.city}} < /li >
< /ul >
< /div >

What is “$rootScope” and how is it related with “$scope”?
“$rootScope” is a parent object of all “$scope” angular objects created in a web page.

-K Himaanshu Shuklaa..

No comments:

Post a Comment