A great way for you to get started with angular
is to create the tradtional
"Hello World!" app:
helloworld.html
). 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
angular
work across all browsers (especially important for IE):
<html xmlns:ng="http://angularjs.org">
The next line downloads the angular
script, and instructs angular
to process
the entire HTML page when it is loaded:
<script type="text/javascript" src="http://code.angularjs.org/angular-?.?.?.min.js" ng:autobind></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 angular
to
bind a dynamic expression to our greeting text.
This example demonstrates angular
's two-way data binding:
<body>
with the code from the Source box below.Your name: <input type="text" name="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:
widget
called yourname
is bound to a model variable called
yourname
.You did not need to explicitly register an event listener or define an event handler for events!
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).
angular
AppThis section describes the 3 parts of an angular
app, and explains how they
map to the Model-View-Controller design pattern:
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, 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.
The Model consists of one or more JavaScript objects, arrays, or primitive types. These are referenced from the scope. There are no restrictions on what the Model can be or what structure it should have. The only requirement is that it is referenced by the scope.
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:
For additional hands-on examples of using angular
, including more source
code that you can copy and paste into your own pages, take a look through
the angular
Cookbook.
For explanations of the angular
concepts presented in the examples on this
page, see the Developer Guide.