Angular Quick Start Local customer event in Winterthur Thomas Gassmann @gassmannT

Thomas Gassmann Senior Consultant, Trainer, Speaker thomasgassmann.ch @gassmannT

Agenda 28.08.2018 Angular Developer Quick Start 4 ▪ Basics of Angular ▪ How to start ▪ Demo

28.08.2018 Angular Developer Quick Start 5

Plattform 28.08.2018 Angular Developer Quick Start 6 Dependency Injection Decorators Zones Compile Binding Render Material Mobile Universal CLI Language Service Augury ngUpdate Router Animation i18n

Module Anatomy of an Angular Application 28.08.2018 Angular Developer Quick Start 7 Component Component Component Services

Component 28.08.2018 Angular Developer Quick Start 8 import { Component } from '@angular/core'; @Component({ selector: 'app-product-list’, template: `` }) export class ProductListComponent { pageTitle: string = 'About'; }

Component and DataBinding 28.08.2018 Angular Developer Quick Start 9 ▪ {{}} : Display the value in the UI ▪ [] : Bind an element-property to a property of your class ▪ () : Bind an element-event to a method of your class ▪ [()] : Bind a property two-way that you don’t have to think whether it’s ([]) or [()], just use the “banana in a box”-mnemonic to get the syntax right

Interpolation ( {{...}} ) 28.08.2018 Angular Developer Quick Start 10 @Component({ selector: 'my-app', template: `

Details of {{fullname}}

` }) export class AppComponent { fullname: string = "Lara Croft"; }

Property Binding ( [...] ) 28.08.2018 Angular Developer Quick Start 11 @Component({ template: `… changed` }) export class AppComponent { isUnchanged: boolean = true; }

Event Binding ( (...) ) 28.08.2018 Angular Developer Quick Start 12 @Component({ template: `… Save` }) export class AppComponent { onSave() { // do something } }

Two-Way Data Binding ( [(...)] ) 28.08.2018 Angular Developer Quick Start 13 @Component({ selector: 'my-app’, template: `

Details of {{person.fullname}}

` }) export class AppComponent { person: Person = { fullname: 'Lara Croft' }; } interface Person { fullname: string }

Service 28.08.2018 Angular Developer Quick Start 14 ▪ A service is a class that gets injected into components ▪ for example a class that encapsulates access to a REST- Api ▪ or to allow a communication between components Component Component Component Service

Service 28.08.2018 Angular Developer Quick Start 15 @Injectable() export class ProductService { constructor(private http: HttpClient) { } getProducts(): Observable { ... } }

Using a service 28.08.2018 Angular Developer Quick Start 16 import { ProductService } from './product.service'; @Component({ … }) export class ProductListComponent { private service: ProductService; constructor(service: ProductService) { this.service = service; } }

Using a service 28.08.2018 Angular Developer Quick Start 17 import { ProductService } from './product.service'; @Component({ … }) export class ProductListComponent { constructor(private service: ProductService) { } }

Module 28.08.2018 Angular Developer Quick Start 18 ▪ Every App has at least one module, the Root Module ▪ The module can bundle multiple components ▪ One Component must be bootstrapped for startup Component Component Component Root Module bootstrap

Module 28.08.2018 Angular Developer Quick Start 19 @NgModule({ imports: [ BrowserModule, HttpClientModule, FormsModule, AppRoutingModule, ], declarations: [AppComponent], providers: [ProductService], bootstrap: [AppComponent] }) export class AppModule {}

How to start? 28.08.2018 Angular Developer Quick Start 20

28.08.2018 Angular Developer Quick Start 21 Download Visual Studio Code

28.08.2018 Angular Developer Quick Start 22 Install VSCode Extension

28.08.2018 Angular Developer Quick Start 23 Get it from: nodejs.org

28.08.2018 Angular Developer Quick Start 24 npm install @angular/cli

28.08.2018 Angular Developer Quick Start 25 npm install @angular/cli -g

Angular CLI 28.08.2018 Angular Developer Quick Start 26 ▪ Command line interface for Angular ▪ Build an Angular application ▪ Generate files (Scaffolding) ▪ Execute / run the application ▪ Run unit and e2e tests ▪ Prepare and «optimize» the application for deployment

CLI: Generate new app 28.08.2018 Angular Developer Quick Start 27 ng new my-app Generate a new app in /my-app ng new my-app --dry-run Report without writing files ng new my-app --skip-install Generate without npm install ng new --style scss Use SCSS instead of CSS ng new my-app --routing Generate app with routing

Project structure 28.08.2018 Angular Developer Quick Start 28

CLI: Generate 28.08.2018 Angular Developer Quick Start 29 ng generate Generate by schematics ng g c product-list Generate a component ng g c --inline-template Template in ts file? ng g c --spec=false Without unit tests ng g c --flat Should a folder be created

CLI: Serve and build 28.08.2018 Angular Developer Quick Start 30 ng serve Serve the app ng s -o Serve the app and open ng build Build in dev mode ng build --prod Build in prod mode

CLI: Other commands 28.08.2018 Angular Developer Quick Start 31 ng test Run unit tests ng test --code-coverage Create code coverage doc ng e2e Run end-to-end test ng doc Open angular.io API reference

CLI: Other commands (since Angular CLI 6) 28.08.2018 Angular Developer Quick Start 32 ng g application Create a project in same ws ng g library Create a library ng add Add package based on schematics ng update Update packages Or create own schematics

Demo 28.08.2018 Angular Developer Quick Start 33

Ressources 28.08.2018 Angular Developer Quick Start 36 ▪ angular.io/docs ▪ github.com/gassmannT ▪ swissangular.com ▪ m.trivadis.com/angular ▪ angular-academy.ch

Upcoming events 28.08.2018 Angular Developer Quick Start 37

Thank you Thomas Gassmann @gassmannT thomasgassmann.net [email protected] 28.08.2018 Angular Developer Quick Start 38

No content