Our Blog

amrita technologies image 1

Animating Angular Js app with ng Animate

AngularJS is a superheroic JavaScript framework which makes creating Single Page Applications (SPA) very easy. On top of that AngularJS comes with a handful of angular modules that can be used to create an awesome user experience. In this post we are going to see how to use popular ngAnimate to add page transitions/animations to angular views.

ngAnimate can be used with various directives like ngRepeat, ngView, ngInclude, ngIf, ngMessage etc.

In this post we will use animations with ngView

Here we are using Brackets IDE from Adobe, but  you are free to use others, for example, Sublime Text, WebStorm from JetBrains etc.

Single-page application (or SPA) are applications that are accessed via a web browser like other websites but offer more dynamic interactions resembling native mobile and desktop apps. The most notable difference between a regular website and SPA is the reduced amount of page refreshes. SPAs have a heavier usage of AJAX- a way to communicate with back-end servers without doing a full page refresh to get data loaded into our application. As a result, the process of rendering pages happens mostly on the client-side.

Single Page Application - Angular Tutorial - EdurekaFigure: Angular Tutorial – Single Page Application

For example, if you go through Gmail, you will notice that while opening mail from the inbox will only fetch the email and display it in place of the e-mail list. The rest of the components like sidebar, navigation bar etc. are not reloaded. It only refreshes the DOM (Document Object Model) for the required section. So, this reduces the overhead loading of the website. 

Angular Features

Angular Features - Angular Tutorial - Edureka

Figure: Angular Tutorial – Angular Features

Cross Platform

  • Progressive web apps

It uses modern web platform capabilities to deliver an app-like experience. It gives high performance, offline, and zero-step installation. So, working with Angular is pretty much easy.

  • Native

You can build native mobile apps with strategies using Ionic Framework, NativeScript, and React Native.

  • Desktop

Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you’ve learned for the web plus.

Speed and Performance

  • Code generation

Angular turns your templates into code that’s highly optimized for JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

  • Universal

You can use any technology with Angular for serving the application like node.js, .NET, PHP and other servers. 

  • Code splitting

Angular apps load quickly with the new Component Router, which delivers automatic code-splitting, so users only load code required to render the view they request.


  • Templates

Quickly create UI views with simple and powerful template syntax.

  • Angular CLI

Command line tools: You can easily and quickly start building components, adding components, testing them, and then, instantly deploy them using Angular CLI.

  • IDEs

Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs like Microsoft’s VS Code.

Full Development Story

  • Testing

With Karma for unit tests, you can identify your mistake on the fly and Protractor makes your scenario tests run faster and in a stable manner.

Building Blocks of Angular

The main building blocks of Angular are:

  • Modules
  • Components
  • Templates
  • Metadata
  • Data binding
  • Directives
  • Services
  • Dependency injection

Architecture - Angular Tutorial - Edureka

Figure: Angular Tutorial – Architecture

Next, in our Angular Tutorial, let us talk about each of them in detail. Let us first understand, what are modules?


Angular apps are modular and to maintain modularity, we have Angular modules or you can say NgModules. Every Angular app contains at least one Angular module, i.e. the root module. Generally, it is named asAppModule. The root module can be the only module in a small application. While most of the apps have multiple modules. You can say, a module is a cohesive block of code with a related set of capabilities which have a specific application domain or a workflow. Any angular module is a class with @NgModule decorator.

Decorators are functions that modify JavaScript classes. Decorators are basically used for attaching metadata to classes so that, it knows the configuration of those classes and how they should work. NgModule is a decorator function that takes metadata object whose properties describe the module. The properties are:

  • declarations: The classes that are related to views and it belong to this module. There are three classes of Angular that can contain view: components, directives and pipes. We will talk about them in a while.
  • exports: The classes that should be accessible to the components of other modules.
  • imports: Modules whose classes are needed by the component of this module.
  • providers: Services present in one of the modules which is to be used in the other modules or components. Once a service is included in the providers it becomes accessible in all parts of that application
  • bootstrap: The root component which is the main view of the application. This root module only has this property and it indicates the component that is to be bootstrapped.

Data Binding

If you are not using a framework, you have to push data values into the HTML controls and turn user responses into some actions and value updates. Writing such push/pull logic is tedious, error-prone, and a nightmare to read. Angular supports data binding, a mechanism for coordinating parts of a template with parts of a component. You should add binding markup to the template HTML to tell Angular how to connect both sides.

Data Binding - Angular Tutorial - Edureka

Figure: Angular Tutorial – Data Binding


Copyright © 2018 Caribou Media. All Rights reserved.