DotNetDay18 Thomas Gassmann und Bandixen Angular Quick Start

DotNetDay18 Thomas Gassmann und Bandixen Angular Quick Start

Angular ist das JavaScript Framework, von welchem heute alle sprechen und welches jeder Kunde einsetzen will. In dieser Session lernen Sie die Grundlagen der Web-Entwicklung mit Angular 5 kennen und bekommen einen Überblick über den initialen Setup für den erfolgreichen Start. Nach einer Einführung in die Grundlagen zeigen wir Ihnen, wie sie mit Visual Studio Code und dem Angular Command Line Interface (Angular CLI) sofort loslegen können.

http://www.thomasgassmann.net
http://www.thomasbandixen.ch
http://www.m.trivadis.com/angular

E6cffbf3b7a5fbfee4707033ef1636f5?s=128

dotnetday

May 29, 2018
Tweet

Transcript

  1. Angular 6 Quick Start .NET Day Switzerland 2018 Thomas Gassmann

    @gassmannT Thomas Bandixen @tbandixen
  2. Who we are 29.05.2018 Angular Developer Quick Start 3 Thomas

    Bandixen Senior Consultant, Trainer, Speaker thomasbandixen.ch @tbandixen Thomas Gassmann Senior Consultant, Trainer, Speaker thomasgassmann.ch @gassmannT
  3. Agenda 29.05.2018 Angular Developer Quick Start 4 ▪ Basics of

    Angular ▪ How to start ▪ Demo
  4. 29.05.2018 Angular Developer Quick Start 5

  5. Plattform 29.05.2018 Angular Developer Quick Start 6 Dependency Injection Decorators

    Zones Compile Binding Render Material Mobile Universal CLI Language Service Augury ngUpdate Router Animation i18n
  6. Module Anatomy of an Angular Application 29.05.2018 Angular Developer Quick

    Start 7 Component Component Component Services
  7. Component 29.05.2018 Angular Developer Quick Start 8 import { Component

    } from '@angular/core'; @Component({ selector: 'app-product-list’, template: `<div> <h1>{{ pageTitle }}</h1> </div>` }) export class ProductListComponent { pageTitle: string = 'About'; } <app-product-list></app-product-list>
  8. Component and DataBinding 29.05.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
  9. Interpolation ( {{...}} ) 29.05.2018 Angular Developer Quick Start 10

    @Component({ selector: 'my-app', template: `<h1>Details of {{fullname}}</h1>` }) export class AppComponent { fullname: string = "Lara Croft"; }
  10. Property Binding ( [...] ) 29.05.2018 Angular Developer Quick Start

    11 @Component({ template: `… <span [hidden]="isUnchanged">changed</span>` }) export class AppComponent { isUnchanged: boolean = true; }
  11. Event Binding ( (...) ) 29.05.2018 Angular Developer Quick Start

    12 @Component({ template: `… <button (click)="onSave()">Save</button>` }) export class AppComponent { onSave() { // do something } }
  12. Two-Way Data Binding ( [(...)] ) 29.05.2018 Angular Developer Quick

    Start 13 @Component({ selector: 'my-app’, template: `<h1>Details of {{person.fullname}}</h1> <input type="text" [(ngModel)]="person.fullname">` }) export class AppComponent { person: Person = { fullname: 'Lara Croft' }; } interface Person { fullname: string }
  13. Service 29.05.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
  14. Service 29.05.2018 Angular Developer Quick Start 15 @Injectable() export class

    ProductService { constructor(private http: HttpClient) { } getProducts(): Observable<Product[]> { ... } }
  15. Using a service 29.05.2018 Angular Developer Quick Start 16 import

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

    { ProductService } from './product.service'; @Component({ … }) export class ProductListComponent { constructor(private service: ProductService) { } }
  17. Module 29.05.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
  18. Module 29.05.2018 Angular Developer Quick Start 19 @NgModule({ imports: [

    BrowserModule, HttpClientModule, FormsModule, AppRoutingModule, ], declarations: [AppComponent], providers: [ProductService], bootstrap: [AppComponent] }) export class AppModule {}
  19. How to start?

  20. Angular CLI 29.05.2018 Angular Developer Quick Start 21 ▪ 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
  21. 29.05.2018 Angular Developer Quick Start 22 npm install <PACKAGE-NAME>

  22. 29.05.2018 Angular Developer Quick Start 24 npm install @angular/cli

  23. 29.05.2018 Angular Developer Quick Start 25 npm install @angular/cli -g

  24. CLI: Generate new app 29.05.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
  25. CLI: Generate 29.05.2018 Angular Developer Quick Start 29 ng generate

    <blueprint> Generate by schematics ng g c product-list Generate a component ng g c <name> --inline-template Template in ts file? ng g c <name> --spec=false Without unit tests ng g c <name> --flat Should a folder be created
  26. CLI: Serve and build 29.05.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
  27. CLI: Other commands 29.05.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 <filter> Open angular.io API reference
  28. CLI: Other commands (since Angular CLI 6) 29.05.2018 Angular Developer

    Quick Start 32 ng g application <name> Create a project in same ws ng g library Create a library ng add <package> Add package based on schematics ng update Update packages Or create own schematics
  29. Demo 29.05.2018 Angular Developer Quick Start 33

  30. Ressources 29.05.2018 Angular Developer Quick Start 34 ▪ angular.io/docs ▪

    github.com/gassmannT ▪ swissangular.com ▪ m.trivadis.com/angular ▪ angular-academy.ch
  31. Thank you Thomas Gassmann @gassmannT thomasgassmann.net thomas.gassmann@trivadis.com Thomas Bandixen @tbandixen

    thomasbandixen.ch thomas.bandixen@trivadis.com
  32. None