Membuat Single Page Application menggunakan AngularJS

Presentation for JogjaJS event, introducing AngularJs

Transcript

1. Single Page Application by @jeguwaskito nganggo
2. 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
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. Kok 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 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
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 Bower: • bower install angular • Kalau belum ada bower Download di sini
26. Demo Source Code Link: https://github.com/waskito/JogjaJSAngular
27. Thank You