Repository files navigation

This application takes the developer through the process of building a web-application usingAngularJS. The application is loosely based on theGoogle 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 the framework.

The full tutorial can be found athttps://docs.angularjs.org/tutorial.

• A good place to learn about setting up git ishere.
• You can find documentation and download githere.

• GetNode.js.
• Install the tool dependencies:npm install

• The application filesystem layout structure is based on theangular-seed project.
• There is no dynamic backend (no application server) for this application. Instead we fake theapplication server by fetching static JSON files.
• Read theDevelopment section at the end to familiarize yourself with running and developingan Angular application.

You can check out any point of the tutorial using:

git checkout step-?

To see the changes made between any two lessons use thegit diff command:

git diff step-?..step-?

• Add the 'angular.js' script.
• Add thengApp directive to bootstrap the application.
• Add a simple template with an expression.

• Add a stylesheet file ('app/app.css').
• Add a static list with two phones.

• Convert the static phone list to dynamic by:
  • Creating aPhoneListController controller.
  • Extracting the data from HTML into the controller as an in-memory dataset.
  • Converting the static document into a template with the use of thengRepeat directive.
• Add a simple unit test for thePhoneListController controller to show how to write tests andrun them using Karma.

• Introduce components.
• Combine the controller and the template into a reusable, isolatedphoneList component.
• Refactor the application and tests to use thephoneList component.

• Refactor the layout of files and directories, applying best practices and techniques that willmake the application easier to maintain and expand in the future:
  • Put each entity in its own file.
  • Organize code by feature area (instead of by function).
  • Split code into modules that other modules can depend on.
  • Use external templates in.html files (instead of inline HTML strings).

• Add a search box to demonstrate:
  • How the data-binding works on input fields.
  • How to use thefilter filter.
  • HowngRepeat 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 used.
  • Prove that the search box and the repeater are correctly wired together.

• Add anage property to the phone model.
• Add a drop-down menu to control the phone list order.
• Override the default order value in controller.
• Add unit and end-to-end tests for this feature.

• Replace the in-memory dataset with data loaded from the server (in the form of a static'phone.json' file to keep the tutorial backend agnostic):
  • The JSON data is loaded using the$http service.
• Demonstrate the use ofservices anddependency injection (DI):
  • $http is injected into the controller through DI.
  • Introduce DI annotation methods:.$inject and inline array

• Add a phone image and links to phone pages.
• Add an end-to-end test that verifies the phone links.
• Tweak the CSS to style the page just a notch.

• Introduce the$route service, which allows binding URLs to views for routing and deep-linking:
  • Add thengRoute module as a dependency.
  • Configure routes for the application.
  • Use thengView directive in 'index.html'.
• Create a phone list route (/phones):
  • Map/phones to the existingphoneList component.
• Create a phone detail route (/phones/:phoneId):
  • Map/phones/:phoneId to a newphoneDetail component.
  • Create a dummyphoneDetail component, which displays the selected phone ID.
  • Pass thephoneId parameter to the component's controller via$routeParams.

• Implement fetching data for the selected phone and rendering to the view:
  • Use$http inPhoneDetailController to fetch the phone details from a JSON file.
  • Create the template for the detail view.
• Add CSS styles to make the phone detail page look "pretty-ish".

• Implement a customcheckmark filter.
• Update thephoneDetail template to use thecheckmark filter.
• Add a unit test for thecheckmark filter.

• Make the thumbnail images in the phone detail view clickable:
  • Introduce amainImageUrl property onPhoneDetailController.
  • Implement thesetImage() method for changing the main image.
  • UsengClick on the thumbnails to register a handler that changes the main image.
  • Add an end-to-end test for this feature.

• Replace$http with$resource.
• Create a customPhone service that represents the RESTful client.
• Use a custom Jasmine equality tester in unit tests to ignore irrelevant properties.

• Add animations to the application:
  • Animate changes to the phone list, adding, removing and reordering phones withngRepeat.
  • Animate view transitions withngView.
  • Animate changes to the main phone image in the phone detail view.
• Showcase three different kinds of animations:
  • CSS transition animations.
  • CSS keyframe animations.
  • JavaScript-based animations.

The following docs describe how you can test and develop this application further.

The application relies upon various Node.js tools, such asBower,Karma andProtractor. 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 thetutorial.

Most of the scripts described below will run this automatically but it doesn't do any harm to runit whenever you like.

• Runnpm start.
• Navigate your browser tohttp://localhost:8000/ to see the applicationrunning.

We recommend usingJasmine andKarma for your unit tests/specs, but you are freeto use whatever works for you.

• Start Karma withnpm test.
• A browser will start and connect to the Karma server. Chrome and Firefox are the default browsers,others can be captured by loading the same URL or by changing thekarma.conf.js file.
• Karma will sit and watch your application and test JavaScript files. To run or re-run tests justchange any of your these files.

We recommend usingProtractor for end-to-end (e2e) testing.

It requires a webserver that serves the application. See theRunning the Application during Development section, above.

• Serve the application with:npm start
• In a separate terminal/command line window run the e2e tests:npm run protractor.
• Protractor will execute the e2e test scripts against the web application itself. The project isset up to run the tests on Chrome directly. If you want to run against other browsers, you mustmodify the configuration ate2e-tests/protractor-conf.js.

Note:Under the hood, Protractor uses theSelenium Standalone Server, which in turn requirestheJava Development Kit (JDK) to be installed on your local machine. Check this by runningjava -version from the command line.

If JDK is not already installed, you can download ithere.

app/                     --> all the source code of the app (along with unit tests)  bower_components/...   --> 3rd party JS/CSS libraries, including Angular and jQuery  core/                  --> all the source code of the core module (stuff used throughout the app)    checkmark/...        --> files for the `checkmark` filter, including JS source code, specs    phone/...            --> files for the `core.phone` submodule, including JS source code, specs    core.module.js       --> the core module  img/...                --> image files  phone-detail/...       --> files for the `phoneDetail` module, including JS source code, HTML templates, specs  phone-list/...         --> files for the `phoneList` module, including JS source code, HTML templates, specs  phones/...             --> static JSON files with phone data (used to fake a backend API)  app.animations.css     --> hooks for running CSS animations with `ngAnimate`  app.animations.js      --> hooks for running JS animations with `ngAnimate`  app.config.js          --> app-wide configuration of Angular services  app.css                --> default stylesheet  app.module.js          --> the main app module  index.html             --> app layout file (the main HTML template file of the app)e2e-tests/               --> config and source files for e2e tests  protractor.conf.js     --> config file for running e2e tests with Protractor  scenarios.js           --> e2e specsnode_modules/...         --> development tools (fetched using `npm`)scripts/                 --> handy scripts  private/...            --> private scripts used by the Angular Team to maintain this repo  update-repo.sh         --> script for pulling down the latest version of this repo (!!! DELETES ALL CHANGES YOU HAVE MADE !!!)bower.json               --> Bower specific metadata, including client-side dependencieskarma.conf.js            --> config file for running unit tests with Karmapackage.json             --> Node.js specific metadata, including development tools dependencies

For more information on AngularJS, please check outhttps://angularjs.org/.