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
360
Software Engineering as a Superpower
mgechev
1
180
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
310
Other Decks in Programming
See All in Programming
がんばりすぎないコーディングルール運用術
tsukakei
1
210
20250528 AWS Startupイベント登壇資料:AIコーディングの取り組み
procrustes5
0
140
単体テストの始め方/作り方
toms74209200
0
350
ワンバイナリWebサービスのススメ
mackee
10
7.6k
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
100
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
130
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
670
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
460
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
450
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.1k
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
240
インターフェース設計のコツとツボ
togishima
2
670
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Facilitating Awesome Meetings
lara
54
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Code Reviewing Like a Champion
maltzj
524
40k
Scaling GitHub
holman
459
140k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Fireside Chat
paigeccino
37
3.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
YesSQL, Process and Tooling at Scale
rocio
172
14k
GraphQLとの向き合い方2022年版
quramy
46
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
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