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!
50. @mgechev
51. @mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk