David Muellerchen is a trainer at AngularJS.DE. He loves to speak and teach at meetups and conferences. In his meantime he works as a front-end developer at Acando. During leisure time he jumps through the parks with his kids or rides his racer. He a
unleash the power of angular 2
- What is it
- How to use it
- What's coming next
How many of you are using angular 2?
What is it?
A tool to scaffold a
angular 2 WebApp
WHY should I use it?
Handle all your dependencies
Blackbox the Project settings for easy use
Makes it easy to follow the styleguide
How to use it?
You need (as normal) node and npm installed
npm install -g angular-cli@webpack ng v // or ng version // angular-cli: 1.0.0-beta.11-webpack.2 // node: 6.4.0 // os: win32 x64
The angular-cli team followed the user request and moved from broccoli/SystemJS to webpack to make it easier to use.
Start a project with ng new
//cd into your workspace cd workspace //scaffold your project ng new hello-cli //handle issue #1528 cd hello-cli npm i --save-dev angular-cli@webpack
Currently project generated with ng new will use a wrong local CLI version (issue#1528).
After initializing your project, run npm install --save-dev angular-cli@webpack to set the correct version.
Start a project with ng init
//cd into your workspace cd workspace //create a Projectfolder mkdir hello-cli // optional you can config a (one) CSS preprocessor // --style=scss // --style=sass // --style=less // --style=styl ng init --style=scss
this step takes some time
Serve your app
Custom or 3rd party libs comes here
Our dev folder
//ng g //ng generate component [<path-to-component>/]<component-name> //Component ng g component top-nav
//ng g //ng generate directive [<path-to-directive>/]<directive-name> //Directive ng g directive my-directive
//ng g //ng generate pipe [<path-to-pipe>/]<pipe-name> //Pipe ng g pipe my-pipe
//ng g //ng generate service [<path-to-service>/]<service-name> //Pipe ng g service my-service
//unit test using Karma and jasmine ng test //e2e test using protractor ng serve ng e2e
// build dev ng build //build prod (minimized) ng build --prod
install 3rd party lib via npm and angular-cli.json
ng g route <route>
By David Muellerchen