A Comprehensive Guide To Animating ng-view in AngularJS

3

AngularJS is one of the most sophisticated web app framework that delivers superlative single-page applications. It is commonly known as Angular and possesses a client-side MVC (Model View Controller) architecture that augments the development and testing of single-page applications. It, thus, facilitates developers to create an impressive look and feel like that of a native mobile app.
In fact, if you want to make your app appear more native, you can also integrate animations and transitions by implementing the ngAnimate module in Angular.

ngAnimate: A Foreword

Angular
Angular

This module allows developers to generate effective and intuitive applications without getting deep into complex coding. It basically adds and removes the CSS classes to different Angular directives upon leaving or entering the view.
For instance, if we want to display some animation upon entering the view, we will need to apply a suitable CSS animation to the .ng-enter class, which will be triggered in the ng-view upon uploading a site.
Now, without any further ado, let’s ponder into the complete guide to animate ng-view.
In this tutorial, I will be integrating animations in my single page app to represent the page change. For this, I will implement the ngAnimate to represent page transitions, CSS Animations to beautify all the pages, and ngRoute for page routing.

For this application, I will be creating six files, including index.html, styling.css, application.js, page-home.html, about_page.html, and contact_page.html. The page-home.html file, about_page.html file and contact_page.html file, altogether contribute to the view of different pages of the application. Let’s look into each file one by one.

1. index.html

HTML code

In this html file, all the requisite resources are required to be uploaded. I have included Bootstrap to style the app, and the AngularJS, ngAnimate and ngRoute to support animation.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
        <link rel="stylesheet" href="styling.css">

        <!-- load angular, ngRoute, ngAnimate -->
        <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
        <script src="application.js"></script>
    </head>
    <body ng-app="animate_app">
        <div class="page {{ pageClass }}" ng-view></div>

    </body>
</html>

2. application.js

In this JavaScript file, you can create a desired Angular application. Here, I have created the app while integrating the routing, since, it allows one to change pages without refreshing a page.

var animate_app = angular.module('animate_app', ['ngRoute', 'ngAnimate']);
animate_app.config(function($route_Provider) {
    $route_Provider.when('/', {
        templateUrl: 'page-home.html',
        controller: 'mainController'
    }).when('/about', {
        templateUrl: 'about_page.html',
        controller: 'aboutController'
    }).when('/contact', {
        templateUrl: 'contact_page.html',
        controller: 'contactController'
    });
});

// CONTROLLERS =========================================
animate_app.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
});
animate_app.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
});
animate_app.controller('contactController', function($scope) {
    $scope.pageClass = 'page-contact';
});

In the above mentioned code snippet, I have created the Angular application by defining the routing and controllers. Since, there are three pages in this application, thus, three Controllers have been created. Each Controller possesses its own variable of the pageClass, therefore each page will have a different class. This allows one to define different animations and effects for each specific page.

3. View Files

The view of three pages of the application will be defined. I have simply included a few lines of text, however, you can display whatever you like to. The Angular routing will inject all these pages in the index.html file.

<!-- home.html -->

<h1>Angular Animations</h1>
<h2>Home</h2>

<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- page.html -->

<h1>Animating Pages Is Fun</h1>
<h2>About</h2>
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- contact_page.html -->

<h1>Tons of Animations</h1> 
<h2>Contact</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>

This will create a simple Angular application with three pages. Now, let’s get to the meat and look how animation can be integrated on these pages.

4. styling.css

This file will cover the interesting animation section. Since, the ngAnimate module has been already included in the index.html file, we can seamlessly practice CSS animations on the pages, while considering the actions like leaving or entering a page. The ngAnimate module will integrate two classes in the ng-view, and these are .ng-enter and .ng-leave.
To enhance the look and feel of all the three pages with basic styling, you can use the following code. This will simply add some spacing and colors to the pages.

.page        {
    bottom:0; 
    padding-top:400px;
    position:absolute; 
    text-align:left;
    top:0;  
    width:70%; 
}

.page h1    { font-size:50px; }
.page a     { margin-top:40px; }

/* PAGES (specific colors for each page)============*/
.page_home      { background:#00D1BD; color:#13907c; }
.page_about     { background:#E59420; color:#a55414; }
.page_contact   { background:#ffa5bb; color:#9f0000; }

Now, since each page will have its very own ng-enter and ng-leave animation, we have two options available. You can either choose to apply six different animations that can be triggered while leaving and entering each page or apply only two animations upon entering and leaving the pages.
There are different types of animations that can be applied in Angular apps. The below mentioned code snippet will define different types of animations for emerging and disappearing in a different fashion like rotating, sliding from the left or scaling up.

/* styling.css */
...

/* ANIMATIONS================================= */

@keyframes rotateFall {
    0%      { transform: rotateZ(0deg); }
    20%     { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40%     { transform: rotateZ(17deg); }
    60%     { transform: rotateZ(16deg); }
    100%    { transform: translateY(100%) rotateZ(17deg); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

@keyframes rotateOutNewspaper {
    to      { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

@keyframes scaleUp {
    from    { opacity: 0.5; -webkit-transform: scale(0.5); }
}

@keyframes slideInRight {
    from    { transform:translateX(100%); }
    to      { transform: translateX(0); }
}

@keyframes slideInUp {
    from    { transform:translateY(100%); }
    to      { transform: translateY(0); }
}

There are two ways to apply animation to the pages.

1. Same animation for all the pages

With this approach, you can apply only two types of animations, one for leaving pages and another for entering pages. This can be done by simply adding the below mentioned few lines of code in the CSS file.

.ng-enter {
    animation: scaleUp 0.8s both ease-in;
    z-index: 5555;
}
.ng-leave {
    animation: slideOutLeft 0.7s both ease-in;
    z-index: 6666;
}

To ensure that page leaving and entering animation doesn’t get messed up, here, z-index has been used. This will help deliver a smooth performance and beautiful effects.

2. Different animation for all the pages

This approach will help create different animations upon entering of each page and leaving of each page. Therefore, here six animations will be implemented.

.ng-enter {
    z-index: 5555;
}
.ng-leave {
    z-index: 6666;
}
.page-home.ng-enter {
    animation: scaleUp 0.8s both ease-in;
 }
.page-home.ng-leave {
    transform-origin: 0% 0%;
    animation: rotateFall 1s both ease-in;
}
.page-about.ng-enter {
    animation: slideInRight 0.8s both ease-in;
}
.page-about.ng-leave {
    animation: slideOutLeft 0.7s both ease-in;
}
.page-contact.ng-leave {
    transform-origin: 40% 40%;
    animation: rotateOutNewspaper .8s both ease-in;
}
.page-contact.ng-enter {
    animation: slideInUp 0.7s both ease-in;
}
...

In the aforementioned code, I have simply used the Angular controllers for each page. Since, each controller has a pageClass that has been applied to ng-view, it allows one to call a specific page and apply a desired animation.

This guide offers a great way to implement animations in an Angular application via ngAnimation module. By using this tutorial, you can showcase beautiful transitions and animations while leaving and entering a page via the ng-view, to make your app appear more visually appealing and native.

Written by Victoria Brinsley

Victoria Brinsley is a veteran Android app developer for Appsted Ltd – a reputed mobile application development services. You can explore more about the related services and processes as well, by getting her best assistance.

Website: http://www.appsted.com/

Related Posts

How to Write Themeable Mobile Apps with Ionic

How to Write Themeable Mobile Apps with Ionic

HTML5 Offline Mobile App Using Ionic and PouchDB

HTML5 Offline Mobile App Using Ionic and PouchDB

3 thoughts on “A Comprehensive Guide To Animating ng-view in AngularJS”

  3. two question please :
    1. The next page is opened before the previous page finishes the ng-leave
    2. when ng-enter it doesn't slide over the next page, it just slide with a blank page behind it. is it normal ?

    Thanks

Comments are closed.