Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
@yourtwitter Introduction to Angular Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com
Slide 2
Slide 2 text
twitter.com/mgechev
Slide 3
Slide 3 text
@mgechev
Slide 4
Slide 4 text
@mgechev 2,000+ Projects at Google
Slide 5
Slide 5 text
@mgechev 1,500,000+ Angular Developers Worldwide
Slide 6
Slide 6 text
@mgechev With an Outstanding Community ♥
Slide 7
Slide 7 text
@mgechev Annual Angular Conferences
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
@mgechev Over 780 Angular Meetups Worldwide
Slide 10
Slide 10 text
@mgechev Framework
Slide 11
Slide 11 text
@mgechev Framework CLI Components
Slide 12
Slide 12 text
@mgechev Framework CLI Components I18n Language service Router Animations Forms PWA HTTP More!
Slide 13
Slide 13 text
@mgechev Angular is a platform for making web developers productive
Slide 14
Slide 14 text
@mgechev Angular is a platform for making web developers productive
Slide 15
Slide 15 text
@yourtwitter @mgechev Developing apps with Angular ● Scaffold a project with the CLI ● Use Angular framework & TypeScript ● Composition of components
Slide 16
Slide 16 text
@mgechev Why TypeScript?
Slide 17
Slide 17 text
@yourtwitter @mgechev TypeScript provides ● Great DX (Development Experience) ● Reduces the bugs in our programs ● Is well maintained and feature rich
Slide 18
Slide 18 text
twitter.com/mgechev >15% of bugs detectable at build time
Slide 19
Slide 19 text
twitter.com/mgechev
Slide 20
Slide 20 text
@mgechev How do I get started?
Slide 21
Slide 21 text
@yourtwitter $ npm i -g @angular/cli $ ng new my-app $ ng serve Create a new project
Slide 22
Slide 22 text
@mgechev “Hello, world!” in Angular
Slide 23
Slide 23 text
@yourtwitter @Component({ selector: 'my-cmp', template: `Hello, world!` }) export class MyComponent {}
Slide 24
Slide 24 text
twitter.com/mgechev
Slide 25
Slide 25 text
@yourtwitter @Component({ selector: 'my-cmp', template: `Hello, {{name}}!` }) export class MyComponent { @Input() name: string; }
Slide 26
Slide 26 text
@yourtwitter @Component({ selector: 'app-root', template: ' ' }) export class AppComponent {}
Slide 27
Slide 27 text
@yourtwitter @Component({ selector: 'app-root', template: ' ' }) export class AppComponent { name = 'KulKul'; }
Slide 28
Slide 28 text
@yourtwitter @Component({ selector: 'my-cmp', template: `Hello, {{name}}!` }) export class MyComponent { @Input() name: string; } @Component({ selector: 'app-root', template: ' ' }) export class AppComponent {}
Slide 29
Slide 29 text
@mgechev AppComponent MyComponent name
Slide 30
Slide 30 text
twitter.com/mgechev
Slide 31
Slide 31 text
@yourtwitter $ ng add @angular/material Add material design support
Slide 32
Slide 32 text
@mgechev
Slide 33
Slide 33 text
twitter.com/mgechev
Slide 34
Slide 34 text
@mgechev Backend integrations
Slide 35
Slide 35 text
twitter.com/mgechev
Slide 36
Slide 36 text
@mgechev Deployment
Slide 37
Slide 37 text
@yourtwitter $ ng add @angular/fire $ ng deploy Deploy a project
Slide 38
Slide 38 text
@mgechev Partnering with
Slide 39
Slide 39 text
Angular Version Number 9.1.11
Slide 40
Slide 40 text
Angular Version Number X.Y.Z major minor patch
Slide 41
Slide 41 text
@mgechev Release schedule Two major releases a year
Slide 42
Slide 42 text
@mgechev How do you update?
Slide 43
Slide 43 text
@mgechev 2,000+ Projects at Google
Slide 44
Slide 44 text
@yourtwitter $ ng update @angular/core @angular/cli Update an existing project
Slide 45
Slide 45 text
twitter.com/mgechev
Slide 46
Slide 46 text
@mgechev Framework
Slide 47
Slide 47 text
@mgechev Framework CLI Components
Slide 48
Slide 48 text
@mgechev Framework CLI Components I18n Language service Router Animations Forms PWA HTTP More!
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
@mgechev
Slide 51
Slide 51 text
@mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk