<angular.js/>
Web apps made simple.
What is <angular.js/>?
The <angular.js/> library teaches your old browser new tricks. It is what HTML would have been, if it was designed for building web applications.
Add <angular.js/> to any static web page and extend the HTML vocabulary of your browser to understand:
- ng-attributes such as <div ng-repeat="item in items"/> which control the rendering process.
- Inline {{mustache}} which binds expression in spreadsheet-like auto-update manner.
- filters, formatters, validators, widgets, charts, and more
Demos
Calculator
In it’s simplest form <angular.js/> is a client-side auto-evaluating templating system. Try changing the numbers, enter negatives, or non-number text, to see what happens. Then see what the page looks like without <angular.js/> and view the source behind it, by clicking on the appropriate tab.
Invoice
Here is a more complex example of an invoice, showing spreadsheet-like characteristics of auto-updating, validation, repeater, and charts. Pay special attention to adding and removing new items, and column summations of totals. At the bottom we have dumped the current model of the invoice in JSON format for you to examine. This whole demo is 100% in declarative HTML, no JavaScript was written to achieve this interactive UI, and there is no server in the background.
| Qty | Description | Unit | Total | |
|---|---|---|---|---|
| {{ item.total = item.qty * item.cost | currency }} | X | |||
| add item | Sub: | {{ invoice.sub = invoice.items.$sum("total")|currency }} | ||
| Tax: | % | {{ invoice.tax = invoice.taxRate * invoice.sub / 100 | currency }} | ||
| Shipping: | $ | |||
| Total: | {{ invoice.total = invoice.sub + invoice.tax + invoice.shipping | currency }} | |||
invoice={{invoice}}
Programmatic Control & Model - View - Controller
Here we show you how seamless it is to bridge <angular.js/> (which acts as view) and JavaScript (which acts as controller). On init we copy the controller methods into <angular.js/> scope, which makes them freely available to be called from the view. When the method is invoked it has easy access to the model through “this”.
If you have JavaScript debugger running (FireBug, Safari or Chrome) than you can open console and try these commands directly from your browser. Watch what happens to the view after each updateView() command.
scope.get('names');
scope.get('names').push('my name');
scope.updateView();
scope.set('filterText', 'a');
scope.updateView();Database
What good is easy way of building UI, without persistence? therefore <angular.js/> also includes a service (http://www.getangular.com) where you can host your data for free. It is a cross-site RESTful JSON store and authentication service. Here’s an task application as a demo and a video explaining how it was built.