Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel

Free Preview: Animate Your Site With AngularJS

Introduction

01:03
  • Overview
  • Transcript

Animation is no longer an optional feature in web applications. Users expect it, and so we as developers must oblige. If you're writing an AngularJS-based application, then you already have a wealth of built-in animation tools available. These tools will eliminate a lot of the hard work that normally comes along with animating a web app.

In this course, Tuts+ instructor Jeremy McPeak will teach you about AngularJS 1.4's revamped ngAnimate, the module responsible for animation. ngAnimate is built on CSS3 animations, so you'll learn a lot about those along the way. To demonstrate the power of these technologies, for the course project Jeremy will extend the SoundCloud application to incorporate animated UI elements.

We've built comprehensive guides to help you learn JavaScript, AngularJS, and Angular 2, whether you're just getting started or you want to explore more advanced topics.

1. Introduction

1.1 Introduction

Animations have quickly become a requirement for any website or application, and we have mobile platforms to thank for that. Users now expect animations in all aspects of our user interface. And if you're writing your web site or application with AngularJS, you have a very powerful tool at your disposal. It's called ngAnimate and in version 1.4, ngAnimate has been completely revamped to be more efficient, flexible and performant. Hi, my name is Jeremy McPeak for Tutsplus and welcome to animate your site with angular JFs. Over the next hour and a half, I will teach you how you can add animation to your angular based applications. Throughout this course, we're going to take a dull and lifeless UI and turn it into a marvel of artistic expression. Okay, maybe not. But with each lesson you will learn what you need in order to use ngAnimate to enhance your user's experience. So when you're ready, cue of the next video and we'll get started.

2. Getting Started

2.1 The Soundboard Application

For the majority of this course we're going to be working with the front end of an application called sound board. This was originally written with a node JS backend but there is no backend now so everything you see here is hard coded in the angular application. Now we're going to spend our time animating the different pieces of this application. Like for example we can collapse and expand the sidebar and there is no animation there so we will be doing that. We will be adding transitions as we go to different views. Now as you'll notice, there is a register and a login form. These forms don't do anything, but we will be spending some time in the registration form because we are going to animate some of the form validation things. We can also do a search. So for example we wanted to find all of the messages that have an F you know, we can search for F and there we go. Now if we did a search on Doe, every one of these is written by somebody in the Doe family, so we get all of them. But we're going to animate each one of these. This is actually an NG repeat. And of course, we will look at the markup here in a few moments. But we will be animating this NG repeat so when we do a search, things won't just instantly happen. There will be some type of transition. Now there's one little cork about this application, remember that I said that this was originally written for node. If we go to like register and we refresh the page we get a 404 because while the register view actually does exist on the file system, it is not at this particular URL. So any time we want to refresh the page we have to go back to the root. And I could have done that differently, but I left the majority of the infrastructure as is. Now the sidebar is actually based upon the sidebar in a project called R-Dash. That is a dashboard written with angular. So if that looks familiar, that's why. A lot of the CSS in the markup is the same. Speaking of mark up let's start with index html. No if it's not custom it's coming in from a CDN. You can see that I'm using cloud fares CDN. I'm using twitter boot strap 3.3.5, font awesome, 4.40. And then we have site CSS which has the CSS for the site stuff. And then there's animate CSS. Everything we do, as far as the animation is concerned, is going to go inside of that to animate CSS file. Now for angular, I'm using version 1.4.3 that is the current version at the time at this recording. I'm using angular, angular route and angular animate. So if you want to add animation to your own angular applications, you need to include the angular animates. And you also need to inject that dependency whenever you create your application which we will look at here in a few moments. I'm also using angular-ui-bootstrap, jquery/2.1.4, and then twitter-bootstrap as well. Now if we scroll on down, we can look at the JavaScript files for this particular application. The main file is of course called app.js then we pull in the controllers. They are defined inside of their own files, I have a service called posts for retrieving all of our posts, and then the configuration file. So let's look at js first. As far as the dependencies are concerned, I have ng route I have ngAnimate so that is the second thing that you need to do. If you want to include angulars animation utilities, you need to inject ngAnimate, and also, injecting ui.bootstrap. Now my controllers are pretty clean [LAUGH] because they aren't doing really anything at all. And I'm not going to go into detail here, because whenever we talk about the side bar I will cover this toggle and toggle side bar then. So, we will just close app js. If I look at config, we can see where the routes are set up. You can see that the root is going to go to views and home html, and that is for the home controller. We have /login for the Login view and LoginController. And register for the register view and RegisterController. Let's go ahead and look at those controllers. They are, as I mentioned, very simple. As far as the HomeController is concerned, it's going to retrieve all of our posts from our posts service and assign them to a property on our scope, simply called posts. The login controller just simply sets some default values for the login form. The same thing is true for the register controller. And, let's take a look at the posts service. Now, in the original application this, of course, made a request to the server in order to retrieve all of the posts. So, I wanted to somewhat replicate that as far as promises are concerned, so I used defer so that it kind of emulates HTTP, but not really. There's really no delay in retrieving this information. So as far as the JavaScript is concerned, everything is pretty simple. And the markup is pretty simple as well. Let's look at the views. The home view is going to display the list of our posts. You can see that I have ng-repeat here. So we are going to display each post in our posts. And the filter is based upon the value of this input element. And this is really the most complex view. If we look at the login or the register views, there's really nothing to write home about. And so that's it, as far as this application is concerned. It is a very simple application and really, it's going to be simple whenever we are done with it. However we're not going to get started animating this application just yet. NgAnimate is heavily reliant upon it's CSS3 animations. And we are going to look at the basics of CSS3 animations in the next two lessons.