Tab with deep linking

Demo:  http://stevenhollidge.com/blog-source-code/ng-tab-with-deep-linking/

Source:  https://github.com/stevenh77/ng-tab-with-deep-linking

Animating Angular Wizard

I have added a nice fade animation to each step of the wizard I created in my previous blog post.

Watch the video below or try out the live demo:

It turned out to be very simple indeed:

1) Add a script reference to the Angular-Animate.js library in your html page

2) Create an Animate.css file which will contain your animation details and add a reference within your html page.  I’ll explain the content of this code in a second.

3) Add a css class to the area you are animating, this is so your css code can locate it.  I added “fade-animation” class to each of the three wizard steps.

4) Finally add a reference to ngAnimate for Angular

And that’s it.  Right, now for the trickiest part, here is the animate.css code:

.fade-animation.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.fade-animation.ng-hide-add.ng-hide-add-active,
.fade-animation.ng-hide-remove {
  opacity:0;
}

.fade-animation.ng-hide-add,
.fade-animation.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

When you break this down there’s not much to it.  The first section is saying I want the animation to take half a second, in all the various browsers.  The display:block!important line is telling angular to override it’s default for hiding.

The other two css setters simply show and hide.  Now the interesting bit is the css selectors.  You’ll recognise the fade-animation selector as our class we are using for identification purposes. 

All the ng-hide-* css classes are what Angular adds as it cycles through its event lifecycle for showing and hiding.

This would be the lifecycle for moving for the user moving from Step One to Step Two:

• Step One section is hidden:  ng-hide-add (start) then ng-hide-add-active (complete)
  
• Step Two is no longer hidden:  ng-hide-remove then ng-hide-remove-active

Angular dynamically adds and removes these classes to the sections as it cycles through the events.  There’s lots more to animations but this makes for a nice simple introductory example.

Source code

Angular Validation with ngMessage

Here is a screenshot of a business form I have written in Angular:

For the live demo click here

For the source code click here

The validation is coded using the new ngMessage directive which displays the error messages should any be present.  Various rules are shown as an example: required, min/max length, regex and a faked database lookup.

ngMessages has only been introduced since AngularJS 1.3.0-beta.8

This example was originally based on a blog post by Year of Moo with a few of my own enhancements to match the behaviour of a previous form I had created.

I’ve customised the CSS to show the user what fields are required, along with what fields have been updated and are valid.  Each control only updates when the user leaves the control rather than on every keypress which is the default Angular behaviour. 

I also use ngCloak to ensure no output is displayed before Angular has compiled the page.