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
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
610
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
480
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
110
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
12
6.5k
Discover Metal 4
rei315
2
110
Deep Dive into ~/.claude/projects
hiragram
11
2.3k
Benchmark
sysong
0
280
ニーリーにおけるプロダクトエンジニア
nealle
0
730
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Unsuck your backbone
ammeep
671
58k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Optimizing for Happiness
mojombo
379
70k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
How to Ace a Technical Interview
jacobian
277
23k
Gamification - CAS2011
davidbonilla
81
5.3k
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