AngularJS is a newer JavaScript framework geared towards the creation and maintenance of single page web applications. It is considered to be a “toolset for building the framework most suited to your application development” meaning that, for the most part, you can choose the elements that you want to use and swap out those that you don’t want with other libraries/frameworks of your choice. It is built and maintained by Google and is open source with an MIT license.

Angular is written in pure JavaScript and is based on the model–view–controller (MVC) pattern making applications using it easier to develop and test. Angular uses two-way data-binding to synchronize the data between models and views.

For designers, besides working with HTML and CSS like we are used to and adjusting to working in an MVC pattern, we will likely be most interested in Angular directives and animations.

Directives

Angular contains components called Directives which are essentially “markers” on DOM elements like attributes, element names, or html classes. Angular will traverse the DOM and match these directives to attach specific behavior and/or transform the markup of itself and its children. They have no restrictions and can be added to any element in the DOM. ng-app is the most important directive because it bootstraps the application and runs Angular. It’s usually applied to the HTML tag or a div tag that wraps the page content.

When using directives they can be written in two different ways using a dash (ng-model) or using a colon (data-ng:model). It is recommended to use a dash instead of colon because you can use “data-ng-model” to validate HTML in a validation tool.

You can use any from the set of built in directives or create your own custom directives if needed.

Directives Designers Will Use

There are quite a few directives that Angular provides out of the box but not all will be used by designers on a regular basis. I’ve chosen to sift through and find the ones that I’d use the most but you can find the whole list here.

ng-disabled

If true then the “disabled” attribute will be set on the element – Learn More

ng-checked

If true then the “checked” attribute will be set on the element – Learn More

ng-readonly

If true then the “readonly” attribute will be set on the element – Learn More

ng-selected

If true then the “selected” attribute will be set on the element – Learn More

ng-class

Allows you to dynamically set html classes on elements – Learn More

ng-class-odd

Allows you to dynamically set html classes on odd elements – Learn More

ng-class-even

Allows you to dynamically set html classes on even elements – Learn More

ng-cloak

Prevents the raw markup from displaying while your application is loading before AngularJS has had a chance to run and compile the html – Learn More

ng-click

An event that allows you to attach behavior when an element has been clicked – Learn More

ng-dblclick

An event that allows you to attach behavior when an element has been double clicked – Learn More

ng-mousedown

An event that allows you to attach behavior on mouse down – Learn More

ng-mouseup

An event that allows you to attach behavior on mouse up – Learn More

ng-mouseover

An event that allows you to attach behavior on mouse over – Learn More

ng-mouseenter

An event that allows you to attach behavior on mouse enter – Learn More

ng-mouseleave

An event that allows you to attach behavior on mouse leave – Learn More

ng-mousemove

An event that allows you to attach behavior on mouse move – Learn More

ng-keydown

An event that allows you to attach behavior on key down – Learn More

ng-keyup

An event that allows you to attach behavior on key up – Learn More

ng-keypress

An event that allows you to attach behavior on key press – Learn More

ng-focus

An event that allows you to attach behavior on an element when focused – Learn More

ng-blur

An event that allows you to attach behavior on an element when it has lost focus – Learn More

ng-copy

An event that allows you to attach behavior when copying – Learn More

ng-cut

An event that allows you to attach behavior when cutting – Learn More

ng-paste

An event that allows you to attach behavior when pasting – Learn More

ng-show

An event that allows you to show html based on the evaluation of an expression – Learn More

ng-hide

An event that allows you to hide html based on the evaluation of an expression – Learn More

ng-style

Allows you to conditionally set CSS on an element – Learn More


Animations

Angular provides animation hooks for certain directives that trigger CSS Transition animations, CSS Keyframe animations, or JavaScript Callback animations. Angular also includes animation detection support for custom animations when performing operations on DOM elements.

Angular animations are triggered on certain events like enter, leave, move, and class change. These animations are based completely on HTML classes and can be applied to any element with a class on it. These animations are also based on convention ng-(event) and ng-(event)-active.

JavaScript can be used to perform animations if you wish and these animations will use jQuery. However, It’s probably best not to use JavaScript if it can be avoided since it will likely add more code than necessary and can hinder performance to some degree.

If you want your animations tied to something other than one of the events enter, leave, or move, you can add them on add or remove of HTML classes. Angular will only recognize class changes if an expression or the ng-class directive is used.

Directives With Animation Support

Not all of the out of the box directives support animations so below I’ve included the ones that do and the events that they have to trigger animations.

ng-repeat

Supported Events – enter, leave, and move

ng-view

Supported Events – enter and leave

ng-include

Supported Events – enter and leave

ng-switch

Supported Events – enter and leave

ng-if

Supported Events – enter and leave

ng-class

Supported Events – add and remove

ng-show

Supported Events – add and remove of the ng-hide class value

ng-hide

Supported Events – add and remove of the ng-hide class value


Animation Examples

To get more info and see real examples of animations in Angular check this out.


In Conclusion

From what I have read AngularJS is meant “to enable web-designers (non-programmers) to build simple app like websites” which looks to be possible but so far everything surrounding it like documentation, examples, tutorials, etc. seem to be very developer oriented. It can certainly do some cool stuff and I hope this article helps some of my fellow web designers begin to see how they can use it.

In theory it appears as though there is a lot of power in Angular but I’ve yet to use it on a project as of the time of writing. I guess you will just have to check back in a few months to see how it goes.


Browser Support

ie8 and aboveChromeFire FoxSafari

Browser support for AngularJS is pretty good. If using version 1.2 it will work in ie7 and above. If using version 1.3 it will work in ie8 and above. I couldn’t find any info as to whether or not Angular supports Opera but my guess is that it does.


Sources

Comments

  • Lalit

    Thanks, your article helped alot to understand about angular.. i hope to get more from you 🙂

    • brianmtreese

      That’s great! I’m glad it helped!

  • brianmtreese

    That’s great! Glad it helped!