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
Membuat Single Page Application menggunakan Ang...
Search
Yanuar Waskito
August 26, 2014
Programming
0
780
Membuat Single Page Application menggunakan AngularJS
Presentation for JogjaJS event, introducing AngularJs
Yanuar Waskito
August 26, 2014
Tweet
Share
Other Decks in Programming
See All in Programming
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
400
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
160
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.7k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
920
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
300
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
91
30k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
Hack Claude Code with Claude Code
choplin
4
2.2k
XP, Testing and ninja testing
m_seki
3
250
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Writing Fast Ruby
sferik
628
62k
Site-Speed That Sticks
csswizardry
10
690
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
RailsConf 2023
tenderlove
30
1.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Embracing the Ebb and Flow
colly
86
4.7k
Transcript
Single Page Application by @jeguwaskito nganggo
Yanuar Galih Waskito • SMA 3 Yogyakarta 2007-2009 • IT
Telkom ( Telkom University) 2009-2013 • Front-end Web Developer @ Qiscus 2013-sekarang Twitter: @jeguwaskito Github: http://github.com/waskito
JavaScript ?
JavaScript is a dynamic computer programming language most commonly used
as part of web browsers, whose implementations allow client-side scripts to “interact with the user” . . . . . It's for better user experience
Note! Note! Client-Side Server-Side
Contoh
Perkembangan Javascript Library Framework
None
Apa itu angularJS ? MVW [Model View Wathever] Javascript Framework
untuk membuat 'web apps' khususnya Single Page Application
History • Created by Miško Hevery • Open source since
2009 • Supported by Google • Large & fast-growing
Kok milih ?
Well Documented
Modular http://ngmodules.org
Trending Topic
Many Tutorials
Angular Main Concepts • 2 Way Data Binding • Directive
• Expression • Model • View / Template • Controller • Filter
2 Way Data Binding View View Template Template Model Model
Continuous updates Model is Single-Source-of-Truth Compile Changes to Model updates View Changes to View updates Model T wo-Way Data Binding
Directive Directive : angular marker pada element DOM (cth: html
attribute, html element, comment, atau CSS class) Digunakan sesuai fungsi directive yang dideklarasikan, bisa untuk: - manipulasi DOM, - manipulasi data di angular
Expression • Kode Javascript seperti biasanya yang ditempatkan dalam curly-
brackets {{ expression }} • Dapat berupa: - angular variable - filter - function
Model • Data yang ditampilkan kepada user dimana user tersebut
berinteraksi
View / Templates • Di angular, template ditulis dengan format
HTML, dan dapat mengandung directive, expression, atau filter index.html partials/template1.html
Controller • Fungsi konstruktor javascript untuk mengolah data ($scope)
Filter Memformat value dari expression yang diperlihatkan ke user
Warning • Angular tidak direkomendasikan untuk SEO • Butuh trik
khusus: http://prerender.io • Jangan buka di IE7
Get Started Bower: • bower install angular • Kalau belum
ada bower Download di sini
Demo Source Code Link: https://github.com/waskito/JogjaJSAngular
Thank You