Skip to content

1 creating project

Jump to bottom
hantsy edited this page Sep 22, 2016 · 1 revision

Create project skeleton

Angular 1.5 introduces new component instead of the legacy directive and controller, which make it more close to Angular 2 Component in concept.

And ECMAScript 2015(ES6) make frontend development becomes more productive, but most of morden browsers are not ready for ES6, with the help of Webpack and Babel, we can use tommorrow's technology today.

If you have some knowledge of Gulp, Webpack and ECMAScript 2015, it is better to start the new project with an existed skeleton.

Generate project via YO

Yo is the famous scaffold tools in NodeJS ecosystem. The template in YO is called generator.

There are lots of yo generators ready for use. You can search them from https://npmjs.org directly before starting real work.

generator-gulp-angular is one of my favorite, which is highly starred on Github.com and provides lots of options to generate the project base codes.

Firstly, open your terminal window, and install yo and generator-gulp-angular globally.

npm install -g yo generator-gulp-angular

After they are installed sucessfully, execute the following command.

yo gulp-angular

You will see the following screen, answer the questions one by one. Finally it will generate a fresh copy of base codes for your new project.

hantsy@HANTSY-T540P E:\hantsylabs\angular1-es6-sample
> yo gulp-angular

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |         Welcome!         |
   `---------´   |                          |
    ( _´U`_ )    |     You're using the     |
    /___A___\    |  fantastic generator for |
     |  ~  |     |      scaffolding an      |
   __'.___.'__   | application with Angular |
 ´   `  |° ´ Y ` |         and Gulp!        |
                 '--------------------------'

? Which version of Angular do you want? 1.5.x (stable)
? What Angular modules would you like to have? (ngRoute and ngResource will be
addressed after) (Press <space> to select)angular-animate.js (enable animation
features), angular-cookies.js (handle cookie management), angular-touch.js (for  mobile development), angular-sanitize.js (to securely parse and manipulate HTM L), angular-messages.js (enhanced support for displaying messages within templa tes), angular-aria.js (support for common ARIA attributes)
? Do you need jQuery or perhaps Zepto? jQuery 2.x (new version, lighter, IE9+)
? Would you like to use a REST resource library? ngResource, the official suppo rt for RESTful services
? Would you like to use a router? UI Router, flexible routing with nested views

? Which UI framework do you want? Angular Material, the reference implementatio n of the Google's Material Design specification
? Which CSS preprocessor do you want? Sass (Node), Node.js binding to libsass,
the C version of the popular stylesheet preprocessor, Sass.
? Which JS preprocessor do you want? ES6 (Babel formerly 6to5), ECMAScript 6 co mpiled with Babel which requires no runtime.
? Which HTML template engine would you want? None, I like to code in standard H TML.


angular#1.5.6 bower_components\angular
It's time to use Gulp tasks:
- `$ gulp` to build an optimized version of your application in folder dist
- `$ gulp serve` to start BrowserSync server on your source files with live reload
- `$ gulp serve:dist` to start BrowserSync server on your optimized application without live reload
- `$ gulp test` to run your unit tests with Karma
- `$ gulp test:auto` to run your unit tests with Karma in watch mode
- `$ gulp protractor` to launch your e2e tests with Protractor
- `$ gulp protractor:dist` to launch your e2e tests with Protractor on the dist files

More details are available in docs and recipes
https://github.com/Swiip/generator-gulp-angular/tree/master/docs

The progress will include:

  1. Generates project skeleton codes according to generator templates.
  2. Install build dependencies via npm install command.
  3. Install runtime bower dependencies via bower install command.

Please note the message at the bottom of this info, there are some very useful tips to guide you for the next steps.

Enter the new generated project root folder.

Run the command to start the project in development mode with live reload feature.

gulp serve

After it is running successfully.

Open your favorite browser and naviaget to http://localhost:3000.

Gulp Angular

Explorer the source codes

Enter the root folder of this project, you will see the resources like the following.

README.md         
gulpfile.js    
npm-debug.log       
bower.json        
e2e     
karma.conf.js  
package.json        
src
bower_components  
gulp    
node_modules   
protractor.conf.js
  • gulpfile.js is Gulp configuration file. The Gulp tasks are split into small files, and are placed in the gulp folder.
  • bower.json is Bower dependencies definition file. And there is another hidden file named .bowerrc existed in the root folder which is use for configuring bower. bower_components is the place of the bower dependencies.
  • package.json is the configuration file of Node build system, and node_modules is the folder to place NPM dependencies.
  • karma.conf.js is the configuration file for unit testing by Jasmine and Karma.
  • protractor.conf.js is the configuration file for End 2 End testing via Protractor.

When you execute gulp serve, it will run a series of dependent tasks(watch, scripts, inject). eg. processing javascripts, css, assets files.

  • scritps uses webpack to load app javascripts and transpile the codes to ES5.
  • inject will insert runtime dependencies declared in bower.json into index.html, it is done by a small tool named wiredep automaticially. All project codes can be loadded by ES6 module loader.
  • watch will watch all files produced in this project, including css, javascript files. If there are some change saved, the browser will be reloaded via browserSync automaticially.
Clone this wiki locally