Pixafy developers recently attended the GothamJS NYC JavaScript conference. We started a series to further explore excitingly useful emerging technologies, some of which were covered at GothamJS. AngularJS, the open-source JavaScript framework, was one of the numerous interesting topics discussed during the conference.
[series_block]
This post is part of a series on topics covered at GothamJS:
- Recapping the 2013 GothamJS conference
- Filters in AngularJS
- Scoping out Directives in AngularJS (current)
- Fast caching in Backbone.js using localStorage
[/series_block]
Last year, 2012, saw the rise of JavaScript MVC frameworks and libraries. Among them are Ember.js, Backbone.js and AngularJS. Angular is an model-view-controller (MVC) framework created by Google which extends the HTML vocabulary for your application. Since many web developers and normal people are familiar with HTML this makes it very readable and quick to develop. Unlike many of the other frameworks, mainly Backbone, Angular does not have such a steep learning curve, at least when starting out. However, one of the harder things to wrap your head around is Directives.
Directives are one of the most powerful features of Angular. During the compilation, Directives are matched against the HTML and then executed. They are a way to register behavior or to transform the DOM. Directives let you specify how the HTML should be structured for the available data in a given scope. Angular comes with a set of built-in Directives that are very useful when building a web application. One such Directive is ngBind. The ngBind attribute tells Angular to replace the text of an HTML element with the specified expression and to update when that expression changes.
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="Control"> Enter name: <input type="text" ng-model="name"> <hr/> Hello <span ng:bind="name"></span> </div> </body> </html>
And in script.js:
function Control($scope) {
$scope.name = 'angular';
}
In the above example, the expression is the model “name” which has been bound with the input. You are then binding that model with the span so that any text typed into the input will show inside of the span. Another very useful directive is ngRepeat. You can see an example of this here: http://jsfiddle.net/Bgmc9/1/
The ngRepeat directive creates a template once per item from a particular set of items. This can be very useful and time-saving if you are printing out a list of items from some data.
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
</head>
<body>
<div ng-init="people = [{name:Phil, age:25, gender:male}, {name:'Irina', age:28, gender:female}]">
I know {{people.length}} people. They are:
<ul>
<li ng-repeat="person in people">
[{{$index + 1}}] {{person.name}} who is {{person.age}} years old.
</li>
</ul>
</div>
</body>
</html>
This will display:
I know 2 people. They are:
[1] Phil who is 25 years old.
[2] Irina who is 28 years old.
You can also easily filter these results using the directive ngShow.
<li ng-repeat="person in people" ng-show="person.gender == 'female'">
[{{$index + 1}}] {{person.name}} who is {{person.age}} years old.
</li>
This will display:
[1] Irina who is 28 years old.
Although Directives are one of the most powerful and complicated tools in AngularJS, the documentation is somewhat lacking. You should take a look at the documentation here to learn more about everything you can do with directives: http://docs.angularjs.org/guide/directive.
What are your favorite AngularJS features? Share your comments and questions below, or tweet us @Pixafy!
