Getting Started

Hello World!

A great way for you to get started with AngularJS is to create the tradtional "Hello World!" app:

  1. In your favorite text editor, create an HTML file (for example, helloworld.html).
  2. From the Source box below, copy and paste the code into your HTML file. (Double-click on the source to easily select all.)
  3. Open the file in your web browser.
        Hello {{'World'}}!
    

The resulting web page should look something like the following:

Now let's take a closer look at that code, and see what is going on behind the scenes.

The first line of interest defines the ng namespace, which makes AngularJS work across all browsers (especially important for IE). The ng:app tags tells angular to process the entire HTML when it is loaded:

    <html xmlns:ng="http://angularjs.org" ng:app>

The next line downloads the angular script:

    <script type="text/javascript" src="http://code.angularjs.org/angular-?.?.?.min.js"></script>

(For details on what happens when angular processes an HTML page, see Bootstrap.)

Finally, this line in the <body> of the page is the template that describes how to display our greeting in the UI:

    Hello {{'World'}}!

Note the use of the double curly brace markup ({{ }}) to bind the expression to the greeting text. Here the expression is the string literal 'World'.

Next let's look at a more interesting example, that uses AngularJS to bind a dynamic expression to our greeting text.

Hello AngularJS World!

This example demonstrates angular's two-way data binding:

  1. Edit the HTML file you created in the "Hello World!" example above.
  2. Replace the contents of <body> with the code from the Source box below.
  3. Refresh your browser window.
  Your name: <input type="text" ng:model="yourname" value="World"/>
  <hr/>
  Hello {{yourname}}!
 

After the refresh, the page should look something like this:

These are some of the important points to note from this example:

Now try typing your name into the input box, and notice the immediate change to the displayed greeting. This demonstrates the concept of angular's bi-directional data binding. Any changes to the input field are immediately reflected in the model (one direction), and any changes to the model are reflected in the greeting text (the other direction).

Anatomy Of An Angular App

This section describes the 3 parts of an angular app, and explains how they map to the Model-View-Controller design pattern:

Templates

Templates, which you write in HTML and CSS, serve as the View. You add elements, attributes, and markup to HTML, which serve as instructions to the angular compiler. The angular compiler is fully extensible, meaning that with angular you can build your own declarative language on top of HTML!

Application Logic and Behavior

Application Logic and Behavior, which you define in JavaScript, serve as the Controller. With angular (unlike with standard AJAX applications) you don't need to write additional listeners or DOM manipulators, because they are built-in. This feature makes your application logic very easy to write, test, maintain, and understand.

Data

The Model is referenced from properties on angular scope objects. The data in your model could be Javascript objects, arrays, or primitives, it doesn't matter. What matters is that these are all referenced by the scope object.

Angular employs scopes to keep your data model and your UI in sync. Whenever something occurs to change the state of the model, angular immediately reflects that change in the UI, and vice versa.

The following illustration shows the parts of an angular application and how they work together:

In addition, angular comes with a set of Services, which have the following properties:

Where To Go Next