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
220
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
200
Fast Angular Apps from End to End
mgechev
1
200
The State of Angular
mgechev
1
200
The State of Angular
mgechev
1
390
Software Engineering as a Superpower
mgechev
1
210
Internals of the Angular CLI
mgechev
2
1.4k
The State of Angular
mgechev
1
220
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
3k
The Future of the Front-End Frameworks
mgechev
2
330
Other Decks in Programming
See All in Programming
CSC509 Lecture 06
javiergs
PRO
0
270
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
260
AI Agent 時代的開發者生存指南
eddie
4
2.2k
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
オンデバイスAIとXcode
ryodeveloper
0
220
CSC305 Lecture 11
javiergs
PRO
0
300
Google Opalで使える37のライブラリ
mickey_kubo
3
150
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
SODA - FACT BOOK(JP)
sodainc
1
8.9k
CSC305 Lecture 09
javiergs
PRO
0
320
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
120
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
Featured
See All Featured
Visualization
eitanlees
149
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Building Applications with DynamoDB
mza
96
6.7k
Embracing the Ebb and Flow
colly
88
4.9k
Become a Pro
speakerdeck
PRO
29
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Rails Girls Zürich Keynote
gr2m
95
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
GitHub's CSS Performance
jonrohan
1032
470k
Bash Introduction
62gerente
615
210k
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