Hanif: February 2016

Friday, February 19, 2016

AngularJS Services

The service is a javascript object or a function available to the application. We can use services to wrap the common functionality for the application.

There are my built-in services in Angular JS like $http, $interval, $location etc.

We can define our own services depending on requirements.

<body>

<p>Result : {{result}}</p>

</div>

var app = angular.module('myApp', []);

app.service('myCalc', function() {

this.multiply = function (x,y) {

return x*y;

}

this.add = function (x,y) {

return x+y;

}

});

app.controller('myCtrl', function($scope, myCalc) {

$scope.result= myCalc.add(5,4);

});

</script>

</body>

AngularJS Filters ( | )

Filters are used to transform the data in desired formats. Angular provides many builtin filters (json, orderby, uppercase,currency,date and filter etc.) and we can define our own filters as well depending on requirements.

Filters can be used to an expression by using '|' followed by the filter.

<body>

<div ng-app="myApp" ng-controller="formatCtrl">
Amount : {{ amount | currency }}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formatCtrl', function($scope) {
$scope.amount = 14523.2;
});
</script>

</body>

AngularJS Scope ($scope)

Scope is bridge between Html(View) and controller in Angular JS applications. It is a java script object holding properties and method for view and controller.

The scoped defined at application level is called $rootScope and is available in entire application.

If we two variable with same names in root scope and current scope then current scope variable will get precedence.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp">

RootScope : {{myVar}}

<div ng-controller="myCtrl">

Controller Scope : {{myVar}}

</div>

<script>

var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.myVar = 'In Root Scope';
});
app.controller('myCtrl', function($scope) {
$scope.myVar = "In current contrller scope";
});

</script>

</body>
</html>

Thursday, February 18, 2016

AngularJS Controllers (ng-controller)

It controls the application data. It is a regular javascript object created by object constructor.
It wraps up all logic for UI manipulation and is a bridge between client side and server side/third party API's etc.

It stores the application data and performs operations on it depending on requirements.

<div ng-app="myApp" ng-controller="myController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.firstName = "";
$scope.lastName = "";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>

Angular Model

The ng-model directive binds the HTML control value to the application data. This is a two way binding if we change value in control it will automatically get changed in the app data and vice versa.

AngularJS will create property implicitly if it is missing in ng-model attribute.

In order to check status of the application data like valid, modified or touched, ng-model provides a power support.

Following classes are being added ore removed depending on status of the model.

ng-valid
ng-invalid
ng-pending
ng-pristine
ng-touched
ng-untouched
ng-dirty

<form ng-app="" name="testForm">
Email Address :<input type="email" name="emailAddress" ng-model="myText" required>
<p>Valid: {{testForm.emailAddress.$valid}} </p>
<p>Touched: {{testForm.emailAddress.$touched}} </p>
<p>Dirty: {{testForm.emailAddress.$dirty}} </p>
</form>

AngularJS Directives

Directives provide AngularJS core functionality of extending HTML with new attributes.

There are a lot of built-in directives to support diverse functionality to the applications.

e.g.

ng-app directive initializes an AngularJS application.
ng-init directive initializes application data.
ng-model directive binds the HTML controls to application data.

We can also define our own directives depending on requirements.

<!DOCTYPE html>

<html>

<my-btn-submit></my-btn-submit>

var app = angular.module("myApp", []);

app.directive("myBtnSubmit", function() {

return {

restrict : "C",

template : "<input type='submit' value='Submit'></input>"

};

});

</script>

</body>

</html>

We can restrict directive invocation with 'restrict' values are:

E - Invoke as Element name

A - Can be used as Attribute

C - Can be use as Class

By default the value is EA, means can be invoked both as, an Element name and attribute name.

AngularJS Modules

AngularJS
module defines the application. Which wraps up all different components of the
application like controllers, directives etc. The controllers always belong to
a module.

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>

AngularJS Expressions

AngularJS Expressions are used to bind data to HTML and can be written in side double curly braces {{2+2}} and in can also be written in directives like ng-bind=”2+2”.

<div ng-app="">
<p> Angular Expression: {{ 10 + 20 }}</p>
</div>

AngularJS Expressions are very similar to JavaScript Expressions but there are some differences.

Both support literals, operators, and variables.
Angular expressions support filters, while JavaScript expressions do not.
Angular expressions can be written inside HTML but we can not write JavaScript expressions inside HTML.
JavaScript expressions support conditionals, loops, and exceptions, while Angular expressions do not support this.

What is difference between angular expression {{}} and ‘ng-bind’ and which is better?

The expression {{}} binds data to HTML same like ng-bind directive. But ng-bind is better approach than {{}}. Followings are few of the considerations.

Key difference is {{ }} can flash on page load while ‘ng-bind’ hides the expression until it is displayed correctly.
The Angular JS registers a watcher for the variable being used in ng-bind.
The ‘ng-bind’ stores only value of the variable in memory.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" data-ng-init="var1=5;var2=7">

<p>Result = <span data-ng-bind="var1+var2"></span></p>
<div>Result = {{(var1+var2)}}</div>

</div>

</body>
</html>

Initializing multiple variables in ‘ng-init’ for AngularJS application

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" data-ng-init="var1=5;var2=7; varStr='Hello'">
<p> <span data-ng-bind="varStr"></span></p>
<p> var1 = <span data-ng-bind="var1"></span></p>
<p>var2 = <span data-ng-bind="var2"></span></p>
<div>var1+var2 = {{(4+5)}}</div>

</div>

</body>
</html>