The short answer: angular is a new, powerful, client-side technology that makes it much easier for you to create dynamic web sites and complex web apps, all without leaving the comfort of your HTML / JavaScript home.
The long answer: it depends on where you're coming from...
If you're a web designer, you might perceive angular to be a sweet templating system, that doesn't get in your way and provides you with lots of nice built-ins that make it easier to do what you want to do.
If you're a web developer, you might be thrilled that angular functions as an excellent web framework, one that assists you all the way through the development cycle.
If you want to go deeper, you can immerse yourself in angular's extensible HTML compiler that runs in your browser. The angular compiler teaches your browser new tricks.
Angular is not just a templating system, but you can create fantastic templates with it. Angular is not just a web framework, but it features a very nice framework. Angular is not just an extensible HTML compiler, but the compiler is at the core of Angular. Angular includes all of these components, along with others. Angular is far greater than the sum of its parts. It is a new, better way to develop web applications!
Let's say that you are a web designer, and you've spent many thous — erm, hundreds of hours designing web sites. But at this point, the thought of manipulating the DOM, writing listeners and input validators, all just to implement a simple form? No. You either don't want to go there in the first place or you've been there and the thrill is gone.
So look over the following simple example written using angular. Note that it features only the templating aspect of angular, but this should suffice for now to quickly demonstrate how much easier a web developer's life can if they're using angular:
<script> function InvoiceCntl() { this.qty = 1; this.cost = 19.95; } </script> <div ng:controller="InvoiceCntl"> <b>Invoice:</b> <br /> <br /> <table> <tr><td> </td><td> </td> <tr><td>Quantity</td><td>Cost</td></tr> <tr> <td><input type="integer" min="0" ng:model="qty" required ></td> <td><input type="number" ng:model="cost" required ></td> </tr> </table> <hr /> <b>Total:</b> {{qty * cost | currency}} </div>
Try out the Live Preview above, and then let's walk through the example and describe what's going on.
In the <html>
tag, we add an attribute to let the browser know about the angular namespace.
This ensures angular runs nicely in all major browsers. We also specify that it is an angular
application with the ng:app
directive. The `ng:app' will cause the angular to auto initialize your application.
<html xmlns:ng="http://angularjs.org" ng:app>
We load the angular using the <script>
tag:
`<script src="http://code.angularjs.org/0.9.15/angular-0.9.15.min.js"></script>`
From the ng:model
attribute of the <input>
tags, angular automatically sets up two-way data
binding, and we also demonstrate some easy input validation:
Quantity: <input type="integer" min="0" ng:model="qty" required >
Cost: <input type="number" ng:model="cost" required >
These input widgets look normal enough, but consider these points:
qty
and cost
) to
variables of the same name. Think of those variables as the "Model" component of the
Model-View-Controller design pattern.input
.
You may have noticed that when you enter invalid data
or leave the the input fields blank, the borders turn red color, and the display value disappears.
These widgets make it easier to implement field validation than coding them in JavaScript,
no? Yes.And finally, the mysterious {{ double curly braces }}
:
Total: {{qty * cost | currency}}
This notation, {{ _expression_ }}
, is a bit of built-in angular markup, a shortcut for displaying data to the user. The expression within curly braces gets
transformed by the angular compiler into an angular directive (ng:bind
). The expression itself can be a combination of both an expression and a filter: {{ expression | filter }}
. Angular provides filters for
formatting display data.
In the example above, the expression in double-curly braces directs angular to, "Bind the data we got from the input widgets to the display, multiply them together, and format the resulting number into output that looks like money."
Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together, while imperative code is excellent for expressing business logic.
Not to put too fine a point on it, but if you wanted to add a new label to your application, you could do so by simply adding text to the HTML template, saving the code, and refreshing your browser:
<span class="label">Hello</span>
Or, as in programmatic systems (like GWT), you would have to write the code and then run the code like this:
var label = new Label(); label.setText('Hello'); label.setClass('label'); parent.addChild(label);
That's one line of markup versus four times as much code.
Now that we're homing in on what angular is, perhaps now would be a good time to list a few things that angular is not:
Angular frees you from the following pain:
Here is an early presentation on angular, but note that substantial development has occurred since the talk was given in July of 2010.