Introduction to Angular

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