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
48
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
850
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
Oracle Cloud Infrastructure:2024年10月度サービス・アップデート
oracle4engineer
PRO
0
290
Nuxt × Vue Router の力を最大限に引き出す機能を紹介
ytr0903
2
480
Introduction to Indistinguishability/Ideal Obfuscation (iO)
sorasuegami
0
110
SwiftSyntaxでUIKitとSwiftUIの使用率を完璧に計測できちゃう件について
ldf_tech
0
150
Rist_Meetup_Kaggleは業務の役にたつ - ビジネスコンテンツ情報を活用する BtoB 事業編 - / rist-meetup-20241012
taro_masuda
1
370
Amplify Gen 2ではじめる 生成AIアプリ開発入門
tsukuboshi
0
410
VPoE Meetup Vol.1 VPoEとして実践してきたことと反省点
coconala_engineer
2
200
いまからでも遅くない!コンテナでWebアプリを動かしてみよう入門(2-2)WebAPIハンズオン
nomu
0
130
サーバーレス SaaS における運用監視の負荷軽減のためのアプローチ
ririru0325
0
100
Overview of file type identifiers
ange
0
150
巨大企業でDX革新を起こすということ BTCONJP 2024
yamaken66
1
490
自動テストの信頼性を高めるミューテーションテストの活用に向けて
tarappo
2
110
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Code Reviewing Like a Champion
maltzj
519
39k
Facilitating Awesome Meetings
lara
49
6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Typedesign – Prime Four
hannesfritz
39
2.4k
Side Projects
sachag
452
42k
Faster Mobile Websites
deanohume
304
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
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