diff options
Diffstat (limited to 'docs/content/intro/started.ngdoc')
| -rw-r--r-- | docs/content/intro/started.ngdoc | 146 |
1 files changed, 0 insertions, 146 deletions
diff --git a/docs/content/intro/started.ngdoc b/docs/content/intro/started.ngdoc deleted file mode 100644 index a505b471..00000000 --- a/docs/content/intro/started.ngdoc +++ /dev/null @@ -1,146 +0,0 @@ -@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 Cookbook}. - -* For explanations of the `angular` concepts presented in the examples on this - page, see the {@link guide Developer Guide}. |