diff options
| author | Misko Hevery | 2012-05-30 10:40:59 -0700 |
|---|---|---|
| committer | Misko Hevery | 2012-08-27 14:59:18 -0700 |
| commit | bf8ed8a5324183577f0465038272fc9673bb3e72 (patch) | |
| tree | a66240575ddaefd83d831faec3ed42d6043fe2c5 /docs/content/misc/started.ngdoc | |
| parent | d05a2809a12ef84166e3fb5dcf3eddf887903654 (diff) | |
| download | angular.js-bf8ed8a5324183577f0465038272fc9673bb3e72.tar.bz2 | |
doc(misc) updated getting started to reflect the new homepage
Diffstat (limited to 'docs/content/misc/started.ngdoc')
| -rw-r--r-- | docs/content/misc/started.ngdoc | 153 |
1 files changed, 24 insertions, 129 deletions
diff --git a/docs/content/misc/started.ngdoc b/docs/content/misc/started.ngdoc index 8b29da2f..d621b5ee 100644 --- a/docs/content/misc/started.ngdoc +++ b/docs/content/misc/started.ngdoc @@ -2,142 +2,37 @@ @name Getting Started @description -# Hello World! +We want you to have an easy time while starting to use Angular. We've put together the following steps on your path to +becoming an Angular expert. -A great way for you to get started with AngularJS is to create the tradtional -"Hello World!" app: +1. Read the {@link guide/concepts conceptual overview}.<br/>Understand Angular's vocabulary and how all the Angular + components work together. +1. Do the {@link tutorial/ AngularJS Tutorial}.<br/>Walk end-to-end through building and application complete with tests + on top of a node.js web server. Covers every major AngularJS feature and show you how to set up your development + environment. +1. Download or clone the {@link https://github.com/angular/angular-seed Seed App project template}.<br/>Gives you a + starter app with a directory layout, test harness, and scripts to begin building your application. -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> +#Further Steps -The resulting web page should look something like the following: +##Watch Videos -<img class="center" src="img/helloworld.png" border="1"> +If you haven’t had a chance to watch the videos from the homepage, please check out: +* {@link http://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE%3D Introduction to AngularJS} +* {@link http://www.youtube.com/watch?v=Yg-R1gchccg&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE%3D Creating Directives} +* {@link http://www.youtube.com/watch?v=IRelx4-ISbs&list=PL173F1A311439C05D&context=C48ac877ADvjVQa1PpcFONnl4Q5x8hqvT6tRBTE-m0-Ym47jO3PEE%3D Communicating with Servers} -Now let's take a closer look at that code, and see what is going on behind -the scenes. +And visit our {@link http://www.youtube.com/user/angularjs YouTube channel} for more AngularJS video presentations and +tutorials. -The `ng-app` tags tells angular to process the entire HTML page and bootstrap the app when the page -is loaded: +##Subscribe -<pre> - <html ng-app> -</pre> +* Subscribe to the {@link http://groups.google.com/forum/?fromgroups#!forum/angular mailing list}. Ask questions here! +* Follow us on {@link https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fangularjs.org%2F®ion=follow_link&screen_name=angularjs&source=followbutton&variant=2.0 Twitter} +* Add us to your circles on {@link https://plus.google.com/110323587230527980117/posts Google+} -The next line downloads the angular script: +##Read more -<pre> - <script src="http://code.angularjs.org/angular-?.?.?.min.js"></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 AngularJS to -bind a dynamic expression to our greeting text. - -# Hello AngularJS 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 browser window. - -<doc:example> - <doc:source> - Your name: <input type="text" ng-model="yourname" placeholder="World"> - <hr> - Hello {{yourname || 'World'}}! - </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 guide/directive directive} - is bound to a model variable called `yourname`. -* The double curly braces notation binds the `yourname` model to the greeting text. - -* 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/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: - -## 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. - - -## Data - -The Model is referenced from properties on {@link guide/scope 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: - -* 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 - -* If you like what you've learned so far, you should definitely check out our awesome {@link -tutorial/ Tutorial}, which walks you through the process of building real apps with AngularJS. - -* For further explanations and examples of the AngularJS concepts presented on this page, see the -{@link guide/index Developer Guide}. - -* For additional hands-on examples of using AngularJS, including more source code that you can -copy and paste into your own pages, take a look through the {@link cookbook/ Cookbook}. +The AngularJS documentation includes the {@link guide/index Developer Guide} covering concepts and the +{@link api/ API Reference} for syntax and usage. |