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
BLIBLIDOTCOM - ANGULARJS
Search
Irfan Maulana
March 14, 2017
Programming
1
500
BLIBLIDOTCOM - ANGULARJS
BLIBLIDOTCOM - ANGULARJS
Irfan Maulana
March 14, 2017
Tweet
Share
More Decks by Irfan Maulana
See All by Irfan Maulana
Panduan untuk mempublikasikan kode ke publik
mazipan
0
110
Mengukur dan meningkatkan performa website
mazipan
1
210
Testing JavaScript
mazipan
0
140
Membuat Website Zaman Sekarang
mazipan
0
490
Kinerja Web 101 - Edisi 2022
mazipan
1
450
Layout Repaint & The Lessons Learned
mazipan
0
410
Bagaimana implementasi mockup design
mazipan
0
480
Memulai karir sebagai web programmer
mazipan
0
730
Membuat laporan kecepatan web untuk blog
mazipan
0
520
Other Decks in Programming
See All in Programming
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
220
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
230
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
930
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
870
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
260
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
920
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
330
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
140
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Facilitating Awesome Meetings
lara
54
6.5k
Automating Front-end Workflow
addyosmani
1370
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Why Our Code Smells
bkeepers
PRO
337
57k
Designing Experiences People Love
moore
142
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Faster Mobile Websites
deanohume
308
31k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Transcript
ANGULARJS v.1.x BY IRFAN MAULANA
ABOUT ME • Name : Irfan Maulana • Job :
Software Development Engineer • Role : Front End Developer
WEB - BEFORE • Javascript DOM Manipulation Browser compatibility problem
WEB - BEFORE • jQuery + DOM Manipulation DOM Manipulation
Browser compatibility problem
WEB NOWADAYS
ANGULARJS Developed by Google Javascript Framework for Modern Web Application
MVC ARCHITECTURE
> MODEL Entire javascript’s object that reflect data structure and
wrapped in $scope.
> MODEL > VIEW HTML template that references the data
to model
> MODEL > VIEW > CONTROLLER All the logic that
control the model than react all changes triggered by view
EXAMPLE 1 : Data Binding File created : 1. Application.js
2. AppController.js 3. index.html
EXAMPLE 1 : Data Binding 1. Application.js
EXAMPLE 1 : Data Binding 2. AppController.js
EXAMPLE 1 : Data Binding 3. index.html
EXAMPLE 1 : Data Binding Source code : https://github.com/mazipan/angularjs-basic- tutorial/tree/master/example1-data-binding
You Learn : + How to create AngularJS webapp + Data binding to view
EXAMPLE 2 : Request Data Source code : https://github.com/mazipan/angularjs-basic- tutorial/tree/master/example2-request-data
You Learn : + How to create GET request in AngularJS + Iterate data in view
EXAMPLE 3 : Services Source code : https://github.com/mazipan/angularjs-basic- tutorial/tree/master/example3-services You
Learn : + How to create service in AngularJS + Inject service to controller + Instance many controller in One WebApp + Sharing data between controller
EXAMPLE 4 : Routing Source code : https://github.com/mazipan/angularjs-basic- tutorial/tree/master/example4-routing You
Learn : + How to create routing in AngularJS
Exercise Create AngularJS Web Application that have CRUD interaction base
on below API : https://jsonplaceholder.typicode.com/
THANK YOU