Animate Your Site With AngularJS

Jeremy McPeakOct 23, 2015Lessons: 12Length: 1.4 hours

Angular JavaScript CSS CSS3 CSS Animation Front-End Web Development Web Apps

Next lesson playing in 5 seconds

Cancel

Animate Your Site With AngularJS

Introduction

01:03

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 lesson, 01:03

1.1
Introduction
01:03

2.Getting Started
3 lessons, 23:16

2.1
The Soundboard Application
06:09

2.2
CSS3 Animations
07:59

2.3
CSS3 Keyframes
09:08

3.Directives With Built-in Animation Support
6 lessons, 45:18

3.1
ngClass
06:01

3.2
ngView
07:40

3.3
ngRepeat
08:17

3.4
ngShow and ngHide
04:48

3.5
ngModel and ngMessages for Form Validation
10:26

3.6
Animation Anchoring
08:06

4.Custom JavaScript Animations
1 lesson, 14:43

4.1
Using the $animateCss Service
14:43

5.Conclusions
1 lesson, 00:30

5.1
Conclusion
00:30

Jeremy McPeak

I started my development career on the client-side writing JavaScript and DHTML components in my spare time. In 2005, Nicholas C. Zakas asked me to join him in writing the first edition of Professional Ajax for Wiley Publishing. Since Professional Ajax, 1st Edition, I've been blessed to take part in other book projects: Professional Ajax 2nd Edition, and Beginning JavaScript 3rd and 4th editions.

Animate Your Site With AngularJS

Next lesson playing in 5 seconds

Animate Your Site With AngularJS

Introduction

1.Introduction1 lesson, 01:03

2.Getting Started3 lessons, 23:16

3.Directives With Built-in Animation Support6 lessons, 45:18

4.Custom JavaScript Animations1 lesson, 14:43

5.Conclusions1 lesson, 00:30

1.Introduction
1 lesson, 01:03

2.Getting Started
3 lessons, 23:16

3.Directives With Built-in Animation Support
6 lessons, 45:18

4.Custom JavaScript Animations
1 lesson, 14:43

5.Conclusions
1 lesson, 00:30