Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-12 08:53:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleanup of the Getting Started guide

Browse source
This commit is contained in:
Kenneth R. Culp 2011-02-04 14:35:54 -08:00 committed by Igor Minar
parent a26f192e01
commit b07cc0e392
1 changed files with 91 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

158
docs/started.ngdoc
View file

@ -3,58 +3,67 @@
@name Getting Started @name Getting Started
@description @description
# Hello World # Hello World!
The easiest way to get started with angular is to create a basic Hello World app.
# Step 1 A great way for you to get started with `angular` is to create the tradtional
"Hello World!" app:
In your favorite text editor, create a file called helloworld.html. Copy and paste the following 1. In your favorite text editor, create an HTML file
contents into the 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:example>
<doc:source> <doc:source>
Hello {{'World'}}! Hello {{'World'}}!
</doc:source> </doc:source>
</doc:example> </doc:example>
The resulting web page should look something like the following:
# Step 2 <img class="center" src="img/helloworld.png" border="1" />
<img class="right" src="img/helloworld.png"/> Now let's take a closer look at that code, and see what is going on behind
Navigate to the file helloworld.html in your browser. The page should look like the screenshot the scenes.
below:
The first line of interest defines the `ng` namespace, which makes
That's it! Now take another look at helloworld.html. Here's what's going on behind the scenes: `angular` work across all browsers (especially important for IE):
<pre> <pre>
<html xmlns:ng="http://angularjs.org"> <html xmlns:ng="http://angularjs.org">
</pre> </pre>
Defines the namespace `ng`, which represents the URL `http://angularjs.org`. You must define the The next line downloads the `angular` script, and instructs `angular` to process
`ng` namespace in your application so the browser understands angular directives like the entire HTML page when it is loaded:
`ng:autobind`.
<pre> <pre>
<script type="text/javascript" src="http://code.angularjs.org/angular-?.?.?.min.js" ng:autobind></script> <script type="text/javascript" src="http://code.angularjs.org/angular-?.?.?.min.js" ng:autobind></script>
</pre> </pre>
Sets the `src` attribute of the script tag to `http://code.angularjs.org/angular-?.?.?.min.js` to (For details on what happens when `angular` processes an HTML page,
bootstrap to the angular environment. Uses the `ng:autobind` attribute to compile and manage the see {@link guide.bootstrap Bootstrap}.)
whole HTML document. The compilation happens in the page's onLoad handler.
Finally, this line in the `<body>` of the page is the template that describes
how to display our greeting in the UI:
<pre> <pre>
Hello {{'World'}}! Hello {{'World'}}!
</pre> </pre>
This is the template that describes how this element is displayed in the UI. Note the use of the double curly brace markup (`{{ }}`) to bind the expression to
Uses the double curly brace markup (`{{}}`) to bind an expression to the greeting text. In this the greeting text. Here the expression is the string literal 'World'.
case the expression is the string literal 'World'.
# Step 3 Next let's look at a more interesting example, that uses `angular` to
bind a dynamic expression to our greeting text.
For a more advanced Hello World example that demonstrates angular's two-way data binding, edit # Hello <angular/> World!
helloworld.html and replace the contents of the `<body/>` with:
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:example>
<doc:source> <doc:source>
@ -64,59 +73,74 @@ helloworld.html and replace the contents of the `<body/>` with:
</doc:source> </doc:source>
</doc:example> </doc:example>
After the refresh, the page should look something like this:
<img class="right" src="img/helloworld_2way.png"/> <img class="left" src="img/helloworld_2way.png" border="1" />
These are the changes to note:
* The text input widget is bound to the text stored by the name variable. These are some of the important points to note from this example:
* The name variable is implicit in the root scope.
* You did not need to explicitly register an event listener or define an event handler for events.
Now refresh the `helloworld.html` page in your browser. Your screen should now look like this: * 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).
Type your name into the input box and notice the immediate change to the displayed greeting. This # Anatomy of an `angular` App
example demonstrates the concept of angular's two-way data binding; any changes to the input field
are immediately reflected in the greeting text.
# Anatomy of an angular app This section describes the 3 parts of an `angular` app, and explains how they
These are the 3 parts of an angular app and how they map to the Model-View-Controller design pattern: map to the Model-View-Controller design pattern:
# Template ## Templates
Templates, which you write in HTML and CSS, are the View. You add elements, attributes, and markup Templates, which you write in HTML and CSS, serve as the View. You add elements,
to HTML, which are instructions to the angular compiler. These instructions are fully extensible, attributes, and markup to HTML, which serve as instructions to the `angular`
meaning that you can build your own declarative language with 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
Application Logic and Behavior, which you define in JavaScript, are the Controllers. Unlike Application Logic and Behavior, which you define in JavaScript, serve as the
normal AJAX applications, you don't need to write additional listeners or DOM manipulators in Controller. With `angular` (unlike with standard AJAX applications) you don't
angular because they are built-in. This makes your application logic very easy to write, test, need to write additional listeners or DOM manipulators, because they are built-in.
maintain, and understand. This feature makes your application logic very easy to write, test, maintain, and
understand.
# Scope ## Scope
<img class="right" src="img/angular_parts.png"/> The Model consists of one or more JavaScript objects, arrays, or primitive types.
Scope, which is a JavaScript object that has the ability to watch for changes and get notified of These are referenced from the scope. There are no restrictions on what the Model
them, is the Model. You typically don't need to write much, if any, additional JavaScript to can be or what structure it should have. The only requirement is that it is
define your model. referenced by the scope.
Additionally, angular comes with a set of Services, which have the following properties: The following illustration shows the parts of an `angular` application and how they
work together:
* Useful for building web applications. <img class="left" src="img/angular_parts.png" border="0" />
* You can extend the services and add application-specific behavior to them.
* Examples include Dependency-Injection, XHR, caching, URL routing, and browser abstraction.
The following illustrates each part of an angular application and how they work together: 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 # Where To Go Next
For more hands-on examples of using angular, including more source code that you can copy and
paste into your own page, take a look through {@link cookbook}.
For explanations of the concepts described in this example, see {@link guide.bootstrap bootstrap},
{@link guide.template template}, {@link angular.widget.HTML input}, {@link angula.scope scope},
{@link angular.markup markup}, and {@link guide.data-binding data binding}.
To read about the HTML compiler and the compilation process, see {@link guide.compiler compiler}. * For additional hands-on examples of using `angular`, including more source
For more angular concepts, see the {@link guide Developer Guide}. 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}.