mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
146 lines
5 KiB
Text
146 lines
5 KiB
Text
@workInProgress
|
|
@ngdoc overview
|
|
@name Getting Started
|
|
@description
|
|
|
|
# Hello World!
|
|
|
|
A great way for you to get started with `angular` 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.
|
|
|
|
<doc:example>
|
|
<doc:source>
|
|
Hello {{'World'}}!
|
|
</doc:source>
|
|
</doc:example>
|
|
|
|
The resulting web page should look something like the following:
|
|
|
|
<img class="center" src="img/helloworld.png" border="1" />
|
|
|
|
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):
|
|
|
|
<pre>
|
|
<html xmlns:ng="http://angularjs.org">
|
|
</pre>
|
|
|
|
The next line downloads the `angular` script, and instructs `angular` to process
|
|
the entire HTML page when it is loaded:
|
|
|
|
<pre>
|
|
<script type="text/javascript" src="http://code.angularjs.org/angular-?.?.?.min.js" ng:autobind></script>
|
|
</pre>
|
|
|
|
(For details on what happens when `angular` processes an HTML page,
|
|
see {@link guide.bootstrap Bootstrap}.)
|
|
|
|
Finally, this line in the `<body>` of the page is the template that describes
|
|
how to display our greeting in the UI:
|
|
|
|
<pre>
|
|
Hello {{'World'}}!
|
|
</pre>
|
|
|
|
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.
|
|
|
|
# Hello <angular/> 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 browswer window.
|
|
|
|
<doc:example>
|
|
<doc:source>
|
|
Your name: <input type="text" name="yourname" value="World"/>
|
|
<hr/>
|
|
Hello {{yourname}}!
|
|
</doc:source>
|
|
</doc:example>
|
|
|
|
After the refresh, the page should look something like this:
|
|
|
|
<img class="left" src="img/helloworld_2way.png" border="1" />
|
|
|
|
These are some of the important points to note from this example:
|
|
|
|
* The text input {@link angular.widget widget} called `yourname` is bound to a model variable called
|
|
`yourname`.
|
|
* The double curly braces notation binds the variable `yourname` to the
|
|
greeting text.
|
|
<!--
|
|
* The variable `yourname` is implicitly created in the root scope.
|
|
-->
|
|
* 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
|
|
{@link guide.data-binding 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.
|
|
|
|
## Scope
|
|
|
|
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:
|
|
|
|
<img class="left" src="img/angular_parts.png" border="0" />
|
|
|
|
In addition, `angular` comes with a set of Services, which have the following
|
|
properties:
|
|
|
|
* The services provided are very useful for building web applications.
|
|
* You can extend and add application-specific behavior to services.
|
|
* Services include Dependency-Injection, XHR, caching, URL routing,
|
|
and browser abstraction.
|
|
|
|
# Where To Go Next
|
|
|
|
* 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` {@link Cookbook}.
|
|
|
|
* For explanations of the `angular` concepts presented in the examples on this
|
|
page, see the {@link guide Developer Guide}.
|