Introduction to Angular

Introduction to Angular

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

June 26, 2020
Tweet

Transcript

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

  2. twitter.com/mgechev

  3. @mgechev

  4. @mgechev 2,000+ Projects at Google

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

  6. @mgechev With an Outstanding Community ♥

  7. @mgechev Annual Angular Conferences

  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
  9. @mgechev Over 780 Angular Meetups Worldwide

  10. @mgechev Framework

  11. @mgechev Framework CLI Components

  12. @mgechev Framework CLI Components I18n Language service Router Animations Forms

    PWA HTTP More!
  13. @mgechev Angular is a platform for making web developers productive

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

  15. @yourtwitter @mgechev Developing apps with Angular • Scaffold a project

    with the CLI • Use Angular framework & TypeScript • Composition of components
  16. @mgechev Why TypeScript?

  17. @yourtwitter @mgechev TypeScript provides • Great DX (Development Experience) •

    Reduces the bugs in our programs • Is well maintained and feature rich
  18. twitter.com/mgechev >15% of bugs detectable at build time

  19. twitter.com/mgechev

  20. @mgechev How do I get started?

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

    $ ng serve Create a new project
  22. @mgechev “Hello, world!” in Angular

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

    MyComponent {}
  24. twitter.com/mgechev

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

    MyComponent { @Input() name: string; }
  26. @yourtwitter @Component({ selector: 'app-root', template: '<my-cmp name="KulKul"> </my-cmp>' }) export

    class AppComponent {}
  27. @yourtwitter @Component({ selector: 'app-root', template: '<my-cmp [name]="name"> </my-cmp>' }) export

    class AppComponent { name = 'KulKul'; }
  28. @yourtwitter @Component({ selector: 'my-cmp', template: `Hello, {{name}}!` }) export class

    MyComponent { @Input() name: string; } @Component({ selector: 'app-root', template: '<my-cmp name="KulKul"> </my-cmp>' }) export class AppComponent {}
  29. @mgechev AppComponent MyComponent name

  30. twitter.com/mgechev

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

  32. @mgechev

  33. twitter.com/mgechev

  34. @mgechev Backend integrations

  35. twitter.com/mgechev

  36. @mgechev Deployment

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

    project
  38. @mgechev Partnering with

  39. Angular Version Number 9.1.11

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

  41. @mgechev Release schedule Two major releases a year

  42. @mgechev How do you update?

  43. @mgechev 2,000+ Projects at Google

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

  45. twitter.com/mgechev

  46. @mgechev Framework

  47. @mgechev Framework CLI Components

  48. @mgechev Framework CLI Components I18n Language service Router Animations Forms

    PWA HTTP More!
  49. None
  50. @mgechev

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