Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Angular
Search
Minko Gechev
June 26, 2020
Programming
1
190
Introduction to Angular
Minko Gechev
June 26, 2020
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
170
Fast Angular Apps from End to End
mgechev
1
180
The State of Angular
mgechev
1
190
The State of Angular
mgechev
1
350
Software Engineering as a Superpower
mgechev
1
180
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
190
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
The Future of the Front-End Frameworks
mgechev
2
310
Other Decks in Programming
See All in Programming
Duke on CRaC with Jakarta EE
ivargrimstad
1
710
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
從零到一:搭建你的第一個 Observability 平台
blueswen
0
210
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
テスト分析入門/Test Analysis Tutorial
goyoki
11
2.7k
「兵法」から見る質とスピード
ickx
0
190
tsconfigのオプションで変わる型世界
keisukeikeda
1
130
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
PRO
0
160
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
530
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.6k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
159
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
We Have a Design System, Now What?
morganepeng
52
7.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Faster Mobile Websites
deanohume
307
31k
Writing Fast Ruby
sferik
628
61k
Music & Morning Musume
bryan
47
6.5k
4 Signs Your Business is Dying
shpigford
183
22k
Making Projects Easy
brettharned
116
6.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How GitHub (no longer) Works
holman
314
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Transcript
@yourtwitter Introduction to Angular Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com
twitter.com/mgechev
@mgechev
@mgechev 2,000+ Projects at Google
@mgechev 1,500,000+ Angular Developers Worldwide
@mgechev With an Outstanding Community ♥
@mgechev Annual Angular Conferences
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
@mgechev Over 780 Angular Meetups Worldwide
@mgechev Framework
@mgechev Framework CLI Components
@mgechev Framework CLI Components I18n Language service Router Animations Forms
PWA HTTP More!
@mgechev Angular is a platform for making web developers productive
@mgechev Angular is a platform for making web developers productive
@yourtwitter @mgechev Developing apps with Angular • Scaffold a project
with the CLI • Use Angular framework & TypeScript • Composition of components
@mgechev Why TypeScript?
@yourtwitter @mgechev TypeScript provides • Great DX (Development Experience) •
Reduces the bugs in our programs • Is well maintained and feature rich
twitter.com/mgechev >15% of bugs detectable at build time
twitter.com/mgechev
@mgechev How do I get started?
@yourtwitter $ npm i -g @angular/cli $ ng new my-app
$ ng serve Create a new project
@mgechev “Hello, world!” in Angular
@yourtwitter @Component({ selector: 'my-cmp', template: `Hello, world!` }) export class
MyComponent {}
twitter.com/mgechev
@yourtwitter @Component({ selector: 'my-cmp', template: `Hello, {{name}}!` }) export class
MyComponent { @Input() name: string; }
@yourtwitter @Component({ selector: 'app-root', template: '<my-cmp name="KulKul"> </my-cmp>' }) export
class AppComponent {}
@yourtwitter @Component({ selector: 'app-root', template: '<my-cmp [name]="name"> </my-cmp>' }) export
class AppComponent { name = 'KulKul'; }
@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 {}
@mgechev AppComponent MyComponent name
twitter.com/mgechev
@yourtwitter $ ng add @angular/material Add material design support
@mgechev
twitter.com/mgechev
@mgechev Backend integrations
twitter.com/mgechev
@mgechev Deployment
@yourtwitter $ ng add @angular/fire $ ng deploy Deploy a
project
@mgechev Partnering with
Angular Version Number 9.1.11
Angular Version Number X.Y.Z major minor patch
@mgechev Release schedule Two major releases a year
@mgechev How do you update?
@mgechev 2,000+ Projects at Google
@yourtwitter $ ng update @angular/core @angular/cli Update an existing project
twitter.com/mgechev
@mgechev Framework
@mgechev Framework CLI Components
@mgechev Framework CLI Components I18n Language service Router Animations Forms
PWA HTTP More!
None
@mgechev
@mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com Survey: mgv.io/talk