Angular Quick Start

@ a local customer event in Winterthur

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 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.

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. 28.08.2018 Angular Developer Quick Start
   5
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

8. 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
   

   View Slide

9. Interpolation ( {{...}} )
   28.08.2018 Angular Developer Quick Start
   10
   @Component({
   selector: 'my-app',
   template: `Details of {{fullname}}`
   })
   export class AppComponent {
   fullname: string = "Lara Croft";
   }
   

   View Slide

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

    View Slide

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

    View Slide

12. 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 }
    

    View Slide

13. 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
    

    View Slide

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

    View Slide

15. 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;
    }
    }
    

    View Slide

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

    View Slide

17. 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
    

    View Slide

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

    View Slide

19. How to start?
    28.08.2018 Angular Developer Quick Start
    20
    

    View Slide

20. 28.08.2018 Angular Developer Quick Start
    21
    Download Visual Studio Code
    

    View Slide

21. 28.08.2018 Angular Developer Quick Start
    22
    Install VSCode Extension
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. 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
    

    View Slide

26. 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
    

    View Slide

27. Project structure
    28.08.2018 Angular Developer Quick Start
    28
    

    View Slide

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
    

    View Slide

29. 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
    

    View Slide

30. 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
    

    View Slide

31. 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
    

    View Slide

32. Demo
    28.08.2018 Angular Developer Quick Start
    33
    

    View Slide

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
    

    View Slide

34. Upcoming events
    28.08.2018 Angular Developer Quick Start
    37
    

    View Slide

35. Thank you
    Thomas Gassmann
    @gassmannT
    thomasgassmann.net
    thomas.gassmann@trivadis.com
    28.08.2018 Angular Developer Quick Start
    38
    

    View Slide

36. View Slide