angular-cli

unleash the power of angular 2

• What is it
• How to use it
• Demo
• What's coming next

angular-cli

web-dave

David Müllerchen

Developer since 10 Years

Since 2 Years at acando

Vanila.js, jQuery, Bootstrap, Angularjs, Angular Material, Angular 2

node.js, mysql, mssql, php

Blog: https://www.webdave.de/

Github: https://github.com/web-dave/

Twitter: @webdave_de

How many of you are using angular 2?

angular 2

What is it?

angular-cli

A tool to scaffold a

angular 2 WebApp

code generator

Build tool

dev environment

devOps

WHY should I use it?

Handle all your dependencies

Blackbox the Project settings for easy use

Makes it easy to follow the styleguide

WHY styleguide?

no styleguide

follow styleguide

compare

angular-cli

How to use it?

Let's start

You need (as normal) node and npm installed

Install angular-cli

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

Note:

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

IMPORTANT NOTE:

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

ng serve

http://localhost:4200/

Project struckture

public

Custom or 3rd party libs comes here

src

Our dev folder

generate

//ng g
//ng generate component [<path-to-component>/]<component-name>


//Component	
ng g component top-nav

component

generate

//ng g
//ng generate directive [<path-to-directive>/]<directive-name>

//Directive	
ng g directive my-directive

directive

generate

//ng g
//ng generate pipe [<path-to-pipe>/]<pipe-name>

//Pipe
ng g pipe my-pipe

pipe

generate

//ng g
//ng generate service [<path-to-service>/]<service-name>

//Pipe
ng g service my-service

service

testing

//unit test using Karma and jasmine
ng test

//e2e test using protractor
ng serve
ng e2e

build

// build dev
ng build

//build prod (minimized)
ng build --prod

get help

ng help

https://cli.angular.io/

live coding

Comming next

install 3rd party lib via npm and angular-cli.json

ng g route <route>

Questions?

Blog: https://www.webdave.de/

Github: https://github.com/web-dave/

Twitter: @webdave_de