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
AngularJS – Schmerzlos mit HTML5 und JavaScript
Search
Ingo Rammer
September 03, 2013
Programming
0
170
AngularJS – Schmerzlos mit HTML5 und JavaScript
German Session from MobileTechConference 2013 in Berlin
Ingo Rammer
September 03, 2013
Tweet
Share
More Decks by Ingo Rammer
See All by Ingo Rammer
Blockchain für Architekten und Entwickler – Was steckt wirklich dahinter
ingorammer
2
580
Workshop: Von Null auf Hundert - Blockchain-Anwendungen mit Hyperledger Fabric
ingorammer
0
580
Hyperledger Fabric - Die Open-Source Basis für Ihre Blockchain
ingorammer
0
520
Coding Hyperledger Fabric – Smart Contracts und Clients mit Node.js
ingorammer
0
550
OOP 2019: Hyperledger Fabric – Architecture and Smart Contracts of the Open Source Blockchain
ingorammer
1
660
Hyperledger Fabric - Die Open-Source Basis für Ihre Blockchain
ingorammer
0
330
Blockchain - Was steckt wirklich dahinter?
ingorammer
0
190
From 0 to 100: Permissioned blockchains with Hyperledger Fabric and Node
ingorammer
0
210
Von Null auf Hundert: Permissioned Blockchain-Anwendungen mit Java Clients
ingorammer
0
130
Other Decks in Programming
See All in Programming
TCAを用いたAmebaのリアーキテクチャ
dazy
0
220
React 19アップデートのために必要なこと
uhyo
8
1.6k
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
40
13k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
250
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
AIプログラミング雑キャッチアップ
yuheinakasaka
19
5k
PEPCは何を変えようとしていたのか
ken7253
3
300
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
540
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Bash Introduction
62gerente
611
210k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
KATA
mclloyd
29
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
4 Signs Your Business is Dying
shpigford
183
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Facilitating Awesome Meetings
lara
53
6.3k
Transcript
Ingo Rammer | thinktecture AngularJS – Schmerzlos mit HTML5 und
JavaScript
Single-Page Applications (SPAs)
jQuery?
MVC/SPA Frameworks Model Binding Routing UI-Templating … unterschiedlichste Design-Ideen und
Implementationen
http://todomvc.com Sept 2013: 66 Versionen der gleichen App
sproutcore Google Trends – Aug 2009 bis Aug 2013
backbone.js sproutcore Google Trends – Aug 2009 bis Aug 2013
backbone.js ember.js sproutcore Google Trends – Aug 2009 bis Aug
2013
backbone.js knockoutjs ember.js sproutcore Google Trends – Aug 2009 bis
Aug 2013
backbone.js knockoutjs ember.js angularjs sproutcore Google Trends – Aug 2009
bis Aug 2013
AngularJS • http://angularjs.org/, v1.2RC1 • HTML-zentrische SPAs – ("HTML enhanced
for web apps!") • Komponenten aus JS + HTML • Einbettbar, DI-basierend, testbar • Corporate Sponsor: Google
Demos http://github.com/ingorammer/talk-AngularJS
Model Binding Allgemein • Je nach Framework – Controller-Initiiert (Templating,
jQuery, Handlebars/Mustache, ...) – Observer-Pattern (Ember, Knockout, ...) – Framework-Initiiert (Angular)
AngularJS: Controller • Business-Logik • Felder auf $scope sichtbar
in der View • KEINE DOM-Manipulationen im Controller!
AngularJS: Scope • Digest-Zyklus • $apply, um einen Zyklus auszulösen
– Directives, Services, Controller
AngularJS: Directives • Komponenten (HTML + JS) • Kapseln DOM-Manipulationen
• Bekommen Daten aus dem $scope • Applikationsspezifisch oder unabhängig (zB angular-UI) • Können existierende Bibliotheken kapseln
AngularJS: Services • Werden per Dependency Injection (DI) an Controller,
Directives und andere Services im Konstruktor übergeben • Allgemeine Logik, die nicht von einem einzelnen Use-Case abhängt (sonst: Controller) • Achtung bei Minification (array-syntax oder $inject)
AngularJS: Routing • $routeProvider in <module>.config – .when() – .otherwise()
Animation • Seit v1.2 • http://slid.es/gsklee/animation-in- angularjs-12
AngularJS • Struktur, die bis zu großen JS Apps skaliert
– Controller, $scope – DOM-Views, Model-Binding – Directives – Routing – Services – Promises • Keine DOM-Manipulationen im Controller! Meist Directives. Selten Services.
Demos: https://github.com/ingorammer/talk-AngularJS Slides: https://speakerdeck.com/ingorammer @ingorammer ingo.rammer@thinktecture.com http://www.thinktecture.com