aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/misc/started.ngdoc
diff options
context:
space:
mode:
authorIgor Minar2011-06-06 08:50:35 -0700
committerIgor Minar2011-06-06 22:52:02 -0700
commit7f1e2e48467f80cc083d24b44f088620e4e7bcb6 (patch)
tree731a91366c5780985be6d4c5ddbe34e307d5cb70 /docs/content/misc/started.ngdoc
parent5533e48dead5cff3107e72ee80bf0f19df77c1e9 (diff)
downloadangular.js-7f1e2e48467f80cc083d24b44f088620e4e7bcb6.tar.bz2
new batch of docs
Diffstat (limited to 'docs/content/misc/started.ngdoc')
-rw-r--r--docs/content/misc/started.ngdoc145
1 files changed, 96 insertions, 49 deletions
diff --git a/docs/content/misc/started.ngdoc b/docs/content/misc/started.ngdoc
index a505b471..a94f01ac 100644
--- a/docs/content/misc/started.ngdoc
+++ b/docs/content/misc/started.ngdoc
@@ -3,68 +3,89 @@
@name Getting Started
@description
+
# Hello World!
-A great way for you to get started with `angular` is to create the tradtional
+
+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`).
+
+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
+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 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>
+ <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
+(For details on what happens when `angular` processes an HTML page,
+see {@link guide/dev_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
+
+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
+
+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:
+
+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"/>
@@ -73,74 +94,100 @@ This example demonstrates `angular`'s two-way data binding:
</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
+
+* The text input {@link api/angular.widget widget} called `yourname` is bound to a model variable
+called
`yourname`.
-* The double curly braces notation binds the variable `yourname` to the
+* 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
+* 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
+
+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/dev_guide.templates.databinding 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:
+
+# 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!
+
+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
+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 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:
+The Model is referenced from properties on {@link guide/dev_guide.scopes 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:
+
<img class="left" src="img/angular_parts.png" border="0" />
-In addition, `angular` comes with a set of Services, which have the following
-properties:
+
+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.
+* 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 Cookbook}.
-* For explanations of the `angular` concepts presented in the examples on this
- page, see the {@link guide Developer Guide}.
+* For explanations and examples of the angular concepts presented on this page, see the {@link
+guide/index Developer Guide}.
+
+
+* 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/ Cookbook}.
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-04 03:57:25 +0000