This document introduces Yanuar Galih Waskito and provides an overview of JavaScript and the AngularJS framework. It discusses Yanuar's background and experience, defines JavaScript and its uses, and explains the main concepts of AngularJS including two-way data binding, directives, expressions, models, views/templates, controllers, and filters. It recommends getting started with AngularJS by downloading it from their website and exploring their documentation and other recommended tools.

1. Mengenal
by @jeguwaskito

2. Yanuar Galih Waskito
●
SMA 3 Yogyakarta 2007-2009
●
IT Telkom (sekarang Telkom University) 2009-2013
●
Front-end Web Developer @ Qiscus 2013-sekarang
Twitter: @jeguwaskito
Github: http://github.com/waskito

3. JavaScript ?

4. 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

5. Note! Note!
Client-Side Server-Side

6. Contoh

7. Perkembangan Javascript
Library Framework

9. Apa itu angularJS ?
MVW [Model View Wathever] Javascript
Framework untuk membuat 'web apps'
khususnya Single Page Application

10. History
●
Created by Miško Hevery
●
Open source since 2009
●
Supported by Google
●
Large & fast-growing

11. Kenapa milih ?

12. Well Documented

13. Modular
http://ngmodules.org

14. Trending Topic

15. Many Tutorials

16. Angular Main Concepts
●
2 Way Data Binding
●
Directive
●
Expression
●
Model
●
View / Template
●
Controller
●
Filter

17. 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-WayDataBinding

18. 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

19. Expression
●
Kode Javascript seperti biasanya yang ditempatkan dalam curly-
brackets {{ expression }}
●
Dapat berupa:
- angular variable
- filter
- function

20. Model
●
Data yang ditampilkan kepada user dimana
user tersebut berinteraksi

21. View / Templates
●
Di angular, template ditulis dengan format HTML, dan dapat
mengandung directive, expression, atau filter
index.html
partials/template1.html

22. Controller
●
Fungsi konstruktor javascript untuk mengolah
data ($scope)

23. Filter
Memformat value dari expression yang
diperlihatkan ke user

24. Warning
●
Angular tidak direkomendasikan untuk SEO
●
Butuh trik khusus: http://prerender.io
●
Jangan buka di IE7

25. 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)

26. Other Recommended Tool
●
Sublime Text
●
Git
●
Bower (http://bower.io)
●
Gulpjs (http://gulpjs.com)
●
Twitter Bootstrap / Foundation

27. Thank You