Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Angular

Introduction to Angular

Minko Gechev

June 26, 2020
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. @yourtwitter
    Introduction to Angular
    Minko Gechev
    twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com

    View Slide

  2. twitter.com/mgechev

    View Slide

  3. @mgechev

    View Slide

  4. @mgechev
    2,000+
    Projects at Google

    View Slide

  5. @mgechev
    1,500,000+
    Angular Developers Worldwide

    View Slide

  6. @mgechev
    With an Outstanding
    Community ♥

    View Slide

  7. @mgechev
    Annual Angular Conferences

    View Slide

  8. ngAtlanta

    ngIndia

    Angular NL

    ng-conf

    ngVikings

    Angular Day

    Angular in
    Depth

    ngDenver

    NG-MY

    ng-japan

    NG-DE

    ng-SriLanka

    Angular
    Connect

    ngSpain

    NGRome

    NG
    Honduras

    ngTaiwan

    ngTalks

    NG-BE

    ngBolivia

    AngularMix

    ngPoland

    AngularUP

    ngChina

    View Slide

  9. @mgechev
    Over 780 Angular Meetups Worldwide

    View Slide

  10. @mgechev
    Framework

    View Slide

  11. @mgechev
    Framework
    CLI Components

    View Slide

  12. @mgechev
    Framework
    CLI Components
    I18n Language service Router Animations
    Forms PWA HTTP More!

    View Slide

  13. @mgechev
    Angular is a platform for making
    web developers productive

    View Slide

  14. @mgechev
    Angular is a platform for making
    web developers productive

    View Slide

  15. @yourtwitter
    @mgechev
    Developing apps with Angular
    ● Scaffold a project with the CLI
    ● Use Angular framework & TypeScript
    ● Composition of components

    View Slide

  16. @mgechev
    Why TypeScript?

    View Slide

  17. @yourtwitter
    @mgechev
    TypeScript provides
    ● Great DX (Development Experience)
    ● Reduces the bugs in our programs
    ● Is well maintained and feature rich

    View Slide

  18. twitter.com/mgechev
    >15%
    of bugs detectable
    at build time

    View Slide

  19. twitter.com/mgechev

    View Slide

  20. @mgechev
    How do I get started?

    View Slide

  21. @yourtwitter
    $ npm i -g @angular/cli
    $ ng new my-app
    $ ng serve
    Create a new project

    View Slide

  22. @mgechev
    “Hello, world!” in Angular

    View Slide

  23. @yourtwitter
    @Component({
    selector: 'my-cmp',
    template: `Hello, world!`
    })
    export class MyComponent {}

    View Slide

  24. twitter.com/mgechev

    View Slide

  25. @yourtwitter
    @Component({
    selector: 'my-cmp',
    template: `Hello, {{name}}!`
    })
    export class MyComponent {
    @Input() name: string;
    }

    View Slide

  26. @yourtwitter
    @Component({
    selector: 'app-root',
    template: ' '
    })
    export class AppComponent {}

    View Slide

  27. @yourtwitter
    @Component({
    selector: 'app-root',
    template: ' '
    })
    export class AppComponent {
    name = 'KulKul';
    }

    View Slide

  28. @yourtwitter
    @Component({
    selector: 'my-cmp',
    template: `Hello, {{name}}!`
    })
    export class MyComponent {
    @Input() name: string;
    }
    @Component({
    selector: 'app-root',
    template: ' '
    })
    export class AppComponent {}

    View Slide

  29. @mgechev
    AppComponent
    MyComponent
    name

    View Slide

  30. twitter.com/mgechev

    View Slide

  31. @yourtwitter
    $ ng add @angular/material
    Add material design support

    View Slide

  32. @mgechev

    View Slide

  33. twitter.com/mgechev

    View Slide

  34. @mgechev
    Backend integrations

    View Slide

  35. twitter.com/mgechev

    View Slide

  36. @mgechev
    Deployment

    View Slide

  37. @yourtwitter
    $ ng add @angular/fire
    $ ng deploy
    Deploy a project

    View Slide

  38. @mgechev
    Partnering with

    View Slide

  39. Angular Version Number
    9.1.11

    View Slide

  40. Angular Version Number
    X.Y.Z
    major minor patch

    View Slide

  41. @mgechev
    Release schedule
    Two major releases a year

    View Slide

  42. @mgechev
    How do you update?

    View Slide

  43. @mgechev
    2,000+
    Projects at Google

    View Slide

  44. @yourtwitter
    $ ng update @angular/core @angular/cli
    Update an existing project

    View Slide

  45. twitter.com/mgechev

    View Slide

  46. @mgechev
    Framework

    View Slide

  47. @mgechev
    Framework
    CLI Components

    View Slide

  48. @mgechev
    Framework
    CLI Components
    I18n Language service Router Animations
    Forms PWA HTTP More!

    View Slide

  49. View Slide

  50. @mgechev

    View Slide

  51. @mgechev
    Thank you!
    twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com
    Survey: mgv.io/talk

    View Slide