Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

AngularJS Filters

What is an AngularJS filter?

AngularJS filter formats the value of an expression (i.e. user entered value, database value, Input field value) for display to the user.

Filters can be used in view templates, controllers, services, you can create your own custom filters easily.

Filter Syntax:

{{expression | filter }}

Filters with Argument:

You can create filters with arguments if required, that is allowed by AngularJS.

Syntax:

{{ expression | filter:argument1:argument2:... }} 

Filter Chaining:

Filters can be applied to the result of another filter, called as “Chaining” filters.

Syntax:

{{ expression | filter1 | filter2 | ... }} 

Filter components provided by AngularJS

Following are some filter components provided by AngularJS

Sr.No.

Name

Description

1

filter

Select subset of elements from source array and create new array based on provided criteria.

2

orderby

Orders the array by the expression predicate, or specified expression criteria.

3

Number

Formats a number as text.

4

uppercase

Converts a text to upper case text.

5

lowercase

Converts a text to lower case text.

6

currency

Formats text in a currency format.

7

date

Formats date to a string based on the requested format.

8

limitTo

a.     Allows you to create new array or string containing only a specified number of elements.

b.     The array elements are considered either from beginning or end of source (array, string, numbers), specified by the value and sign (positive or negative) of limit.

c.      If you are using input filed then its value is converted into string.

9

json

Allows you to convert a JavaScript object into JSON string.

 


Example:

in following example i used below filters 

   a. filter 
   b. uppercase 
   c. lowercase 
   d. number 
   e. date 
   f. currency 

I will explain Jason and limitTo filters in separate tutorials with example. 

<body>
    <div ng-app="myApp" ng-controller="EmployeeController">
        Id: {{Employee.id}}
        <br />
        <!--lowercase filter -->
        User Name:{{Employee.userName | lowercase}}
 
        <br />
        <!--date filter -->
        Birth Date:{{Employee.BirthDate | date:'medium' }}
 
        <br />
        <!--number filter -->
        Package:{{Employee.Package | number }}
 
        <!--upparcase filter -->
        <br />
        Name:<span ng-bind="Employee.name | uppercase"></span>
 
        <p>Designation: {{Employee.Designation}}</p>
 
        <!--currency filter -->
 
        <p>Payment: {{Employee.Payment | currency}}</p>
 
        <!--orderBy filter -->
        <ul>
            <li data-ng-repeat="myObject in Employee.Projects | orderBy:'name'">id:{{myObject.id}} name:{{myObject.name}} Team Size:{{myObject.TeamSize}}</li>
        </ul>
 
        <!--filter data using filter component disply active and suspended projects accroding to search inputs-->
 
        <label>Search: <input type="checkbox" ng-model="Employee.Projects.isActive"></label>
        <ul>
            <li data-ng-repeat="myObject in Employee.Projects | filter:Employee.Projects.isActive">id:{{myObject.id}} name:{{myObject.name}} Team Size:{{myObject.TeamSize}}</li>
        </ul>
    </div>
 
    <script>
        var app = angular.module('myApp', []);
        var dateOut = new Date('1985-04-05 12:08:15.773');
        app.controller('EmployeeController', ['$scope', function ($scope) {
            $scope.Employee = {
                id: 1,
                userName:'sKendre;',
                name: 'Shourya Kendre',
                BirthDate: dateOut,
                Package:52503.30,
                Designation: 'Team Leader',
                Payment: 700,
                Projects: [
                    { id: 1, name: 'E shop', TeamSize: 5 ,isActive:true},
                    { id: 2, name: 'Employee Notifier', TeamSize: 3, isActive: true },
                    { id: 3, name: 'CRM', TeamSize: 10, isActive: false }
                ]
            };
        }]);
 
       
    </script>
</body>

Date formats filter supports following string formats

 a. medium: equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)

 b. short: equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM)

 c. fullDate: equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)

 d. longDate: equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)

 e. mediumDate: equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)

 f. shortDate: equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)

 g. mediumTime: equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM)

 h. shortTime: equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)

Syntax:

{{date_expression | date : format : timezone}}


In this post i explained AngularJS filters basic with sample example in separate post i will explain in Stateful filters and creating your own custom filters. 

Reference used:

https://angularjs.org

AngularJS Scope

What is scope in AngularJS?

Scope is a special JavaScript object that refers to the application model, you can consider this as a view model.

Scope objects Basic

Scope objects contain functionality and data that is used when rendering the view, reason Scopes are the source of truth for the application state.

Because of scope objects two-way automatic binding is possible in AngulaJS.

Scope features

1) Scopes provide APIs ($watch) to observe model changes.

2) Scopes provide APIs ($apply) to propagate model changes through the application as well as outside the system to other components associated (controllers, services, Angular event handlers).

3) Scopes can be nested in such a way that they can isolate functionality and model properties.

4)  Scopes provide context against which expressions are evaluated.

For example expression {{FirstName}}  is meaningless without scope which defines property “FirstName”.

Scope as Data-Model

Scope is the main communication gateway between application controller and the view.

During Template linking phase directive apply $watch expressions on scope then which allows the directive to render the updated value to the DOM.
<body>
 
    <div ng-app="myApp" ng-controller="MyController">
        Your name:
        <input type="text" ng-model="username">
        <button ng-click='DsiplayMessage()'>Show Message</button>
        <hr>
        {{WelcomeMessage}}
    </div>
    <script>
      
        angular.module('myApp', [])
        .controller('MyController', ['$scope', function ($scope) {
            $scope.username = 'Shourya Kendre';
 
            $scope.DisplayMessage = function () {
                $scope.WelcomeMessage = 'Welcome Mr. , '  + $scope.username + '!' + 'From , Team CodeChef4u';
            };
        }]);
    </script>
</body>

In the above example MyController assigns  “Shourya Kendre” to the username property of the scope. The scope then notifies the input of the assignment, which then renders the input with username pre-filled. This demonstrates how a controller can write data into the scope.

Similarly the controller can assign behavior to scope as seen by the DisplayMessage method, which is invoked when the user clicks on the button. The DisplayMessage method can read the username property and create a greeting property. This demonstrates that the properties on scope update automatically when they are bound to HTML input widgets

Scope Hierarchies:

Your angular app allows exactly only one root scope but you can add more child scopes in your application.

When new scopes are created they are added as children of their parent scope. This creates a tree structure which parallels the DOM where they're attached.

Example:

Root scope is available for entire application, in following example surname “Kendre” is in root scope and names are in child scope.

<div ng-app="myApp" >
        <!--root scope-->
        Surname: {{scopeName}}
        <div ng-controller="myCtrl">
            <ul>
                <!--child scopes-->
                Names <li ng-repeat="name in names">{{name}}</li>
            </ul>
        </div>
    </div>
 
    <script>
 
        var app = angular.module('myApp', []);
        app.run(function ($rootScope) {
            $rootScope.scopeName = 'Kendre';
        });
 
        app.controller('myCtrl', function ($scope) {
            $scope.names = ["Nagnath", "Aditya", "Ajay"];
        });
    </script>

 

Scope lifecycle:

Here I will try to explain sequence of actions performed with angularJS Scopes when we execute application.


1. Creation

When AngularApp page starts exaction during bootstrap process root scope is created by the $injector.

During template linking, some directives create new child scopes.

2. Watcher registration

During template linking, directives register watches on the scope. These watches will be used to propagate model values to the DOM.

3. Model mutation

For mutations to be properly observed, you should make them only within the scope.$apply(). Angular APIs do this implicitly, so no extra $apply call is needed when doing synchronous work in controllers, or asynchronous work with $http, $timeout or $interval services.

4. Mutation observation

At the end of $apply, Angular performs a $digest cycle on the root scope, which then propagates throughout all child scopes. During the $digest cycle, all $watched expressions or functions are checked for model mutation and if a mutation is detected, the $watch listener is called.

5. Scope destruction

This is concept like memory releasing or cleaning unused objects in classic C++ or C programming.

When child scopes are not required its responsibility of creater to destroy child scopes using

scope.$destroy() API.This will stop propagation of $digest calls into the child scope and allow for memory used by the child scope models to be reclaimed by the garbage collector.

Reference used:

Used angularjs.org developer guide docs.

Special thanks to aangularjs.org documentation team.

 

AngularJS Data Binding

Data binding is key advantage of AngularJS compared with other framework, here Data-binding is the automatic synchronization of data between the model and view components.

In angular model is source of application and view is projection of the model at all time, when the model changes, the view reflects the change, and vice versa.

Classic framework data binding and AngularJS data binding


AngularJS inbuilt directive used for data binding

ng-bind: Binds the vale to an HTML element.
ng-bind-template: Almost similar to the ng-bind directive but allows for multiple template.
ng-non-bindable: Declares a region of content for which data binding will be skipped.
ng-bind-html: Creates data bindings using the inner HTML property of an HTML element.
ng-model : allows a two-way data binding.

One way data binding

With one way data binding approach value is taken from model and inserted into an HTML element. There is no approach of update model from view.

Example:

Following example displays employee and employee project details taken from model.

<body>
    <div ng-app="myApp" ng-controller="EmployeeController">
    Id: {{Employee.id}}
    <br/>
    Name:<span ng-bind="Employee.name" ></span>
 
    <p>Designation: {{Employee.Designation}}</p>
         <ul>
            <li data-ng-repeat="myObject in Employee.Projects">id:{{myObject.id}} name:{{myObject.name}} Team Size:{{myObject.TeamSize}}</li>
        </ul>
    </div>
 
    <script>
        var app = angular.module('myApp', []);
        app.controller('EmployeeController', ['$scope'function ($scope) {
            $scope.Employee = {
                id: 1,
                name: 'Sankruti Kendre',
                Designation: 'Team Leader',
                Projects: [
                    { id: 1, name: 'E shop', TeamSize: 5 },
                    { id: 2, name: 'Employee Notifier', TeamSize: 3 },
                    { id: 3, name: 'CRM', TeamSize: 10 }
                ]
            };
        }]);
        </script>
</body>

Two way data Bindings

In two way data binding goes both ways, In simple language two-way data binding is when the model changes, the view reflects the change, and vice versa.

Example:

In the following example if the user changes the value inside the input field, the AngularJS property will also change its value.

 <body>
<div ng-app="myApp" ng-controller="myCtrl">
   Your Good Name: <input ng-model="name">
       Your good name is {{name}}
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl'function ($scope) {
        $scope.name = "Nagnath Kendre";
    });
</script>
 
</body>