mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
134 lines
3.7 KiB
Text
134 lines
3.7 KiB
Text
@ngdoc overview
|
|
@name Tutorial
|
|
@description
|
|
|
|
|
|
A great way to get introduced to angular is to work through this tutorial, which walks you through
|
|
the construction of an angular web app. The app you will build is a catalog that displays a list of
|
|
Android devices, lets you filter the list to see only devices that interest you, and then view
|
|
details for any device.
|
|
|
|
|
|
<img src="img/tutorial/catalog_screen.png">
|
|
|
|
|
|
As you work through this tutorial, you will learn how angular makes browsers smarter — without the
|
|
use of extensions or plugins.
|
|
|
|
|
|
* You will see examples of how to use client-side data binding and dependency injection to build
|
|
dynamic views of data that change immediately in response to user actions.
|
|
* You will see how Angular creates listeners on your data without the need for DOM manipulation.
|
|
* You will learn a better, easier way to test your web apps.
|
|
* You will learn how to use Angular services to make common web tasks, such as getting data into
|
|
your app, easier.
|
|
|
|
|
|
And all of this works in any browser without modifications!
|
|
|
|
|
|
When you finish the tutorial you will be able to:
|
|
|
|
|
|
* Create a dynamic application that works in any browser
|
|
* Define the differences between angular and common JavaScript frameworks
|
|
* Understand how data binding works in angular
|
|
* Use the angular-seed project to quickly boot-strap your own projects
|
|
* Create and run tests
|
|
* Identify resources for learning more about angular
|
|
|
|
|
|
Mac and Linux users can work through the tutorial, run tests, and experiment with the code using
|
|
Git or the snapshots described below. Windows users will be able read the tutorial but won't be
|
|
able to run the tests or experiment with the code.
|
|
|
|
|
|
You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
|
|
really digging into it. If you're looking for a shorter introduction to angular, check out {@link
|
|
http://docs.angularjs.org/#!started started}.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a name="PreReqs"></a>
|
|
# Prerequisites
|
|
|
|
|
|
To run the tutorial app and tests on your machine you will need the following:
|
|
|
|
|
|
* A Mac or Linux machine (required for running the tutorial scripts)
|
|
* An http server running on your system. Mac and Linux machines typically have Apache preinstalled.
|
|
If you don't already have an http server installed, you can install `node.js` ({@link
|
|
https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager node.js install guide})
|
|
or another http sever.
|
|
* {@link http://java.com Java}.
|
|
* A web browser.
|
|
* A text editor.
|
|
|
|
|
|
|
|
|
|
# Working with the code
|
|
|
|
|
|
There are two ways that you can you follow this tutorial and hack on the code:
|
|
|
|
|
|
## Using Git
|
|
|
|
|
|
The following instructions are for Git users. If you're not a Git user, skip down to the "Using
|
|
Snapshots" section.
|
|
|
|
|
|
1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system.
|
|
|
|
|
|
2. Clone the angular-phonecat repository located at {@link
|
|
https://github.com/angular/angular-phonecat GitHub} by running the following command in a terminal:
|
|
|
|
|
|
git clone git://github.com/angular/angular-phonecat.git
|
|
|
|
|
|
This will create a directory called `angular-phonecat` in the current directory.
|
|
|
|
|
|
3. Change your current directory to `angular-phonecat`.
|
|
|
|
|
|
cd angular-phonecat
|
|
|
|
|
|
The tutorial instructions assume you are running all commands from this directory.
|
|
|
|
|
|
|
|
|
|
## Using Snapshots
|
|
|
|
|
|
1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system.
|
|
|
|
|
|
2. {@link http://code.angularjs.org/angular-phonecat-snapshots.zip Download the zip archive} with
|
|
all files and unzip them into `[tutorial-dir]` directory.
|
|
|
|
|
|
|
|
|
|
3. Change directories to `[tutorial-dir]/sandbox`.
|
|
|
|
|
|
cd [tutorial-dir]/sandbox
|
|
|
|
|
|
|
|
|
|
Let's get going with {@link tutorial/step_00 step 0}.
|
|
|