Search within TutorialsPark

AngularJS CSS Animation


Learn how to use AngularJS Promise Service


AngularJS Promise Service

AngularJS Promise API is a new standard, it essentially represents a value that may not be available now, but one that will be resolved at some time in future.

A Promise requires two objects:

1. promise object : To Get notifications about the future outcomes.

2. deffered object : To Send Notifications

Think of promise as a special event, here the deffered object is used to send events using promise objects about the result of some task in the future

A Promise simply represents pending state, a promise made can either be fulfilled or rejected in the future.

angularjs promise

AngularJS Promise Service : Manage Promises using $q Service

AngularJS service $q is used to get and manage promises, the Methods defined by the $q service are as below

Table: AngularJS Methods Defined by $q Service

Name Description
all(promises) To return a promise that gets resolved when all of the promises within the specified array get resolved or any of them gets rejected.
defer() To Create a Deferred Object.
reject(reason) To return a promise that always gets rejected.
when(value) To wrap a value in a promise that is resolved always, with a specified value as result.

AngularJS Promise Service : Receiving and Using Deferred Object

Table: AngularJS Methods Defined by $q Service

Name Description
resolve(result) To Denote that the deferred activity has been completed with the specified value.
reject(reason) To Denote that the deferred activity has failed won't be completed in future with reasons.
notify(result) To return an interim result from the deferred activity
promise To Return a promise object to recieve signals from other methods

Example : AngularJS CSS Animation ngRepeat

Give it a TRY! » Note: Everytime a new element is generated, it appears with 5sec transition delay

AngularJS Animation : Using Directive ngIf

In the demo, CSS animation classes are added when the event enter of directive ngIf is triggered.

Example : AngularJS CSS Animation ng-if

Give it a TRY! » Note: The content is shown with the animation

AngularJS Animation : Using Directive ngHide

In the demo, CSS animation classes are added when the event hide of directive ngHide is triggered.

Example : AngularJS CSS Animation ngHide

Give it a TRY! » Note: The image is show and hidden with the fade-in animation and transition delay

AngularJS Animation : Using Directive ngClass

In the demo, CSS animation classes are added when the event add-class of directive ngRepeat is triggered.

Example : AngularJS CSS Animation ngClass

Give it a TRY! » Note: Animation is applied when class is applied