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
180
Fast Angular Apps from End to End
mgechev
1
180
The State of Angular
mgechev
1
190
The State of Angular
mgechev
1
360
Software Engineering as a Superpower
mgechev
1
190
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
200
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
The Future of the Front-End Frameworks
mgechev
2
320
Other Decks in Programming
See All in Programming
Passkeys for Java Developers
ynojima
3
860
FormFlow - Build Stunning Multistep Forms
yceruto
1
180
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
380
CursorはMCPを使った方が良いぞ
taigakono
0
100
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
710
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
320
Effect の双対、Coeffect
yukikurage
5
1.4k
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
360
KotlinConf 2025 現地参加の土産話
n_takehata
0
100
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
120
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
210
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Typedesign – Prime Four
hannesfritz
42
2.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Automating Front-end Workflow
addyosmani
1370
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Thoughts on Productivity
jonyablonski
69
4.7k
The Invisible Side of Design
smashingmag
299
51k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Done Done
chrislema
184
16k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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