What is <angular/>?

<angular/> is something in between a web-page, spreadsheet, database, and a web-application. We don't know of anything else out there which is quite like <angular/> which makes it a bit hard for us to explain what exactly it is.

Like a Web-Page

You can think of <angular/> as just an extension of HTML & CSS. As such it can be served from anyplace where HTML & CSS can be served from. <angular/> can be mixed freely with existing HTML content. For example the document you are reading is stored in MediaWiki, which is a web-application written for the purpose of sharing knowledge. We freely mix <angular/> with the WIKI content to demonstrate what we call embeddability.

You create <angular/> content in the same way you create a web-page, using your favorite HTML editor, such as DreamWeaver, in a declarative way. By declarative we mean that you describe what the page should look like (HTML), and what it should behave like (<angular/>) rather than program a set of steps a which need to execute in order to render your desired page. In <angular/> you declare behavior; in contrast in JavaScript you program behavior. This means that you don't have to be a programmer to use <angular/>.

Unlike static HTML, <angular/> content is dynamic and responds to the user interactions. Here is a Hello World which allows you to enter your name and which then greets you. We did not have to write any code which tells the browser how it should listen to key events and then copy the name from the input field and turn it into a greeting. We simply declared it!

Use the tabs to see what the page looks like with and without angular, and what the source looks like.

Like a Spreadsheet

Spreadsheets are a very powerful way to organize and present data. They allow a user to collect the data into a tabular (row and column) form and then to compute values from the data. One reason why spreadsheets are so popular is that you can enter formulas into a cell which than automatically compute the result. Any change to the underlying data will then cause the spreadsheet to recompute. In <angular/> your data can be in any form (not limited to rows and columns) and like in a spreadsheet you can enter any number of formulas to compute results, but most importantly, is that just like in a spreadsheet any change to data will automatically result in recomputing of the results.

<angular/> is different from spreadsheets in couple of ways. First, <angular/> can be embedded to an existing web page, and it can interact with the web page content. Second, the formating of the spreadsheet is limited to tabular format, whereas the formating of <angular/> is only limited by HTML&CSS. Thirdly, a spreadsheets has very limited rights over the its users, whereas <angular/> has fine grained control over the read/write rights to the data. Finally, one spreadsheet equals one data, whereas in <angular/> the data and presentation logic are separated, allowing you to reuse the view across different data or to use different views for the same data.

Here is an example of an invoice to which you can add and remove items. Changing quantity or a price of an item will cause the invoice to recompute. We also show the breakdown of the costs to the user in form of a pie chart. Notice that changing any one part automatically updates all other.

Angular Demo
Without Angular
HTML Source

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 }}

{{ {title:'Cost Breakdown', series:[{label:['Goods','Tax','Shipping'], values:[invoice.sub, invoice.tax, invoice.shipping]}]} | chart.pie3d:300:150 }}

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 }}

{{ {title:'Cost Breakdown', series:[{label:['Goods','Tax','Shipping'], values:[invoice.sub, invoice.tax, invoice.shipping]}]} | chart.pie3d:300:150 }}

<html>
  <head>
    <script type="text/javascript"
            src="http://angular.getangular.com/angular-1.0a.js#database=docsdb"></script>
  </head>
  <body>    
      <div>
        <table ng-init="invoice={
                  items:[{name:'Widget', qty:50, cost:9.95},
                         {name:'Gadget', qty:25, cost:15.95}],
                  taxRate:9, shipping:25.33}">
          <tbody>
            <tr>
              <th>Qty</th>
              <th>Description</th>
              <th>Unit</th>
              <th>Total</th>
              <th> </th>
            </tr>
            <tr ng-repeat="item in invoice.items">
              <td><input name="item.qty" size="3"/></td>
              <td><input name="item.name" size="15"/></td>
              <td><input name="item.cost" size="5"/></td>
              <td>{{item.total = item.qty * item.cost | currency}}</td>
              <td><a href="" ng-action="invoice.items.$remove(item)">X</a></td>
            </tr>
            <tr>
              <td colspan="2"><a href="" ng-action="invoice.items.$add({qty:1})">add item</a></td>
              <td>Sub:</td>
              <td>{{ invoice.sub = invoice.items.$sum('total') | currency }}</td>
              <td> </td>
            </tr>
            <tr>
              <td> </td>
              <td>Tax:</td>
              <td><input name="invoice.taxRate" size="2"/>%</td>
              <td>{{ invoice.tax = invoice.taxRate * invoice.sub / 100 | currency }}</td>
              <td> </td>
            </tr>
            <tr>
              <td colspan="2"> </td>
              <td>Shipping:</td>
              <td>$<input name="invoice.shipping" size="5"/></td>
              <td> </td>
            </tr>
            <tr>
              <td colspan="2"> </td>
              <td>Total:</td>
              <td>{{ invoice.total = invoice.sub + invoice.tax + invoice.shipping | currency }}</td>
              <td> </td>
            </tr>
          </tbody>
        </table>
        {{ {title:'Cost Breakdown', 
            series:[{label:['Goods','Tax','Shipping'], 
                    values:[invoice.sub, invoice.tax, invoice.shipping]}]} 
            | chart.pie3d:300:150 }}
      </div>
  </body>
</html>

Like a Database in Cloud

An important part of any application is its data. <angular/> is also a hosted database service which allows you to focus on solving your problem rather than worrying about deploying and administering your database. With the data-store comes a full range of user management, authentication and data permissions and security management. Unlike, traditional web-application where you authenticate against the application, in <angular/> you authenticate against the database. This means you have rights not to see or modify a specific page in an application but to see and modify specific data, and the translation of the data to HTML is secondary.

Here is an example of how you can use <angular/> to store a message which can then be seen by other users.

Like a Web Application

There are many frameworks out there which allow you to build web applications. Some popular example of these frameworks are: Rails, PHP, and WebWorks. Although <angular/> can be used to built web-applications it is not a direct substitute for these frameworks. <angular/>'s sweet spot are web-applications which are based around Create-Read-Update-Delete (CRUD) model of your data. <angular/> is not a simpler version of these frameworks, rather it is something entirely different which allows you to work with your data in new and novel ways. Here are some key differences between <angular/> and a web-frameworks.

	<angular/>	web-frameworks
Declarative	HTML is declarative, which makes it easier to learn and work with than procedural language such as JavaScript. By extending the HTML with new attributes, the HTML not only encodes the static content, but also the dynamic behavior of the application.	Writing applications using web-application frameworks gives a greater degree of freedom, and flexibility to a web-developer at a cost of development speed and required skill level.
Databse	Data exist in a cloud and can be accessed equally well from the <angular/> HTML client or using REST API as JSON documents.	Your framework usually has way to access SQL data and merge it with the HTML to create human readable form. This makes it hard for you to share the data with others. Any import/export facilities and real-time sharing needs to be built into the application by its designers.
Presentation	Ability to treat the HTML as a spreadsheet with formulas greatly simplifies the problem of marshaling the data from the datastore to the human readable form.	Marshaling data from the SQL database to the browser, and then from the browser back to the SQL database is a hallmark of web-application frameworks. While many frameworks make it easy it never is a one line addition.
Widgets	Extending the HTML model with widgets which are useful for building web applications, such as date-pickers and charts streamlines the development of common web applications.	Rich widgets such as date-picker and charts, involves integrating with other libraries. While more flexible it also involves more time and higher skill level of the web-developer.
Embeddable	<angular/> is about data accessibility from anywhere, and any existing content. Which means that the HTML client must solve complexities of cross-domain communication and running purely on the web page, which are non-trivial issues.	Web frameworks usually offer noting in the way of cross site communication or embedding a UI in existing web pages. These frameworks assume that they are the sole application on the page.
Server	<angular/> offers data as a service in a cloud, but there is no server which is normally associated with web applications where the business logic executes. This is one of the biggest differences between <angular/> and a generic web-application frameworks.	A web application requires a server where the business logic and the data from the SQL server is merged with HTML templates and then served to the user in a human readable form. Maintaining and developing this server can be a considerable expense.
Logic	The logic of your application executes in the browser. This has implications about the kind of applications which you can build, as the browser can not be trusted that it will execute all of your business rules. <angular/> is not a general purpose web-application framework, in this case it is more like a spreadsheet. After you share your spreadsheet you can not trust the the data in it have not been altered in an unexpected ways. This deficiency, does not render a spreadsheet useless, it is just suited for a specific kinds of problems.	All logic usually executes on the server, and can be trusted allowing to build highly secure applications.
Security	The rules of who can edit what are controlled on the data level. There is no way of preventing someone from accessing a page, only a way of preventing someone from accessing data associated with the page.	Most web-frameworks do not have security built in, therefore it has to be developed or integrated into the framework from outside. The security is around controlling the accesses to a page rather than controlling the access to the data, which is one and the same if the data can only be accessed from the web-application UI. (most applications don't allow access to data outside of the UI.)

It's your Data

In most applications the data is bound to the application. Say you found a cool web-application which allows you to keep track of your holiday wish list. If your lucky, the web-application allows you to import and export your data, so if you find a cooler wish-list tracker you can in theory export the data and import in to the new one. (That is if both of the applications support import and export.) In practice it is more complicated since you can not be sure that the data format of one application will match that of the other.

What you can not do easily, is to add a widget to your blog which shows your readers to see in real time what you would like for the holidays. This is because even thought many applications offer import/export most do not offer a programatic API to your data. And even if they did, your widget on your blog is not allowed to talk cross domain to the web-application. Yes, all of these problems, can be solved, but they are not trivial, which means that only the best companies can afford to exert enough effort to solve them.

The reason we are in this situation is that most applications are centered around rendering HTML for human consumption, and the data lives deep behind the firewall hidden from the programatic access which computers need in order to mash up the data in new and interesting ways. There is a good reason for HTML centric views of web applications. Humans, are not good at reading raw data, and they want their data in HTML, rendered by the browser. What is needed is for the data to be the center of the application, and then an easy way to translate the raw data into human interactable form. This is what <angular/> is. The data is in the cloud in raw computer readable format giving equal access to anyone with the right permissions. <angular/> allows an easy way to translate the raw data into human readable HTML. Good way to think about it is that <angular/> teaches browser new tricks, so that it can render raw JSON to user.

If your wish list is stored in <angular/>'s database in the cloud, then it can be accessed from anywhere:

from a central web application for managing your list.
from your blog to show the users what is on your wish list.
from the command line as REST API and JSON.

If someone comes along and wants to design a better interface to your data, they are free to do so. <angular/> separates the valuable data from the presentation, and in the process makes your data the center as it is your most important asset.

How does it Work?

Who is it for?

In the ecosystem of the web the world can be roughly divided to web-designers (the masters of the HTML&CSS) and the web-developers (the masters of the backend languages and databases). <angular/> lies squeare in the middle.

Web-Designer

The web-designer knows HTML&CSS well, and probably even some intermediate level of JavaScript, and maybe even dabbles in some PHP. For the web-designer <angular/> offers a new level of expressiveness which transforms static HTML to dynamic application. This brings the web-designer closer to web-developer without the need the understand and learn the complexities required to understand and manage the backend.

Web-Developer

For a web-developer which is fluent in the framework of choice on the backend <angular/> offers a quicker way to prototype or build a specific kind of CRUD applications. A web-designer will always be able to squeeze a more custom application out of the general web-application framework but <angular/> is not a general purpose application framework.

What can you do with it

<angular/> is particularly well suited to build CRUD applications quickly which live in a cloud and which evolve in ad-hoc fashion. It is the "Hey wouldn't it be great if we could keep track of X?" A custom web-app may be to expensive to build, and require skills which we don't have. But a spreadsheet does not offer the freedom we need.

As long as the problem domain falls into the CRUD domain, <angular/> offers a quick alternative to building a web-application which fits your need. A typical <angular/> app can consist of many HTML pages, each representing the CRUD operations or reports of different entities working together to deliver a specific solution.

Demos

Demo:Calculator: Demonstrates simple hello world calculator.

Demo:Library: Demonstrates simple persistence. Shows the ability to create and edit books, as well as shows how to retrieve all of the books.

Demo:InvoiceList: Demonstrates persistence of hierarchical data and joins between two different kinds of entities. Shows how multiple pages work together to create a single application. Uses filters to create qrcodes and tracking urls.

External Demos

Tasks: Demonstrates an application where you can maintain task lists. Uses advanced Array.$filter(), and CSS for modifying the views.

Internal Company Phone Book: Demonstrates search page and detail pages, joins between employee and manager, and attachments.

Book Portal: Shows how one author is collaborating with others or writing a book.

Sleep Medicine: Collection and Analysis website for Sleep Medicine.

Test Taking: Create tests which your students can than take and grade themselves on.

Retrieved from "http://docs.getangular.com/Demos"

Contents