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 kind of 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. This compiler teaches your browser new tricks.
So then, angular's not just a templating system, but you can create fantastic templates with it; angular's not just a web framework, but it has a very nice one; and angular's not just an extensible HTML compiler, but it has one of those too. Let's put it this way: angular includes these parts along with some others; it evolved naturally from earlier occurrences of these forms; and thus angular is something far greater than the sum of its parts. It sounds like... it's alive!
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 doing DOM updates, writing listeners, and writing input validators, all to do something as simple as implementing a form!? You either don't want to go there in the first place or you've been there and the thrill is gone.
You could even be muttering to yourself as you hack another callback, "This is like building my own bike from scratch every time I want to ride to the store." But let's say a clever friend, who keeps tabs on these sorts of things, told you to check out angular.
So now here you are checking out angular, and here is a simple example. Note that it features only the templating aspect of angular, but this should suffice for now to quickly demonstrates how much easier life can be with angular:
<h2>Bigg Bike Shop</h2> <hr> <b>Invoice:</b> <br/> <br/> <table> <tr><td> </td><td> </td> <tr><td>Quantity</td><td>Cost</td></tr> <tr> <td><input name="qty" value="1" ng:validate="integer:0" ng:required/></td> <td><input name="cost" value="19.95" ng:validate="number" ng:required/></td> </tr> </table> <hr> <b>Total:</b> {{qty * cost | currency}} <hr>
Go ahead, try out the Live Preview above. "Well I declare! It's a fully functioning form, with an instantly updating display, and input validation." Speaking of being declarative, let's walk through the example and look at the angular-related lines to see what's going on around here.
In line 2 of the example, we let the browser know about the angular namespace:
2 <html xmlns:ng="http://angularjs.org">
This ensures angular runs nicely in all major browsers.
In line 3 we do two angular setup tasks inside a <script>
tag:
angular.js
.The angular ng:autobind
directive tells angular to compile and manage the whole HTML document.
3
Lines 14 and 15 set up one side of angular's very cool two-way data binding, as well as demonstrate some easy input validation:
14 Quantity: <input name="qty" value="1" ng:validate="integer:0" ng:required/>
15 Cost: <input name="cost" value="199.95" ng:validate="number" ng:required/>
These input widgets look normal enough, but consider these points:
ng:autobind
directive from line 3? When this page loaded, angular bound the names
of the input widgets (qty
and cost
) to variables of the same name. Think of those variables as
the "Model" part of the Model-View-Controller design pattern.ng:validate
and ng:required. You may have noticed that when you enter invalid data or
leave the the input fields blank, the borders turn a plainly irritated red color, and the display
value disappears. These ng:
directives make it easier to implement field validators than coding
them in JavaScript, no? Yes.And finally, the mysterious line #19:
19 Total: {{qty * cost | currency}}
What's with the curly braces? Those curly braces are your friend. This notation, {{ _expression_
}}
, is a bit of built-in angular markup
, a shortcut that you use to display
data. 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 }}
.
In our example above, we're saying, "Bind the data we got from the input widgets to the display, multiply them together, and format the resulting number into something 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 clearly the way to go 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 it by simply adding text to the HTML template, saving the code, and refreshing your browser (this here is declarative):
<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 looks like, let's see, do some math, factor out the <pre>
s, carry the one, ummm... a little
bit of markup versus four times as much code.
More Angular Philosophy:
Now that we're homing in on what angular is, perhaps now would be a good time to list a few things what angular isn't:
This section describes the parts of an angular app in more detail.
Templates are the part of angular that makes it easy and fun to create the UI for your web apps. With angular's templates you can create a dynamic UI using only HTML and CSS, but now you can add your own elements, attributes, and markup. The angular compiler reads the "angularized" HTML when your page loads, and follows the instructions in there to generate a dynamic page for you. This is the View part of MVC. "But wait there's more": since the compiler is extensible, you can build your own declarative language on top of HTML!
Application Logic and Behavior, which you define in JavaScript, is the C in MVC. With angular you write the logic (the controllers) for your app, but because angular takes care of reflecting the state of the model in the view, you don't have to write listeners or DOM manipulators. This feature makes your application logic very easy to write, test, maintain, and understand.
In an angular app, all of your data is referenced from inside of a scope
.
The scope is the data Model, the M in the MVC pattern. A scope is a JavaScript object that has
watcher functions that keep tabs on the data that is referenced from that scope. The data could be
one or more Javascript objects, arrays, or primitives, it doesn't matter. What matters is that
these are all referenced by the scope.
This "scope thing" is how angular takes care of keeping your data model and your UI in sync. Whenever something occurs to change the state of the scope, angular immediately reflects that change in the UI, and vice versa.
In addition to the three components described above (the MVC bits), angular comes with a set of
Services
that are very helpful for building web apps. The services include
the following features:
The following illustration shows the parts of an angular application and how they work together:
Angular frees you from the following pain:
Where does angular come from? What events led to the inevitability of the appearance of something like angular?
HTML was initially designed long, long ago, in the great year of 1989, with the intention to create
a markup language for sharing scientific documents over the network. Yes, yes, certainly there was
SGML even before that, but it was so difficult that even esteemed scientists balked at using it.
Thankfully, Tim Berners-Lee saved all of us from that pain with his much friendlier HTML.
<HTML><BODY>Thank You, TB-L!</BODY></HTML>
.
Fast forward to 1995: JavaScript was invented. This was done with the best of intentions! But in practice it initially served mainly to annoy Internet users with cheap effects that "enhanced" static HTML documents.
Fast forward to the mid 2000s, when a new breed of back-then-considered-rich web applications started to appear on the web. These were built with HTML, JavaScript, and CSS, and featured less annoying and more impressive effects. Can you recall the first time you saw apps like Gmail, or Google Maps, and you couldn't believe everything that was going on in the browser?
As of this writing, in 2011, people are building still richer and more interactive web applications that often rival their desktop counterparts. And yet they are essentially still working with technology and programming primitives that were used decades ago for the creation of static documents with cheap graphic effects. At the same time, the web is HUGE now, and we can't just abandon the technologies it was built with. Applets, Flash and Silverlight tried it, and in some ways succeeded. Yet many would argue that in reality they failed, because they tried to work around the web instead of working with it.
Angular recognizes the strengths of the existing "static" web technologies, as well as their deficiencies. At the same time, angular is learning from the failures of other technologies that tried, or are trying, to work around the web.
For these reasons angular plays to the strengths of established web technologies, instead of bypassing them. Angular sets out the goal of increasing the abstraction and programming primitives that developers use to build web applications, so as to better reflect the needs of modern web applications and their developers.
Here is an early presentation on angular, but note that substantial development has occurred since the talk was given in July of 2010.