This is the first guest post on JS Playground from JavaScript developer Tom Ashworth, who can be found on Twitter as @phuunet. Thanks so much to Tom for taking the time to write for the blog. If you'd like to write for JS Playground, get in touch.
AngularJS is an open-source, client-side Javascript framework currently being developed at Google. It does things a little differently to other Javascript frameworks like Backbone, so here's a simple introduction.
Extending HTML
Angular's philosophy is all about extending HTML by teaching it new tricks.
Using HTML as its templating language, Angular takes care of many tasks that would normally be up to you, like DOM manipulation and setting up event listeners.
Getting Angular
Angular's core consists of one Javascript file which is hosted on a number of CDN services, so beginning to use Angular is as simple as dropping a script tag onto the page:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>You can also download uncompressed (and latest, unstable) versions from angularjs.org.
Baby steps
Here's your first Angular example, without a single line of custom Javascript – just drop this into an html page and fire it up in your browser, or view it on JS Bin.
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-model</title>
<style>
body { font: 14px/1.5 sans-serif; color: #222; margin: 3em; }
input { font: 14px/1.5 sans-serif; padding: 0 0.3em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
</head>
<body>
<div class="main">
<input ng-model="name" placeholder="world">
<h1>Hello, {{ name || 'world' }}.</h1>
</div>
</body>So what's going on here?
<html ng-app>The first thing to notice is the ng-app attribute on the opening HTML tag. This attribute is the simplest way to tell Angular to initialize itself on the page. Without this attirbute, Angular will do nothing.
<input ng-model="name" placeholder="world">Next, notice the ng-model attribute on the input tag. ng-model is a directive that binds the value of the input to the name model. You don't need to declare the model anywhere else – if Angular doesn't find it elsewhere, it will create and update it for you.
A directive is the way you teach behaviour to HTML. Angular has a number of useful ones built in, but in building full-scale Angular apps you'll often create your own.
<h1>Hello, {{ name || 'world' }}.</h1>Lastly, the braces contain a JavaScript expression that Angular will replace with the result of the expression, like a Mustache template. In this example, it will swap the braces for the value of the name model (taken from the input), unless name has no value (is an empty string), when it will use the string "world" instead. In other words, the content of the braces is bound to the value of the name model.
If you've fired this example up and tried it out, you'll have spotted that the bound text updates automatically as you type into the input. That's becuase the ng-model attribute told Angular to listen for key events on the input and update the page's bindings (the braces, in this example) accordingly.
Angular is an MVC framework, and in simple examples the models and views are very closely tied. One of Angular's strengths lies in making it very simple to bind a view and a model, with a controller mediating that connection.
Controllers
Controllers in Angular are simply Javascript functions. Each controller has a scope that corresponds to an area of the DOM, and models can be created to exist only within that scope – much like Javascript's function scope.
To have Angular initialise a controller, and to set up the controller's scope, the ng-controller attribute is used. The mode on which this attribute is set is the root node of the controller's scope.
Here's an example with a shopping list (you'll need the same <head> as in the last example) – or view it on JS Bin:
<div class="main" ng-controller="ListCtrl">
<ul>
<li ng-repeat="item in shopping.list">
{{ item }}
</li>
</ul>
</div>
<script>
var ListCtrl = function ($scope) {
$scope.shopping = {
list: ['Milk', 'Bread', 'Biscuits']
};
};
</script>The controller, ListCtrl is defined in the script tag. You can see it's not being called anywhere, but takes an argument, $scope.
$scope gives the controller access to the models of it's scope, which can then be reflected in the views.
The above example sets up a shopping model with a list property. The ng-repeat attirbute on the list item repeats over the items in the shopping list, outputting their names.
ng-repeat is another directive built into Angular. It repeats a template according to an expression you pass it. In the above example, the template is the li and the expression is item in shopping.list.
This is just the start...
That's been a very swift, and hopefully interesting, introduction to AngularJS. It's nothing groundbreaking, but hints at the power of Angular. One of the main advantages I've found is that Angular lets me code the way that I think, which is in very useful with have a complex data problem to solve. Maybe you'll find the same.
If you'd like to delve deeper, you can find further documentation on the Angular website, at angularjs.org.
Don't miss my latest course, React in Five! This course will help you level up your React skills by covering lesser known parts of the React API. Each video is less than five minutes long, and the first four are free to watch. Get started now.
Subscribe to keep up to date with the latest content.
Join the JS Playground mailing list to be kept up to date with the latest tutorials, screencasts and more. You won't be spammed and you can unsubscribe at any time.
