Contents

HTML as a Template Language

Your web-application consists of three main parts:

  1. presentation templates (as HTML files)
  2. application logic and behavior (as Angular annotations inside your HTML templates)
  3. data (stored on Angular servers in the Internet Cloud)

Presentation Templates

Since the templates use plain HTML with CSS, editing Angular templates is similar to editing HTML. If you know how to edit HTML, you know how to edit Angular templates.

Annotations

Angular annotations enhance static and lifeless HTML templates into dynamic applications. By learning a few core annotations, you will have the tools necessary to create your own dynamic applications.

Data

The data is organized by types into entities. A type can be CDs, Employees, or any other user-defined concept. Each entity consists of collection of individual documents where you can store data. The Angular annotations will merge your documents into your templates, giving you the ability to create, modify, update, delete and report your data.

Basic HTML template

The core concept of the application is a set of HTML templates. These templates can be edited in your favorite HTML editor, such as DreamWeaver™. If you know how to create and edit HTML files, then you know how to create and edit Angular templates.

Below is an example of a template called Hello World. The example demonstrates how an input field can be bound to a variable, in this case, yourName. The variable can be inserted anywhere in the HTML template for display. Notice that changing the value of the variable in the input field automatically changes the template to reflect the new value. This immediate feedback is known as data binding.

Loading Angular Framework

Each HTML template must have an Angular framework loaded within it. Without this Angular framework, you will not be able to take advantage of data persistence and data binding. See Persistable Hello World below for an example of data persistence. In the Hello World example, the framework is loaded using the script tag:


This script tag is required for all Angular templates. In the example, the location of the JavaScript is docs.getangular.com. The location refers to the database where your application data is stored. Notice the sub-domain prefix docs. Each application must have a unique prefix to keep the data and permissions separate. You must sign up to get a unique prefix.

Reading Data from User

Angular applications collect data from the user using standard HTML input tags as shown here:

The name of the input field is the path where the input stores its value in the current scope. As you type, the Angular framework copies the text from the input field and saves it in the current scope under yourName variable. The framework then updates all of the data bindings to reflect the new state of the scope.

Data Binding

Through the use of data binding, input data can be displayed automatically in the HTML template. In the Hello World example, the code binds the value yourName to the HTML.

To display a value, double curly braces are placed around the value you want to show: {{expression}}. For example, double curly braces surround the value 'your name': yourName.

To complete the example, the code {{yourName}} is placed after the text Hello and before exclamation (!) to get Hello World!. As the user types into the input fields, the data binding automatically updates with the new value.

Persistable Hello World

The Hello World example above shows how Angular applications are bootstrapped and how data can be read and displayed. Another important aspect of an application is the ability to maintain itself and share its data with other users. This can be done by adding a persistable document and a save button so that the greeting name can be saved and seen by other users.

Persistance

  1. Click the URL. The first time you click the URL, it will refer to the http://docs.getangular.com/Template.
  2. Enter your name.
  3. Click Submit to persist the data. After you submit the data, the URL changes to {{$window.location.href|link}}. The entire piece of code following the # character is referred to as an anchor. The "{{$anchor.greeting}}" is a unique code for your data.
  4. Copy the URL including the anchor into your clipboard.
  5. Open a new browser window and paste the URL into the address field. Notice that the same greeting is shown in the new window as well. The data has been persisted on the server as an entity called Greeting with a unique id. When you visit a URL with the the id in an anchor, the Angular framework will automatically load the document into your scope and bind it into the HTML.
  6. Change the greeting in one window; click Submit to save.
  7. Open a new browser window again and refresh the page. Notice that the new greeting is now present in the new window. The two windows are editing the same document.

Declaring the Entity

The Angular servers need to know how to persist your data; therefore, each document must belong to an entity. The entity declarations are performed using the ng-entity annotation.

The above example can be translated as: "I am declaring an entity Greeting and a particular instance of the entity should be assigned to scope under the name greeting" One entity can be associated with many documents.

The ng-entity specifies that if greeting is present in the anchor of the URL, then the framework should automatically load that specific document into the greeting variable. In other words, if the URL does not have an anchor, then you are creating a new document. If the URL has an anchor then you are editing an existing document.

In summary, the notation greeting=Greeting is a shorthand for:

  1. declaring new entity Greeting.
  2. assigning a single instance of the entity, referred to as document, to variable greeting in the current scope
  3. checking the anchor for greeting and, if present, loading the document with that id from the server.

Referring to the Model

In the first example, name was placed in the yourName variable in the scope. In the peristed example, the variable was included in the document. All references of yourName had to be changed to greeting.name. Here greeting is the document and name is a field on the document. Only fields on documents are persisted.

Triggering a Save

The eaiest way to save a document is to add a submit button. The framework automatically treats a submit button as a save and either creates a new document on the server or updates the existing one. This depends on whether the document includes $id.

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