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
Intro to AngularJS
Search
Sebastian Fröstl
July 03, 2014
Technology
0
54
Intro to AngularJS
Introduction talk to teach the basic fundamentals of AngularJS.
Sebastian Fröstl
July 03, 2014
Tweet
Share
More Decks by Sebastian Fröstl
See All by Sebastian Fröstl
Angular 2 and Relay
sfroestl
5
910
Angular 2 and Realy
sfroestl
0
870
Angular 1.3
sfroestl
1
56
AngularJS Performance Measurement and Tuning
sfroestl
0
220
Other Decks in Technology
See All in Technology
AI 코딩 에이전트 더 똑똑하게 쓰기
nacyot
0
520
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
2
640
社会人力と研究力ー博士号をキャリアの武器にするー
kentaro
2
110
本当に必要なのは「QAという技術」だった!試行錯誤から生まれた、品質とデリバリーの両取りアプローチ / Turns Out, "QA as a Discipline" Was the Key!
ar_tama
9
3.1k
勝手に!深堀り!Cloud Run worker pools / Deep dive Cloud Run worker pools
iselegant
4
650
DynamoDB のデータを QuickSight で可視化する際につまづいたこと/stumbling-blocks-when-visualising-dynamodb-with-quicksight
emiki
0
130
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
400
Terraform にコントリビュートしていたら Azure のコストをやらかした話 / How I Messed Up Azure Costs While Contributing to Terraform
nnstt1
1
280
LLM アプリケーションのためのクラウドセキュリティ - CSPM の実装ポイント-
osakatechlab
0
310
AIエージェント開発手法と業務導入のプラクティス
ykosaka
9
2.7k
開発者とQAで協業するテックタッチの取り組み
shutty
0
100
雑に疎通確認だけしたい...せや!CloudShell使ったろ!
alchemy1115
0
130
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
120
52k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Into the Great Unknown - MozCon
thekraken
38
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Become a Pro
speakerdeck
PRO
28
5.3k
Visualization
eitanlees
146
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Embracing the Ebb and Flow
colly
85
4.7k
Typedesign – Prime Four
hannesfritz
41
2.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Transcript
ANGULARJS
ANGULARJS IS WHAT HTML WOULD HAVE BEEN, HAD IT BEEN
DESIGNED FOR APPLICATIONS MIŠKO HEVERY
Client side single page MVC framework in JavaScript
WHAT MAKES ANGULARJS SO POWERFUL?
TWO WAY DATA BINDING ▸ Possibility to change the model
bidirectional ▸ HTML template –> model <– JS
HTML <input ng-model="name"> <div>{{name}}</div>
app.js $scope.name = 'François';
Resulting HTML <div>François</div>
DIRECTIVES Components to teach the browser interpretation of new HTML
tags
BUILD IN DIRECTIVES LIKE ng-repeat, ng-if, ng-bind, ng-hide
HTML <shopping-list list="['baguette', 'fromage']"> </shopping-list>
shopping-list-directive.js module.directive('shoppingList', function () { return { templateUrl: 'shopping-list.html' };
});
shopping-list.html <ul> <li ng-repeat="item in list"> {{item}} </li> </ul>
Resulting HTML <ul> <li>baguette</li> <li>fromage</li> </ul>
None
SCOPE 1/3 Exposes domain model to view (template)
SCOPE 2/3 AngularJS observes events (eg. input) and applies changes
to the scope
SCOPE 3/3 Scope hierarchy reflects DOM hierarchy
AND SO MUCH MORE… ▸ Dependency Injection ▸ Strong Testability
▸ Views and Routes ▸ Animations ▸ Services
by Sebastian Fröstl | Small Improvements