angular2-es6-seed v0.0.4

Angular2 ES6 seed

A simple seed project to demonstrate bootstrapping of Angular2 using ES6 (The Sixth Edition of JavaScript, known as ES6 or ECMAScript 2015). The project uses (among other things):

• ES6 + Babel (v6.x)
• Angular2 (v2.1.0)
• Browserify + Babelify
• SASS
• Karma + Jasmine
• Gulp (v3.9.1)
• ESLint + config for Google style

Prerequisites

• Node.js v6.x https://nodejs.org/en/

Initial setup

From the root directory of this project, run the following commands:

npm install -g gulp
npm install

Updating when package.json changes

All JavaScript dependencies of the project are specified in the file package.json in the root folder. If this file is updated (new dependency is added, something is removed, or something is updated), you have to run the command:

npm install

to make sure you have all the latest dependencies (the folder node_modules will be updated by this command).

Running the application

Build

Initially, you will not have the folder dist. This folder will contain the built web application from the sources. To build the application, you need to run the command:

gulp dist

Simple HTTP server (with LiveReload)

To run a simple HTTP server (that will serve the built static site, contained in folder dist), in a separate console window run:

gulp start

This simple server will automatically reload the browser if something changes in the dist folder.

Ease of development

To continuously re-build the project when you change some files, in a separate console window run:

gulp watch

If the watcher is running, and you change some code, the project will be rebuilt, dist folder will be updated. Thus, if you have watch and start gulp tasks running in parallel, development of the application becomes a breathe.

JavaScript unit tests

To run JavaScript unit tests, in a separate console window run:

gulp test

This command can be further tailored for your needs. Available variations:

gulp test --once
gulp test --browser chrome
gulp test --browser phantomjs
gulp test --browser chrome --once
...

The order of parameters to gulp test does not matter.

Coverage

To gather coverage status (percent of JavaScript code covered by JS unit tests), in a separate console window run:

gulp coverage

Upon completion, this command will output in the console coverage statistics, and will generate a folder coverage with nicely formated HTML coverage report.

Linting JS code

To run ESLint (will check ES6 JavaScript code), you need to run the following command:

gulp lint

Influences

This seed project was inspired by select/Angular2-ES6-Babel-Browserify-Starter project. That project is quite old - it uses the beta Angular 2 sources. Also that project doesn't work out-of-the-box right now.

Similar projects

• evanplaice/angular2-es6-seed
• tolyo/ng2-brunch-es6-seed
• willyelm/angular2-es6-seed
• blacksonic/angular2-babel-esnext-starter

Useful resources

• AngularClass/awesome-angular2

License

This project is licensed under the MIT license. Please LICENSE file for more information.