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
47
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
790
Angular 2 and Realy
sfroestl
0
760
Angular 1.3
sfroestl
1
52
AngularJS Performance Measurement and Tuning
sfroestl
0
220
Other Decks in Technology
See All in Technology
生成AIサービスPanorama AIご説明資料
sdt
0
300
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
21
4.1k
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
680
やっていきテスト
k6s4i53rx
0
160
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
KTC_DBRE.pdf
_awache
1
290
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
500
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
4
750
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
0
490
依存ライブラリはどこに?
takesection
0
110
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
59
3.8k
Producing Creativity
orderedlist
PRO
335
39k
Gamification - CAS2011
davidbonilla
76
4.5k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Ruby is Unlike a Banana
tanoku
95
10k
A better future with KSS
kneath
230
16k
How to name files
jennybc
62
92k
Fireside Chat
paigeccino
19
2.6k
Product Roadmaps are Hard
iamctodd
43
9.6k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Designing with Data
zakiwarfel
94
4.8k
Design by the Numbers
sachag
274
18k
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