So why am I talking about AngularJS over frameworks/libraries like Backbone, Ember, or Knockout?
For me, the major points of separation in AngularJS’s favor are the following:
- Good documentation
- Write less code to do more
- Backed by Google
- Good developer community
- Simple Data-Binding
- Small footprint
Key Features of AngularJS
The job of the Scope is to detect changes to model objects and create an execution context for expressions.
There is one root scope for the application (ng-app) with hierarchical children scopes. It marshals the model to the view and forwards events to the controller.
A look at the controller: http://embed.plnkr.co/zbGwOkhPB8m60ChTtOQj
The View is based on DOM objects, not on strings. The view is the HTML. HTML is declarative – well suited for UI design. The View should not contain any functional behavior. The flexibility here is to allow for multiple views per Controller.
The Services in AngularJS are singletons that perform common tasks for web applications. If you need to share common functionality between Controllers, then use Services. Built-in AngularJS, Services start with a $. There are several ways to build a service: Service API, Factory API, or the $provide API.
Service example of sharing a list: http://embed.plnkr.co/F69yhiETz3UqmVTl5frQ
All my examples have had data binding in them, but here is a super simple example: http://embed.plnkr.co/dECGEtvMvcMwabCP1IoZ
Now this is cool. AngularJS allows you to use Directives to transform the DOM or to create new behavior. A directive allows you to extend the HTML vocabulary in a declarative fashion. The ‘ng’ prefix stands for built-in AngularJS directives. The App (ng-app), Model (ng-model), the Controller (ng-controller), etc. are built into the framework. AngularJS allows for building your own directives. Building directives is not extremely difficult, but not easy either. There are different things that can be done with them. Please check out AngularJS’s documentation on directives.
Here is a simple stopwatch example: http://embed.plnkr.co/UVzM2QRWHoZxFeg6jkPG
The Filters in AngularJS perform data transformation. They can be used to do formatting (like I did in my Directives example with padding zeros), or they can be used to do filter results (think search).
Since I already did the formatting example, here is a search using a filter: http://embed.plnkr.co/eIF14kLTJ3V8wkR5kthC
AngularJS has some built-in validation around HTML5 input variables (text, number, URL, email, radio, checkbox) and some directives (required, pattern, minlength, maxlength, min, max). If you want to create your own validation, it is just as simple as creating a directive to perform your validation.
Here is an example using AngularJS’s built in validation: http://embed.plnkr.co/9CusuKxqf3axprjtgrFU
I have enjoyed developing with AngularJS. I hope this post has, at the very least, convinced you to spend a couple of hours playing with AngularJS.
To start, spend some time going through the AngularJS tutorial. Then create your own Custom AngularJS Plunker and see how quickly client-side development can be. As I said at the beginning, AngularJS has a really good community and very clean documentation, which goes into much more detail than this post. Thanks to the AngularJS team for developing this framework.
— Josh McKinzie, [email protected]
Sources / Useful Links
- AngularJS website – www.angularjs.org
- AngularJS videos – http://www.youtube.com/user/angularjs
- Thanks to Plunker – http://plnkr.co