ACME

Angular

Cli

Manage

Everything

• What is it
• How to use it
• Demo

angular-cli

web-dave

David Müllerchen

Developer since 10 Years

Since 2 Years at

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/

@webdave_de

@angular_hamburg

AngularJS.DE

Community rocks!

What is it?

angular-cli

A tool to scaffold a

angular WebApp

code generator

Build tool

dev environment

devOps

WHY should I use it?

Handle all your dependencies

Blackbox the Project settings for easy use

Help you feeling like a Boss

Makes it easy to follow the styleguide

WHY styleguide?

!!!

How to use it?

Let's start

You need (as normal) node and npm installed

Install angular-cli

npm install -g angular-cli

ng v
// or
ng version

// angular-cli: 1.0.0-beta.24
// node: 6.9.2
// os: win32 x64

Start a project

//cd into your workspace
cd workspace

//scaffold your project
ng new hello-cli --style=scss

//cd into your workspace
cd workspace

//create a Projectfolder
mkdir hello-cli

//scaffold your project
ng init --style=scss

or

and 106sec later...

Project struckture

Serve your app

cd hello-cli
ng serve

http://localhost:4200/

testing

//unit test using Karma and jasmine
ng test

//e2e test using protractor
ng serve
ng e2e

generate

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


blueprint:	
component
directive 
service 
pipe
module
class
interface
enum

build

// build dev
ng build

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

//build prod (minimized) and precompiled
ng build --prod --aot

The magic of --prod --aot

get help

ng help

https://cli.angular.io/

Demo

@webdave_de

@angular_hamburg

@ngvikingsconf