angularjs [bahasa indonesia]
DESCRIPTION
AngularJS is Javascript Framework supported by google.TRANSCRIPT
![Page 1: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/1.jpg)
Mengenal
by @jeguwaskito
![Page 2: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/2.jpg)
Yanuar Galih Waskito
● SMA 3 Yogyakarta 2007-2009● IT Telkom (sekarang Telkom University) 2009-2013● Front-end Web Developer @ Qiscus 2013-sekarang
Twitter: @jeguwaskitoGithub: http://github.com/waskito
![Page 3: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/3.jpg)
JavaScript ?
![Page 4: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/4.jpg)
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
![Page 5: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/5.jpg)
Note! Note!
Client-Side Server-Side
![Page 6: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/6.jpg)
Contoh
![Page 7: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/7.jpg)
Perkembangan Javascript
Library Framework
![Page 8: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/8.jpg)
![Page 9: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/9.jpg)
Apa itu angularJS ?
MVW [Model View Wathever] Javascript Framework untuk membuat 'web apps'
khususnya Single Page Application
![Page 10: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/10.jpg)
History
● Created by Miško Hevery● Open source since 2009● Supported by Google● Large & fast-growing
![Page 11: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/11.jpg)
Kenapa milih ?
![Page 12: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/12.jpg)
Well Documented
![Page 13: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/13.jpg)
Modular
http://ngmodules.org
![Page 14: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/14.jpg)
Trending Topic
![Page 15: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/15.jpg)
Many Tutorials
![Page 16: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/16.jpg)
Angular Main Concepts● 2 Way Data Binding● Directive● Expression● Model● View / Template● Controller● Filter
![Page 17: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/17.jpg)
2 Way Data Binding
ViewView
TemplateTemplate
ModelModel
Continuous updates
Model is Single-Source-of-Truth
Compile
Changes to Model updates ViewChanges to View updates Model
Two-Way Data Binding
![Page 18: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/18.jpg)
DirectiveDirective : 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
![Page 19: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/19.jpg)
Expression● Kode Javascript seperti biasanya yang ditempatkan dalam curly-
brackets {{ expression }}
● Dapat berupa:
- angular variable
- filter
- function
![Page 20: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/20.jpg)
Model● Data yang ditampilkan kepada user dimana
user tersebut berinteraksi
![Page 21: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/21.jpg)
View / Templates● Di angular, template ditulis dengan format HTML, dan dapat
mengandung directive, expression, atau filter
index.html
partials/template1.html
![Page 22: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/22.jpg)
Controller● Fungsi konstruktor javascript untuk mengolah
data ($scope)
![Page 23: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/23.jpg)
Filter
Memformat value dari expression yang diperlihatkan ke user
![Page 24: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/24.jpg)
Warning
● Angular tidak direkomendasikan untuk SEO● Butuh trik khusus: http://prerender.io
● Jangan buka di IE7
![Page 25: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/25.jpg)
Get Started
● Go to angularjs.org● Download angular● Extract it● Open on text editor/IDE (e.g Sublime Text)● Open in Browser (e.g Chrome, Firefox)
![Page 26: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/26.jpg)
Other Recommended Tool● Sublime Text● Git● Bower (http://bower.io)● Gulpjs (http://gulpjs.com)● Twitter Bootstrap / Foundation
![Page 27: Angularjs [Bahasa Indonesia]](https://reader034.vdocuments.mx/reader034/viewer/2022052621/557fd2a6d8b42aab088b4ec5/html5/thumbnails/27.jpg)
Thank You