This applicaion is a slight modification of the official Angular JS tutorial. It helps me understand the Angular Framework.
The contents are in Chinese, it is a detailed timeline for a time period called "Age of Discovery" found in http://zh.wikipedia.org/wiki/User:Asaikana/%E5%9C%B0%E7%90%86%E5%A4%A7%E5%8F%91%E7%8E%B0%E5%B9%B4%E8%A1%A8 .
Except the timeline documentation and Angular, other part of the software are licensed in Apache license.
This application takes the developer through the process of building a web-application using angular. The application is loosely based on the Google Phone Gallery, which no longer exists. Here is a historical reference: Google Phone Gallery on WayBack.
Each tagged commit is a separate lesson teaching a single aspect of angular.
The full tutorial can be found at http://docs.angularjs.org/tutorial.
- Get Node.js.
- Install the tool dependencies (
npm install
)
- The application filesystem layout structure is based on the angular-seed project.
- There is no dynamic backend (no application server) for this application. Instead we fake the an application server by fetching static json files.
- Read the Development section at the end to familiarize yourself with running and developing an angular application.
You can check out any point of the tutorial using git checkout step-?
To see the changes which between any two lessons use the git diff command. git diff step-?..step-?
- Add ngApp directive to bootstrap the app
- Add simple template with an expression
- Add static html list with two phones into index.html. We will convert this static page into dynamic one with the help of angular.
- Convert the static html list into dynamic one by:
- creating
PhoneListCtrl
controller for the application - extracting the data from HTML, moving it into the controller as an in-memory dataset.
- converting the static HTML document into an Angular template with the use of the
ngRepeat
directive which iterates over the dataset of phones.ngRepeat
clones its contents for each instance in the dataset and renders it into the view.
- creating
- Add a simple unit test to show off how to write tests and run them with Karma
- Add a search box to demonstrate how:
- the data-binding works on input fields.
- to use the
filter
filter. ngRepeat
automatically shrinks and grows the number of phones in the view.
- Add an end-to-end test to:
- show how end-to-end tests are written and how to run them with Protractor.
- prove that the search box and the repeater are correctly wired together.
- Add
age
property to each phone in the data model. - Add a
<select>
input to change the phone list order. - Override the default order value in the controller.
- Add unit and e2e tests for this feature.
- Replac the in-memory dataset with data loaded from the server (in
the form of static
phones.json
file).- The
phones.json
file is loaded using the$http
service.
- The
- Demonstrate the use of [services][service] and dependency injection.
- The [$http] service is injected into the controller through dependency injection.
- Add phone images and links to new pages that show the phone details.
- Add end2end tests that verify the links to the detail pages.
- Add CSS to style the page just a notch.
-
Introduce the $route service which allows binding URLs for deep-linking with views:
- Create
PhoneCatCtrl
which governs the entire app and contains $route configuration. - Install
angular-route
using bower and load thengRoute
module. (Be sure to run npm install again.) - Copy route parameters to root scope
params
property for access in sub controllers. - Replace the contents of
index.html
with thengView
directive, which will display the partial template of the current route.
- Create
-
Create phone list route:
- Map
/phones
route toPhoneListCtrl
andpartails/phones-list.html
. - Preserve existing
PhoneListCtrl
controller. - Move existing html from
index.html
topartials/phone-list.html
.
- Map
-
Create phone details route:
- Map
/phones/<phone-id>
route toPhoneDetailCtrl
andpartails/phones-detail.html
. - Create empty placeholder
PhoneDetailsCtrl
controller.
- Map
- Implement
PhoneDetailCtrl
controller to fetch the details for a specific phone from a JSON file using$http
service. - Update the template for the phone detailed view.
- Add CSS to make the phone details page look "pretty".
- Add custom
checkmark
filter. - Update phone detail template to use
checkmark
filter. - Add unit test for the filter.
In the phone detail view, clicking on a thumbnail image, changes the main phone image to be the large version of the thumbnail image.
- Define
mainImageUrl
model variable in thePhoneDetailCtrl
and set its default value. - Create
setImage()
controller method to changemainImageUrl
. - Register an expression with the
ngClick
directive on thumb images to set the main image, usingsetImage()
. - Add e2e tests for this feature.
- Add CSS to change the mouse cursor when user points at thumnail images.
- Replace [$http] with $resource.
- Created a custom
Phone
service that represents the$resource
client.
- Add animations to the application:
- Animate changes to the phone list, adding, removing and reordering phones.
- Animate changes to the main phone image in the detail view.
The following docs describe how you can test and develop further this application.
The application relies upon various node.js tools, such as Bower, Karma and Protractor. You can install these by running:
npm install
This will also run bower, which will download the angular files needed for the current step of the tutorial.
Most of the scripts described below will run this automatically but it doesn't do any harm to run it whenever you like.
- Run
npm start
- navigate your browser to
http://localhost:8000/app/index.html
to see the app running in your browser.
We recommend using Jasmine and Karma for your unit tests/specs, but you are free to use whatever works for you.
- Start Karma with
npm test
- A browser will start and connect to the Karma server. Chrome is the default browser, others can
be captured by loading the same url as the one in Chrome or by changing the
test/karma.conf.js
file.
- A browser will start and connect to the Karma server. Chrome is the default browser, others can
be captured by loading the same url as the one in Chrome or by changing the
- Karma will sit and watch your application and test JavaScript files. To run or re-run tests just change any of your these files.
We recommend using Jasmine and Protractor for end-to-end testing.
Requires a webserver that serves the application. See Running the app during development, above.
- Serve the application: run
npm start
. - In a separate console run the end2end tests:
npm run protractor
. Protractor will execute the end2end test scripts against the web application itself.- The configuration is set up to run the tests on Chrome directly. If you want to run against
other browsers then you must install the webDriver,
npm run update-webdriver
, and modify the configuration attest/protractor-conf.js
.
- The configuration is set up to run the tests on Chrome directly. If you want to run against
other browsers then you must install the webDriver,
app/ --> all of the files to be used in production
css/ --> css files
app.css --> default stylesheet
img/ --> image files
index.html --> app layout file (the main html template file of the app)
js/ --> javascript files
app.js --> the main application module
controllers.js --> application controllers
directives.js --> application directives
filters.js --> custom angular filters
services.js --> custom angular services
animations.js --> hooks for running JQuery animations with ngAnimate
partials/ --> angular view partials (partial html templates) used by ngRoute
partial1.html
partial2.html
bower_components --> 3rd party js libraries, including angular and jquery
scripts/ --> handy scripts
update-repo.sh --> pull down the latest version of this repos
(BE CAREFUL THIS DELETES ALL CHANGES YOU HAVE MADE)
private/ --> private scripts used by the Angular Team to maintain this repo
test/ --> test source files and libraries
karma.conf.js --> config file for running unit tests with Karma
protractor-conf.js --> config file for running e2e tests with Protractor
e2e/
scenarios.js --> end-to-end specs
unit/ --> unit level specs/tests
controllersSpec.js --> specs for controllers
directivesSpec.js --> specs for directives
filtersSpec.js --> specs for filters
servicesSpec.js --> specs for services
For more information on AngularJS please check out http://angularjs.org/