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
51
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
860
Angular 2 and Realy
sfroestl
0
830
Angular 1.3
sfroestl
1
53
AngularJS Performance Measurement and Tuning
sfroestl
0
220
Other Decks in Technology
See All in Technology
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
240
レンジャーシステムズ | 会社紹介(採用ピッチ)
rssytems
0
280
メンタル面でもつよつよエンジニアになる/登壇資料(井田 献一朗)
hacobu
0
120
Yahoo! ズバトクにおけるフロントエンド開発
lycorptech_jp
PRO
0
100
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
460
普通のエンジニアがLaravelコアチームメンバーになるまで
avosalmon
0
120
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
180
podman_update_2024-12
orimanabu
1
290
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
180
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
170
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
AWS re:Invent 2024 ふりかえり勉強会
yhana
0
450
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
910
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
BBQ
matthewcrist
85
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Typedesign – Prime Four
hannesfritz
40
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Producing Creativity
orderedlist
PRO
342
39k
Unsuck your backbone
ammeep
669
57k
Faster Mobile Websites
deanohume
305
30k
Making the Leap to Tech Lead
cromwellryan
133
9k
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