Tuesday, June 30, 2015

Dynamic filter using AngularJS filter

In the post AngularJS filter, we saw on how to use filters to define a static filter in an array of elements, we can further enhance this by binding the filter text to a textbox control to create a dynamic filter.

In the following example a ng-repeat directive is used to display a list of employees, txtSearch is a textbox which is bound as the filter condition for the list, now as the user types some text in the textbox, the list will get filtered based on the text entered.
<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
        <script>
                function searchController($scope){
                       $scope.Reset = function() {
                                       $scope.txtSearch = '';
                             }
                }
    </script>
</head>
<body>
          <div ng-controller="searchController" ng-init="Employees=[
                                      {id:1,Name:'Tom'},
                                      {id:2,Name:'Harry'},
                                      {id:3,Name:'Peter'},
                                      {id:4,Name:'Thomas'},
                                      {id:5,Name:'Tiger'},
                                      {id:6,Name:'Topas'}]">
                    Search Text: <input type="text" ng-model="txtSearch"> 
                    <button ng-click="Reset()">Clear</button>
                    <ul>
                       <li ng-repeat="emp in Employees | filter:txtSearch">
                         {{ emp.id }} - {{ emp.Name }}<br/>
                       </li>
                   </ul>
          </div>
</body>
</html>

Output:



AngularJS filter

AngularJS filter, is a special type of filter which can be used to filter out the contents of an array/collection bound to an ng-repeat directive, this comes in handy when we need to implement dynamic search/filtering capability on an array/collection of elements

The following is the syntax for using AngularJS filter
ng-repeat="<array/collection> | filter:<filter text>"

The following is an example of using filter, filter out specific elements from an array of objects.

AngularJS date Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The date filter is used to format date values.

The following is the syntax for using date filters
{{ <date variable> | date: '<date format>' }}

The following is an example of using date filters.

Monday, June 29, 2015

AngularJS orderby Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The orderby filter is used to sort a list of elements in an array / collection, this comes in handy when we want to implement sorting feature in a table/list in the view.

The following is the syntax for using orderby filters
<li ng-repeat="<collection> | orderBy:'<column>'">

The following is an example of using orderby filters.

AngularJS currency Filter

AngularJS filters are used to format/transform the data displayed in the view, filters can be used with expressions, ng-bind, ng-repeat etc and act upon the data from the model. The currency filter is used to format currency format display in the view

The following is the syntax for using currency filters
{{ 
<variable> | currency }}

The following is an example of using currency filters.

What are AngularJS Filters?

Filters in AngularJS are used to format/modify/transform the data displayed in the view, filters are used with expressions and directives like ng-bind, ng-repeat etc which are used to display model data in the view.  Filters are come in handy and can help us reduce lot of string manipulation when used in the right places.

Filters are prefixed by a | symbol, after the model object/variable, the following is the syntax to use filters with expressions.

Saturday, June 27, 2015

AngularJS Expressions Overview

AngularJS Expressions using Arrays

In the previous posts we saw AngularJS expressions with string, numbers and Objects, in this post we shall see on how to use AngularJS expressions involving arrays.

AngularJS Expressions using String and Numbers


AngularJS Expressions using Objects


This comes in handy when we want to display a list of values, especially while using MVC pattern if we want to display a list/table of values we can get them in an array and use the array in ng-repeat to iterate through each element in the array.

In the following example we shall see on how to use arrays and display the content of the arrays using expressions in the view.

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
          <div ng-init="Employees=[
                                      {id:1,Name:'Tom'},
                                      {id:2,Name:'Harry'},
                                      {id:3,Name:'Peter'}]">
                    <ul>
                       <li ng-repeat="emp in Employees">
                         {{ emp.id }} - {{ emp.Name }}<br/>
                       </li>
                   </ul>
          </div>
</body>
</html>

Output:


Friday, June 26, 2015

AngularJS Expressions using Objects

In the post AngularJS Expressions using String and Numbers, we saw on how to use simple string and numbers in expressions, we can also create complex objects and use them in expressions, this becomes more handy when we want to implement MVC pattern using AngularJS, we can define model objects and use them in the View layer to display model object properties.

The following example shows how to use Objects in Expressions

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
          <div ng-init="Employee={name:'John',age:25,dob:'01-01-1990'}">
                   <p>Name :<b> {{ Employee.name }} </b></p>
                   <p>Age :<b> {{ Employee.age }} </b></p>
                   <p>DOB :<b> {{ Employee.dob }} </b></p>
          </div>
</body>
</html>

Output:


AngularJS Expressions using String and Numbers

Expressions in AngularJS can operate on different types of variables / model properties, the evaluation of expressions vary based on the type of variable / property on which the expressions is evaluated.

For example an expression with 2 numbers and a + operator adds the values of the 2 numbers while evaluating the expressions. The same + operator when used with 2 string will do a string concatenation.

The following example shows how to use expressions with numbers and strings

What are AngularJS Expressions?

Expressions in AngularJS are a quick way to add dynamic content from the model objects / variables to the HTML view, expressions can evaluate multiple variables / model properties using operators and display the evaluated result in the view.

Expressions are a short form of ng-bind, they provide the ability to do one-way data binding between the model and the view.

Expressions are enclosed within a couple of flower braces in the HTML view. Following is the Syntax for Expressions

Thursday, June 25, 2015

AngularJS Binding Overview

Binding model object to Dropdown list

In the post ng-bind directive we saw on how to bind values to simple textbox elements, in this example we shall see on how to bind a list of values to a drop down control.

<html ng-app="bindApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
var app = angular.module('bindApp', []);

function bindController($scope) {
    $scope.myLanguages = [
                             {
                                      "code": "en",
                                      "name": "English"
                             },
                             {
                                      "code": "de",
                                      "name": "German"
                             }];
};
</script>
</head>
<body>
          <div ng-controller="bindController">
                   <select
                             ng-model="myLanguage"
                             ng-options="value.code as value.name for value in myLanguages">
                             <option>--</option>
                   </select>
                   <div>
                             Selected Language: {{myLanguage}}
                   </div>
          </div>
</body>
</html>

Output

ng-non-bindable directive

The ng-non-bindable directive is used to remove binding for a specific portion of the page, the div/panel which is marked with this directive will not bind any values from the model.
The following example shows the usage of ng-non-bindable directive

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
          <div ng-init="Name='FirstName, LastName'" ng-non-bindable>
                   Your Name is: {{Name}}
          </div>
</body>
</html>

Output without the ng-non-bindable directive in the div tag


Output with the ng-non-bindable directive in the div tag


ng-bind-template directive

The ng-bind-template directive is similar to the ng-bind directive, the ng-bind directive supports binding for only one variable / property from the model, while the ng-bind-template directive can bind more than one model variable / property in a single template.

The ng-bind directive provides one way binding between the model and the View, and changes made in the view will not be reflected in the model. The ng-bind-template achieves the same in addition supports binding multiple value at once.

The below example shows a simple implementation of ng-bind-template to achieve one way data binding between the model and the view using multiple values.

Wednesday, June 24, 2015

Two way data binding in AngularJS

AngularJS supports both one-way and two-way data binding between the model and the view, depending on the need one can use any one of these bindings. As the name suggests two-way data binding is bidirectional, the data from the model is bound to the view and any changes made in the view are reflected back in the model. The ng-model directive enables two-way data binding

The core functionality of ng-model directive is to provides data binding between the model and the view in AngularJS. The ng-bind directive additionally provides validation, state management functionality.

The below example provides a basic implementation of data binding using ng-model

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
          <div ng-init="Name='FirstName, LastName'">
                   Enter Name: <input type="text" ng-model="Name"><br/><br/>
                   Your Name is :{{Name}}
          </div>
</body>
</html>

Output



When the user changes the text in the text box, it automatically reflects in the label.


One way data binding in AngularJS

AngularJS supports both one-way and two-way data binding between the model and the view, depending on the need one can use any one of these bindings. As the name suggests one-way data binding is unidirectional the data from the model is bound to the view and not vice versa. The ng-bind directive enables one-way data binding

The ng-bind directive provides one way binding between the model and the View, and changes made in the view will not be reflected in the model. The ng-bind directive is similar to using expressions {{ expression }} in AngularJS.

The below example shows a simple implementation of ng-bind to achieve one way data binding between the model and the view.

Role of $scope in Data Binding

The $scope object is the default model object provided by AngularJS, the $scope acts as the model between the controller and the view layers.

The $scope is a JavaScript object which binds the controller and the view in an AngularJS MVC application. Both the controller and the view can access the $scope object, 2 way binding between the model and view is enabled using the $scope object.

In complex applications where we have the view and controller in different files we explicitly use the $scope object in the view to refer to the properties and methods defined in the model object.

The below example demonstrated the use of $scope object to bind between the model and the view.

What is Data Binding in AngularJS?

Data binding is the feature by which the data from the model is bound to the View in an MVC (Model View Controller) representation, the Controller controls the way the model is bound to the view. AngularJS supports MVC pattern and allows binding model data to the view layer.

AngularJS Service Overview

Tuesday, June 23, 2015

AngularJS Service vs Factory

Form a normal usage perspective both the Service and Factory provide the same functionality, both Service and Factory are Singleton, however there are few differences between the two, let us see on how they differ.

When we invoke a service it returns an instance (object representation) of the function, which is more like initializing the object with new and returning the instance.

When we invoke a factory it returns a class representation of the function, the calling Function/Controller can initiate the response (new). Following is the Syntax for Service and Factory

AngularJS Factory

The Factory implementation in AngularJS is similar to Service, the difference is that factory allows us to define our own objects and return them to the calling controller through the factory methods.

The following example shows how to define and use a factory services in AngularJS

AngularJS Service

AngularJS services can be considered as re-usable utility classes / functions which are defined once and can be accessed anywhere in the application. Services enable modular and re-usability while designing complex applications in AngularJS.

The following example shows how to define and use a service in AngularJS

Tuesday, June 16, 2015

Types of AngularJS Services

As we saw in the previous posts AngularJS services are singleton objects / functions which are defined once and re-used throughout the application.

AngularJS provides a pre-defined set of services which we can reference in our controller and use the methods in the services, the pre-defined services are always pre-fixed with a $ symbol.  $http, $window, $routeProvider etc are some of the pre-defined services provided by AngularJS.

AngularJS also allows us to define our own services and use them in the controllers and views, we can create the following 3 types of custom services in AngularJS

AngularJS pre-defined services

AngularJS provides a set of pre-defined services, which can be used in any controller by referencing the services. All predefined services are pre-fixed with a $ symbol.

$http, $window, $routeProvider etc are some of the pre-defined services provided by AngularJS. To use these services in a controller we should refer to them while defining the controller, in the following controller example we shall use the $scope and $http service.

Advantages of AngularJS Services

AngularJS Services are re-usable unit for code/functions which can use used across the application, the following are the advantages of using services.

What are AngularJS Services?

AngularJS services can be considered as re-usable utility classes / functions which are defined once and can be accessed anywhere in the application. Services enable modular and re-usability while designing complex applications in AngularJS.

While designing complex AngularJS applications, re-usable code which can be used in more than one view/controller should be placed in the services this way we can avoid redundancy of the same code across different controllers and views.

Services are singleton objects or methods which perform a unit of task.

In the following posts we shall see in details about the advantages and types of services provided by AngularJS.