Site Template Application

Overview

This is template application for web site development based on AngularJS as JavaScript framework and Bootstrap as css framework.

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.

Development with `site-template-app`

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

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.

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

If JDK is not already installed, you can download it here.

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
    item/...             --> files for the `core.item` submodule, including JS source code, specs
    core.module.js       --> the core module
  img/...                --> image files
  item-detail/...        --> files for the `itemDetail` module, including JS source code, HTML templates, specs
  item-list/...          --> files for the `itemList` module, including JS source code, HTML templates, specs
  items/...              --> static JSON files with phone data (used to fake a backend API)
  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`)

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/.

SCORE1387/site-app-template