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
Google Opalで使える37のライブラリ
mickey_kubo
3
140
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
260
Pythonに漸進的に型をつける
nealle
1
120
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.5k
Go言語はstack overflowの夢を見るか?
logica0419
0
520
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
45k
モテるデスク環境
mozumasu
3
1.3k
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Making Projects Easy
brettharned
120
6.4k
Fireside Chat
paigeccino
41
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Become a Pro
speakerdeck
PRO
29
5.6k
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