Getting started with Angular CLI

Sasha VinčićDigital Viking

servitant.se

ngVikingsThe Northernmost Angular Conference

February 11-12, Copenhagen ngvikings.org

Angular CLIA command line interface for Angular

Why Angular CLI?

• Easy to create

• Works right out of the box

• Follows best practices

Photocred: Malmö Eastern egg, Susanne Nilsson, CC BY

Angular CLI

Lets start

• ng newCreate a new project

• ng serveStart it

Photocred: Double powered start, flickr.com/brandsvig, CC BY

Lets test

• ng testRuns test suite

• ng e2eRuns end to end tests

Photocred: Lego People, Peter Dutton, CC BY

ng generate

• ng g component main-header MainHeaderComponent

• ng g service login LoginService

• ng g module sharedsrc/app/shared

Photocred: Wheel of Malmö, Frank Scmidt, CC BY

Components, Services and Module

ng generate

• ng g interface shared/city app/shared/city

• ng g class shared/models/userapp/shared/models/user

Photocred: Non Human Device, Boris Chimp, CC BY

Interfaces, Classes

3rd Party lib installation

npm install @ng-bootstrap/ng-bootstrap

import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap';

@NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) export class AppModule { }

Photocred: Enlightenment, Camilla Nilsson, CC BY

Global lib installation

npm install bootstrap@4.0.0-alpha.5

“styles”: [ “../node_modules/bootstrap/dist/css/bootstrap.css ]

Photocred: Enlightenment, Camilla Nilsson, CC BY

Under the hood

Angular 2.1.0

Webpack 2.1.0-beta

TypeScript 2.0.3

karma, less, sass, tslint

Photocred: Pop the hood, Jesper Yu, CC BY

new projects

• ng new —prefix=ngmalmo

• ng new —style=sass

• ng new —style=less

• ng new —skip-git=true —skip-npm=true

Photocred: Stamps, Michelle, CC BY

More features

• ng init —mobile true

• ng g route

• ng completion 1>> ~/.bashrc 2>>&1

• ng github-pages:deploy

Photocred: Toolbox, Florian Richter, CC BY

some disabled

building

ng build -prodng build -t productionng build —target=production Build for production

Photocred: Ikea, Junky Pamies Alcubilila CC BY

Faster

ng build —aot=true Faster & “smaller”

Photocred: Mellisuga helenae, Ekaterina Chernetsova CC BY

Proxy

proxy.conf.json{ “/api”: { “target”: “http://localhost:3000”, “secure”: false }}

Photocred:réfraction champêtre, Hervé Laville, CC BY

AngularJS Malmö Meetup

Go now to www.menti.com and use the code 80 19 01

Photocred: In the city, Maria Eklind, CC BY