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 AngularJS
Search
Yanuar Waskito
August 26, 2014
Programming
0
670
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
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Deep Dive into React Stream/Serialize
mugi_uno
3
660
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
Fast JSX: Don't clone props object #28768
yossydev
1
180
見た目から始める生産性向上
ikumatadokoro
10
1.4k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
870
Sheets API使ってみた
toshi0383
2
160
雑に思考を整理する技術と効能
konifar
63
30k
Let's learn code review
riofujimon
2
570
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
540
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
8
1.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
GitHub's CSS Performance
jonrohan
1025
450k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Web development in the modern age
philhawksworth
203
10k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
The Invisible Side of Design
smashingmag
294
49k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Writing Fast Ruby
sferik
622
60k
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