5 Cool New Features in AngularJS 1.2

Contributed by Vinci Rufus on 17 Aug 2013

The AngularJS team recently announced the availability of the release candidate version of AngularJS 1.2 code named Spooky – Giraffe.

Lets look at some of the interesting additions and changes in AngularJS 1.2:

1) NgAnimate:

NgAnimate has been one of the coolest and most talked about feature in the Angular 1.x branch. In version 1.2, this has been completely re-written and we no longer have the Ng-Animate directive. NgAnimate has now been converted into a CSS class based animation and transition.

See the Pen yHlvt by Vinci Rufus (@areai51) on CodePen

 

2) New Directives -ngFocus & ngBlur:

Finally, we can now have events for focus and blur on an element. These two new directives will allow writing custom code, validation messages etc. easier.

See the Pen cmpLJ by Vinci Rufus (@areai51) on CodePen

 

3) $Even and $odd props for ngRepeat:

Until now, ngRepeat only had $index, $first, $middle and $last props. So, if you had to create a table with alternating rows, you’d need to write some complex  looking code using a mod by 2 of the index with an appropriate CSS class or you’d need to use the other two ngClassEven and ngClassOdd directives. Now its easier with $odd and $even getting added to the rest of the props for ngRepeat.

See the Pen oAfgc by Vinci Rufus (@areai51) on CodePen

 

4) Swipe Events with ngTouch:

This is a really cool feature when building mobile or tablet apps with AngularJS.  We now have two new directives called ng-swipe-left and ng-swipe-right. With this it is now possible to write functionality that can be triggered based on these events.

 

5) jQuery Reference moves from Global to Local:

Until now, the angular scenario would reference jQuery globally, due to which we would have trouble making our non-AgularJS code to work with jQuery. With the 1.2 release, jQuery is referenced locally to the Angular app and it should now be easier to have our non-Angular code make use of jQuery.

Follow me on Twitter @areai51

Visit us at Neevtech.com to know more about our offerings.

Tags: , , , , , , , , , , , , , , , , , , , ,

Leave a Comment

Security Code: