Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
820
Angular 1.3
sfroestl
1
52
AngularJS Performance Measurement and Tuning
sfroestl
0
220
Other Decks in Technology
See All in Technology
コーポレートデータマスター構築への道
kworkdev
PRO
0
110
プラットフォームエンジニアリングアーキテクチャ道場 on AWS & EKS Kubernetes / Platform Engineering Architecture Dojo
riita10069
7
16k
Explain EXPLAIN
keiko713
7
1.8k
ARRが3年で10倍になったプロダクト開発とAI活用の軌跡
akiroom
0
220
GDGoC開発体験談 - Gemini生成AI活用ハッカソン / GASとFirebaseで挑むパン屋のフードロス解決 -
hotekagi
1
610
ミスが許されない領域にAIを溶け込ませる プロダクトマネジメントの裏側
t01062sy
6
4.8k
GeminiとUnityで実現するインタラクティブアート
hokkey621
0
490
ゆるSRE勉強会 #8 組織的にSREが始まる中で意識したこと
abnoumaru
2
960
日本全国・都市3D化プロジェクト「PLATEAU」とデータ変換OSS「PLATEAU GIS Converter」の公開
nokonoko1203
4
330
プロダクトマネージャーは 事業責任者の夢をみるのか pmconf2024
gimupop
1
5.1k
スパイクアクセス対策としての pitchfork 導入
riseshia
0
100
プルリクが全てじゃない!実は喜ばれるOSS貢献の方法8選
tkikuc
17
2.2k
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
410
Six Lessons from altMBA
skipperchong
27
3.5k
KATA
mclloyd
29
14k
GitHub's CSS Performance
jonrohan
1030
460k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Designing for humans not robots
tammielis
250
25k
A Philosophy of Restraint
colly
203
16k
Thoughts on Productivity
jonyablonski
67
4.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
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