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
58
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
940
Angular 2 and Realy
sfroestl
0
900
Angular 1.3
sfroestl
1
59
AngularJS Performance Measurement and Tuning
sfroestl
0
230
Other Decks in Technology
See All in Technology
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
390
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
620
仕様駆動開発を実現する上流工程におけるAIエージェント活用
sergicalsix
7
3.6k
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
yama3133
1
180
serverless team topology
_kensh
3
240
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
260
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
420
20251027_findyさん_音声エージェントLT
almondo_event
2
490
OPENLOGI Company Profile for engineer
hr01
1
46k
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
2
1.2k
Observability — Extending Into Incident Response
nari_ex
1
570
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Become a Pro
speakerdeck
PRO
29
5.6k
Agile that works and the tools we love
rasmusluckow
331
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Documentation Writing (for coders)
carmenintech
75
5.1k
Visualization
eitanlees
150
16k
Side Projects
sachag
455
43k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
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