Angular CLI

Code like a Viking

All images: thx to 'wiki and the strong men'

web-dave

David Müllerchen

Developer since 10 Years

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

Makes it easy to follow the styleguide

Help you feeling like a Boss

WHY styleguide?

!!!

How to use it?

Let's start

You need (as normal) node and npm installed

Install Angular CLI

npm i -g @angular/cli

ng v

                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
@angular/cli: 1.0.0-beta.30
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

//cd into your Prpjectfolder
cd hello-cli

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

or

Serve your app

cd hello-cli
ng serve

ng serve --prod

http://localhost:4200/

Project struckture

generate

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


blueprint:	
component
directive 
service 
pipe
module
class
interface
enum

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, treeshacked and precompiled)
ng build --prod

get help

ng help

https://cli.angular.io/

Demo

@webdave_de