Handling AngularJs and CSS3

We know how CSS helps a web page to boost up and beautify its appearence. Thinking of a attractive UI without CSS is impossible. On the other hand we know we can make rich data bound applications with AngularJS. Now what if we can use and handle css through AngularJS? This is what we are going to describe in this article.

We can make our own CSS or use some other libraries like bootstrap etc. to give a webpage better look. This can be achieved using AngularJS also. Here we will see how CSS and CSS animations can be used to make the behavior of built-in directives of AngularJS more attractive.

How to start

Angular sets these css classes which we know as directives. It is up to the application how they are used for beautiful styling.

  • ng-scope
  • ng-isolate-scope
  • ng-binding
  • ng-invalid, ng-valid
  • ng-pristine, ng-dirty
  • ng-touched, ng-untouched
  • Let’s see an example.

    index.html
    [javascript]

    <html ng-app="myApp">
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>

    <script type="text/javascript">
    var app=angular.module(‘myApp’, []);
    app.controller(‘mainController’,function($scope){
    var names=[‘John’,’Rob’,’David’];
    $scope.names=names;
    });
    </script>
    </head>
    <body>

    <div ng-controller="mainController">
    <input type="text" ng-model="search" placeholder="Search" class="search" />
    <ul>
    <li class="item" ng-repeat="name in names | filter : search">
    {{ name }}
    </li>
    </ul>
    </div>

    </body>
    </html>

    [/javascript]

    style.css

    [javascript]

    .ng-scope{
    box-shadow: 0px 0px 1px 1px #69f;
    }
    .ng-scope.item{
    background:red;
    color:white;
    }

    [/javascript]

    In the above example we are displaying a list of names and stylizing them. After running it we see borders have been colored with sky blue where .ng-scope is applicable and .item class with ng-scope is being displayed with red background and white font color. This is how we can make use of Angular CSS class. Now if we want do something different like CSS animation we can move on with Angular’s ngAnimate module.


     

    According to Angular the following directives are “animation aware”:

    Directive / Supported Animations

    ngRepeat – enter, leave and move
    ngView – enter and leave
    ngInclude – enter and leave
    ngSwitch – enter and leave
    ngIf – enter and leave
    ngClass – add and remove (the CSS class(es) present)
    ngShow & ngHide – add and remove (the ng-hide class value)
    form & ngModel – add and remove (dirty, pristine, valid, invalid & all other validations)
    ngMessages – add and remove (ng-active & ng-inactive)
    ngMessage – enter and leave

    To make use of CSS animations we need to include angular-animate.js and add the module as dependency. Let us proceed with the above example with little bit of changes.

    index.html
    [javascript]

    <html ng-app="myApp">
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.1/angular-animate.min.js"></script>

    <script type="text/javascript">
    var app=angular.module(‘myApp’, [‘ngAnimate’]);
    app.controller(‘mainController’,function($scope){
    var names=[‘John’,’Rob’,’David’];
    $scope.names=names;
    });
    </script>
    </head>
    <body>

    <div ng-controller="mainController">
    <input type="text" ng-model="search" placeholder="Search" class="search" />
    <ul>
    <li class="animate" ng-repeat="name in names | filter : search">
    {{ name }}
    </li>
    </ul>
    </div>

    </body>
    </html>

    [/javascript]

    style.css
    [javascript]

    .animate{
    border: 1px solid #d8d8d8;
    }
    .animate.ng-leave {
    background: red;
    transition: all 0.2s;
    color: white;
    }
    .animate.ng-enter{
    background: blue;
    transition: all 0.2s;
    color: white;
    }

    [/javascript]

    This example shows using of class based animation in AngularJs. When we run the code we see items are being red(background) and disapperaring whenever they are not included as the search result(i.e. .ng-leave) and after that when we clear search box they appear with blue background. When ngAnimate is animating an element it will apply the ng-animate CSS class to the element for the duration of the animation. This is a temporary CSS class and it will be removed once the animation is over (for both JavaScript and CSS-based animations). ng-animate CSS class is reserved and it cannot be applied on an element directly since ngAnimate will always remove the CSS class once an animation has completed.

    We can also make use of CSS Keyframes by referencing the keyframe animation within the starting CSS class. For example we will change our style.css a bit. Let’s have a look.

    style.css
    [javascript]

    .animate{
    border: 1px solid #d8d8d8;
    }
    .animate.ng-leave {
    background: red;
    color: white;
    animation: my_animation1 0.5s linear;
    }
    .animate.ng-enter{
    background: blue;
    color: white;
    animation: my_animation2 0.5s linear;
    }

    @keyframes my_animation1 {
    from { opacity:1; }
    to { opacity:0; }
    }
    @keyframes my_animation2 {
    from { opacity:0; }
    to { opacity:1; }
    }

    [/javascript]

    This example is doing the same thing but in more attractive way.We can also mix transitions and keyframes together as well as any other CSS classes on the same element.

    So the ngAnimate module provides support for CSS-based animations (keyframes and transitions).It also provides support JavaScript-based animations via callback hooks. Animations are not enabled by default untill ngAnimate are included. Doing so the animation hooks are enabled for an Angular app. For both CSS and JS animations all we need is to set a matching CSS class that exists both in the registered animation and within the HTML element that the animation will be triggered on.

    This was our brief discussion on handling AngularJs and CSS3 and ngAnimate to give web application a better look.If you find this article helpful, you can connect us in Google+ and Twitter.

    Enter your email address:

    Delivered by FeedBurner


     

    Leave a Reply

    Your email address will not be published. Required fields are marked *