AngularJS

ng-repeat-start and ng-repeat-end directives in AngularJS

September 9, 2015 by ashish shukla Leave a Comment

AngularJS makes common data binding tasks easy to implement.We set the viewmodel for our application using the $scope in the controller and access it in the view.AngularJS automatically updates the view when the value of the $scope changes.

One common feature is iterating over a collection of items.We can implement this scenario easily using the ng-repeat directive.The ng-repeat directive creates HTML template for each item in a collection of items.

So instead of manipulating the HTML using JavaScript we just specify what template we require for an item in a collection.For example if we have a collection of items defined as:

var app = angular.module('app', []);
app.controller('Ctrl',['$scope', function ($scope) {
$scope.employees=[
{Name:'Mark',Department:'HR',Id:1},
{Name:'Tim',Department:'Finance',Id:2},
{Name:'Frank',Department:'Administration',Id:3}
];
}]);

Then we can render the above collection using ng-repeat.Following will display Name and Department properties for every employee in a div:

<div ng-repeat="emp in e.employee">
<i>Name</i>{{emp.Name}} <i>Department</i> {{emp.Department}} <i>Id</i> {{emp.Id}}
</div>

ng-repeat-start and ng-repeat-end directives in AngularJS

ng-repeat-start and ng-repeat-end directives in AngularJS are used to display groups of data.These are used to display HTML markup for a group of items.

The above employees array has only three elements but a real application may consist of thousands of records.Also an organization may have lots of departments.With ng-repeat we will not be able to group the records based on a certain criteria such as Department.

To group the data in a collection on a certain property angular 1.2 and above versions provides the ng-repeat-start and ng-repeat-end directives.Using these directives we can easily group the data in a collection.

So building on the above example but this time with more records we define the employees array as:

$scope.employees=[
{department:'Finance' ,employee:[
{Name:'Mark',Department:'HR',Id:1},
{Name:'Tim',Department:'Finance',Id:2},
{Name:'Frank',Department:'Administration',Id:3}
]
}
,
{department:'HR' ,employee:[
{"Name":"John", "Id":4},
{"Name":"Sam", "Id":5},
{"Name":"Ravi","Id":6}
]
}
,
{department:'Administration' ,employee:[
{"Name":"Ashish", "Id":7},
{"Name":"Peter", "Id":8},
{"Name":"Craig","Id":9}
]
}

]

We can group the above items in the employees collection by using the ng-repeat-start and ng-repeat-end directives as:

<table ng-app="app" ng-controller="Ctrl">
<tr ng-repeat-start="e in employees">
<td> <b> {{e.department}} </b></td>

<td>
</tr>
<tr ng-repeat="emp in e.employee">
<td > Name{{emp.Name}} Id {{emp.Id}} </td>
</tr>
<tr ng-repeat-end>
<td> {{e.Name}} </td>
</tr>
</table>

Above markup renders the list of employees in a table grouped by Department name

ashish shukla

Follow on:

Directives in AngularJS

September 7, 2015 by ashish shukla Leave a Comment

HTML is designed to display static documents.So if a web site contains just static documents then HTML is sufficient for such a site.But web applications of today are much more than just a group of static documents.Web applications are expected to perform lot of processing on the client.To provide user interactivity web applications use client side frameworks such as jQuery.These client side frameworks manipulate the HTML DOM to implement the required behaviour on the client.

In contrast to the popular frameworks that manipulate the DOM of HTML ,AngularJS provides the client interactivity by extending HTML rather than manipulating it.Directives are an important part of AngularJS which allows us to attach custom behaviours to the DOM elements such elements,attributes and css.

Directives allows us to remove duplication of behaviour.We can create a directive for reusable behaviour and use that directive instead of copying the markup at many different places.
While working with AngularJS applications we use lot of built in directives.Some of the commonly used built in directives in AngularJS are:

ng-app Defines AngularJS application
ng-controller Attaches controller to a DOM element
ng-bind Specifies expression to use for the content of HTML element
ng-click Specifies behavior for HTML element click event
ng-repeat Used to create HTML template for every item in a collection of items

Creating custom directives

We can create these types of custom directives.Each directive determines how the directive will be activated

Element Directive is activated if there is a matching HTML element with the directives name
Attributes Directive is activated if there is a matching attribute
CSS Directive is activated if there is a matching CSS class
Comment Directive is activated if there is a matching comment

Element directives are most commonly used.Though other directives are useful depending upon the scenario.

In the following example we will create an element directive

<script>
myapp = angular.module("app", []);
myapp.directive('helloDirective', function() {
var directive = {};
directive.restrict = 'E'; /* restrict this directive to elements */
directive.template = "My first directive";
return directive;
});
</script>

In the first line we create a new angular module called app.This module calls the directive() function .This directive() function takes two arguments:

First is the name of the directive.Here we have named our directive as helloDirective
Second parameter is a factory function which returns the directive object.The directive object is a javascript object with some properties.Inside the factory function we set the properties of this directive object.Two of the important properties we need to set for this directive object are restrict and template.

The ‘restrict’ property determines how the directive is matched to HTML.The valid values for restrict property are

E directive will be activated if there is matching HTML element
A directive will be activated if there is matching HTML attributes
EA directive will be activated if there is matching HTML element or HTML attribute

The ‘template’ property determines the content of the matched HTML element.So if a HTML element matched the directive then the contents of the template property replaces the contents of the element.

Though we have assigned a static text value to the ‘template’ property but it is more useful to assign expressions to the template.We can assign expression to the template property as:

directive.template = "Welcome {{user}}";

When the above directive is rendered the expression {{user}} is replaced with the value of user as assigned in the scope.
To activate the above directive we can use the following

<body>
<div ng-app="app" >
<hello-Directive></hello-Directive>
</div>
</body>

Another useful property is templateUrl.This specifies the path to the template.We can define template to use in a HTML file and assign the path to the templateUrl property.For example if our template is defined in a file called customtemplate.html then we can assign it to the templateUrl property as:

templateUrl: ‘customtemplate.html’

Naming convention of AngularJS directive

We name the directive using the camel case syntax.In camel case syntax every word except the first begins with a capital letter.AngularJS converts element or attribute name to match the directive name ,a process known as normalization.
In the normalization process “-” ,”:” or “_” delimited names are converted to camelCase

So if we name our directive as helloWorld and it is an Element directive then it will be activated using the following elements

<hello-world></hello-world>
<hello:world></hello:world>
<hello_world></hello_world>

In the normalization process angularjs automatically converts the “-” or other separator character to the CamelCase directive name.This is the reason that we find the names of the AngularJS directives using the CamelCase while when we use them we use the hyphen “-“.For example ngBind is the name of AngularJS directive used for rendering expression as the text value of an HTML element.But when we use this directive we use it as ng-bind=”expression”.

ashish shukla

Follow on:

A basic introduction to Filters in AngularJS

September 3, 2015 by ashish shukla Leave a Comment

Filters

AngularJS filters are used to transform the data for display.We can apply any transformation required to display the data.So filters are about the presentation of the data to the end user.

For example we can remove specific values from the displayed data.

We can apply filter to an expression in the view as

{{ expression | filter }}

Expression is followed by a pipe character and the filter name.This will apply the filter with the name “filter” to the expression.The specific data transformation applied to the expression depends upon the functionality provided by the filter.

Following will transform the string value of message to lowercase.lowercase is a built in filter in AngularJS.

{{message|lowercase}}

Chaining filters

Instead of applying a single filter to an expression we can apply multiple filters by chaining.In this case the result of filter1 is passed to filter2

{{ expression | filter1 | filter2 }}

Specifying filter arguments

If the filter is defined to take arguments then we can pass arguments as required to format the data.To pass the argument to the filter we specify the colon “:” and the argument value :

{{ expression | filter1:"argument" }}

In the above markup argument value “argument” will be passed to the filter “filter1”.

Built-In filters in AngularJS

There are many filters already provided by AngularJS.So if need to implement some functionality which is already provided by a built in filter we can use it instead of defining a custom filter.

Currency
We use the currency filter to format a number as currency.We use this filter as

{{ expression | Currency }}

If the expression value is 100 then it is formatted as $100.00

Number
Number filter formats the value as number.We can specify the decimal places we want to include in the number

{{expression|number:decimalPlaces}}

UpperCase and Lowercase string filters
As their name implies uppercase and lowercase filters converts a string to uppercase and lowercase respectively

{{expression|uppercase}}
{{expression|lowercase}}

Filtering and Sorting
These filters apply to a list of items.To filter items from list of items we use the “filter” filter and specify the items to filter by as arguments.We use this filter as

list|filter:search

Search is the argument we provide which specifies the value we want to search in the list.

To sort the list items we use the orderBy filter.We specify the value we want to order-by by specifying the argument to the orderBy filter.

list|orderBy:'value'

Following example uses the some of the built in filters:

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.filter('makeUppercase', function () {
return function (item,st) {
return item.toLowerCase().substr(st, 4);;
};
});

app.controller('Ctrl',['$scope', function ($scope) {
$scope.message = 'Hello AngularJS';
$scope.numericValue = '100';
$scope.students=[
{name:'John',standard:'09'},
{name:'Mark',standard:'12'},
{name:'Frank',standard:'10'},
];
$scope.search={name:'John',standard:'09'};

}]);

</script>

<body>

<div ng-app="app" ng-controller="Ctrl">
<h1>{{message|makeUppercase:1}}</h1>
<h1>{{message|uppercase}}</h1>
<h1>{{message|lowercase}}</h1>
<h1>{{numericValue|currency}}</h1>
<h1>{{numericValue|number:4}}</h1>
<div ng-repeat="student in students|filter:search|orderBy:'standard'">
{{student.name}}
</div>
</div>

</body>
</html>

running the above example displays the following page

Defining a custom filter

If we require some functionality which is not provided by the built in filters then we can define custom filter.We define a custom filter as

var app = angular.module('app', []);
app.filter('FilterName', function () {
return function (arguments) {
//filter body
};
});

To define the filter we call the filter function of the angular module and pass a function.This function in turn returns a function which is the actual filter function.
We can also specify the parameters in the filter function.First parameter in the parameter list represents the data on which the transformation is to be
applied.Remaining parameters represents the extra arguments which are accepted by the filter.

Following example defines a filter called convertToUppercase.In the filter function on line 2 we are returning a function which defines the filter

app.filter('convertToUppercase', function () {
return function (item,st) {
return item.toLowerCase();
};
});

The above example is just for understanding about how to define a filter since a similar function is already provided by AngularJS called uppercase.

This was just a basic introduction to Filters in AngularJS. Filters can be used for different data transformation scenarios.For more complex scenarios we can use a chain of multiple filters.

ashish shukla

Follow on:

Controller in AngularJS

February 22, 2015 by ashish shukla 2 Comments

AngularJS framework is based on the Model View Controller architectural pattern for creating Rich Internet Applications.Controller is an important component of any AngularJS application.Controller in AngularJS acts as a glue between the model and the view and has the following important responsibilities:

• Define the model object which can be accessed from the view
• Define the business logic of our application

View is a template whose responsibility is just rendering the model using the data bindings.The model object state and behaviour is defined by the controller.

Controller is defined using a javascript constructor function.This function is passed a $scope object.We set the state of the $scope object inside the controller by setting values on the $scope object.These property values on the $scope object represent our Model which is accessible from the view template.

We attach the controller to the DOM element using the ng-controller directive.Setting the ng-controller directive on a DOM element creates a new controller object using the controller constructor function.We can then access the $scope object properties from the view.

Though we can define the controller function directly but defining it as part of a module helps to keep the code organized.In the following example we are creating a controller as part of a module and then attaching it to a view.

1.Create a module

First we need to create a Angular module using the angular object.We will name our module myApp

The module object defines the scope of the angularjs application and also contains useful functions for performing various tasks.One such function is the controller function which creates a controller object.$scope is an object which is automatically passed by the angular framework using dependency injection.AngularJS has inbuilt support for Dependency Injection which is used to pass the required dependencies.

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

2. Create controller using the module object

Once we have a module object we create a controller using the controller() function of the angular module.We need to assign this controller to the view using the ng-controller directive

 myApp.controller('TestController', ['$scope', function($scope) {
//method body
}]);

We are passing the second argument [‘$scope’ to indicate that our controller function depends on the $scope object

3. Set state on the $scope object inside the controller

$scope is the object to which we assign the model object. We assign the Message property to the $scope object.$scope object is passed by the framework to the controller function.

myApp.controller('TestController', ['$scope', function($scope) {
 $scope.Message= 'Hello world!';
}]);

4.Attach the view to the controller

To associate our view to the controller we assign the value TestController to the ng-controller directive of the div.We also set the ng-app directive as our module on this div ,this will limit the scope of our angular application to the div.

<div ng-app="myApp" ng-controller="TestController">
{{Message()}}
</div>

Inside the div we are accessing the $scope.Message property using a javascript expression.

Defining Behaviour

In the above example we have defined the state on the $scope object.Similarly we can also define behaviour on the $scope object.We define behaviour using a function and then attach it to the $scope object, in the same way we define state using properties.

myApp.controller('TestController', ['$scope', function($scope) {
 $scope.Message= 'Hello world!';
 $scope.SetDate = function() {
   var date = new Date();
   return date.toUTCString();
    }
}]);

We call the SetDate() function from the view using the javascript expression syntax

<div ng-app="myApp" ng-controller="TestController">
Date {{SetDate()}}
</div>

Above we are calling the SetDate() using a javascript expression.Usually we need to call a function on button click event,we can call a function defined on the $scope object using ng-click directive.

<button ng-click="SetDate()">SetDate</button>
<div>{{Date}}</div>

In the above example we are calling the SetDate() method on a button click.Instead of returning a date from the controller function we are now assigning it to the Date property.Using $scope object is the proper way to set state instead of directly calling a function from the view.

$scope.SetDate = function() {
   var date = new Date();
   $scope.Date=date.toUTCString();
    }

ashish shukla

Follow on:

Beginning AngularJS

February 15, 2015 by ashish shukla Leave a Comment

When developing web applications HTML is the main markup language irrespective of other web development technologies such as ASP.NET .HTML is a declarative language designed for describing the documents which can be rendered by a browser.

The web applications of today are much more than a group of static documents.Today the web applications are completely dynamic ,this means that the UI needs to be updated immediately in response to the user actions.In contrast HTML is designed for displaying static documents.

This difference between HTML and the web applications of today is also because of the latest changes in web development technologies.HTML’s main objective is displaying static documents ,its not suitable for developing rich UI applications in which client is expected to provide more fluid user experience.

This difference between rich User Interface and HTML leads to the developer manipulating the DOM programmatically. So for creating a rich user interface developer needs to perform the following tasks ,whenever user interacts with our application

Make an ajax call to the server
Format the return data if required in the required format
Manipulate the HTML DOM to render the returned data.

These are the common tasks which needs to be performed again and again in any rich UI application.So instead of performing these tasks manually wouldn’t it be nice if we can use a framework these tasks ? This is where frameworks such as AngularJS are used.

AngularJS is a javascript framework for creating web applications which provides a rich user interface similar to a desktop application.These types of applications are known as Single Page Applications.

In a SPA application the web page is never reloaded. In the initial request the HTML,javascript and other client resources are sent in the request. As the user interacts with the application data fetched is from the server ,this client server interaction happens asynchronously behind the scenes.Because of this it provides a user experience similar to a desktop application.

In a SPA application all the required HTML,javascript and the CSS are loaded on the first page load and a request is made to the server only for fetching the necessary resources such as the data.As the user interacts with a single page rather than different pages hence it is called Single Page Application.

As most of the application logic is moved from the server to the client ,client side frameworks such as AngularJS have an important role in SPA applications.

AngularJS applications are structured using the MVC pattern,application is structured into Mode,View and the Controller.

Model Model is typically a javascript object and is populated by retrieving values from the server.If our model grows in complexity we can create model using factories so that the task of creating model object is separated from the controller.If we have a simple model object we can directly define the model object using javascript in controller.The data for the model object is typically retrieved from the web server.
To bind the input element in the view to our model we can use the ng-model directive on the element e.g ng-mode=”model name”

View View is just a HTML template which renders the model. Views in AngularJS are created by extending the HTML with directives. AngularJS directives are just HTML attributes with prefix ng- .These directives gives special instructions to the angular application about processing the HTML elements.

Some of the commonly used directives in angular are

ngApp Defines the scope of the angular application
ngController A controller object is created using the controller function .In the controller function we set the state and behaviour of $scope.
ngBind This directive is used set the text content of the HTML element with the value of the ng-Bind expression
ngModel Binds the property of $scope to the HTML element
ng-Repeat Creates a template for each item in a collection.We can use ng-Repeat as

<div ng-repeat=”item in Collection”>
<div>item</div>
</div>

Controller Controller is the component which binds the model to the view.Controller is AnguarJS has two impoartant uses

Sets the Model for the view
Contains the business logic

It’s a function which is automatically passed a $scope parameter.$scope parameter sets the model for the view.View can access this $scope object to render the model.

If our model grows in complexity we can create model using factories so that the task of creating model object is separated from the controller.If we have a simple model object we can directly define the model object using java script in controller.The data for the model object is typically retrieved from the web server.
To bind the input element to our model we can use the ng-model directive on the element as ng-mode=”model name”

Model binding in Angularjs is two way ,the changes in UI are automatically updated in the view and when the user updates the view changes are reflected in the model.This is a big benefit since we don’t need to sync the data between the model and the view. Data binding expressions have the syntax as {{expression}} and we can insert the expression in html wherever we want to display the value of the model data.

In the following example we are consuming the model data using both the data binding {{expression}} and the ng-model directive

<body ng-app >
<form name="myForm" ng-controller="employeeController">
<span> <b>Employee Details</b></span>
<table>
<tr> <td>Id: {{Id}}</td> <tr>
<tr> <td>Name: {{EmployeeName}}</td> <tr>
<tr> <td>Address: {{Address}}</td> <tr>
<tr> <td> EmpoymentType<input ng-model="EmpoymentType"></input> </td> <tr>
</table>
</form>
</body>

We can define a controller as a function.The controller function is passed a $scope object explicitly.To set the model values for the view defined above we can use the following controller function.To begin using AngularJS library we just need to reference the angular.min.js file.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
function employeeController($scope) {
$scope.Id = "1";
$scope.EmployeeName = "SuperUser";
$scope.Address = "Address1";
$scope.EmpoymentType = "Permanent";
}
</script>

If we run the above application we get the following page

AngularJS has become quite popular in the last few years as a framework for developing Single Page Applications.There are other popular frameworks for developing Single Page applications such as DurandalJS ,Ember.js. Advantage of AngularJS is that we can use our existing knowledge of HTML and use directives to extend it instead of learning a totally new syntax.Directives are just HTML attributes which we apply to different HTML elements.

Using AngularJS in our web applications provides better user experience as the UI can be updated without making a round trip to the server.

ashish shukla

Follow on: