AngularJS Overview for Web Designers

Mar242014

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.

1

2

3

<div ng-app>

This is the Angular application content

</div>

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

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.

1

2

3

4

5

6

7

.my-item.ng-enter {

transition:height0.5s;

}

.my-item.ng-enter.ng-enter-active {

background-color:red;

}

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.

1

2

3

4

5

<input type="button"value="set"ng-click="sizeVar='size-large'">

<input type="button"value="clear"ng-click="sizeVar='size-small'">

<div>

<span ng-class="sizeVar">AnimationHappensHere</span>

</div>

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

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.