AngularJS Seed project Application

Overview

This application takes the developer through the process of building a web-application using AngularJS. 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 the framework.

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

Prerequisites

Git

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

Node.js and Tools

• Get Node.js.
• Install the tool dependencies: npm install

Workings of the Application

• 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 application server by fetching static JSON files.
• Read the Development section at the end to familiarize yourself with running and developing an Angular application.

Installing Dependencies

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.

Running the Application during Development

• Run npm start.
• Navigate your browser to http://localhost:8000/ to see the application
• running.

Unit Testing

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 and Firefox are the default browsers, others can be captured by loading the same URL or by changing the karma.conf.js file.
• Karma will sit and watch your application and test JavaScript files. To run or re-run tests just change any of your these files.

End-to-End Testing

We recommend using Protractor for end-to-end (e2e) testing.

It requires a webserver that serves the application. See the Running 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 is set up to run the tests on Chrome directly. If you want to run against other browsers, you must modify the configuration at e2e-tests/protractor-conf.js.

Application Directory Layout

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
  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 specs

node_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 dependencies
karma.conf.js            --> config file for running unit tests with Karma
package.json             --> Node.js specific metadata, including development tools dependencies

Contact

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