Developer Guide: Overview

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

What is angular?

Angular teaches your old browser new tricks. It is what HTML would have been if it had been designed for building web applications.

Take a simple example of user input as shown below. If you were using just HTML and JavaScript to implement this form, you would need to define listeners, DOM updates, and complex input validators in order to update and format the result. In angular you can achieve the effect with zero lines of JavaScript code using a declarative approach. Click on the source tab of the example below to view the angular implementation of this form.

QTY: <input name="qty" value="1" ng:validate="integer:0" ng:required/> * Cost: <input name="cost" value="19.95" ng:validate="number" ng:required/> = {{qty * cost | currency}} it('should show of angular binding', function(){ expect(binding('qty * cost')).toEqual('$19.95'); input('qty').enter('2'); input('cost').enter('5.00'); expect(binding('qty * cost')).toEqual('$10.00'); });

Angular is to AJAX apps as Ruby on Rails is to round trip apps.

Angular frees you from:

angular is/has:

angular is NOT a:

Not just another templating system

At the highest level, angular looks like a just another templating system, but there are few important reasons why angular is different and makes it a very good fit for application development.

Angular: * Uses HTML/CSS syntax: This makes it easy to read and can be edited with existing HTML/CSS authoring tools. * Extends HTML vocabulary: Angular allows you to create new HTML tags, which expand into dynamic UI components. * Executes in the browser: Removes the round trip to the server for many operations and creates instant feedback for users. * Bidirectional data binding: The model is the single source of truth. Programmatic changes to the model are automatically reflected in the view. Any changes by the user to the view are automatically reflected in the model. * Services: These allow for a reusable way of injecting dependencies into an application. * MVC: Clean separation between model-view-controller, which aids in understanding, maintenance, and testing of large systems.

The angular philosophy

Angular is built around the belief that declarative code is preferred over imperative when it comes to building UIs and connecting the pieces together.

As an example, 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>

In programmatic systems you would have to write and run code like this:

var label = new Label();
label.setText('Hello');
label.setClass('label');
parent.addChild(label);

Benefits:

HTML is missing certain features, which angular adds via its compiler, thereby "teaching" the browser these new tricks:

Watch a presentation about angular

Presentation | Source