[JogjaJS] Single Page Application nganggo Angular.js
1 like2,042 views
This document provides an introduction and overview of AngularJS, a JavaScript framework for building single page applications. It discusses the main concepts of AngularJS including two-way data binding, directives, expressions, models, views/templates, controllers, and filters. It also provides brief histories of JavaScript and AngularJS, reasons for choosing AngularJS, and instructions for getting started with AngularJS.
![[JogjaJS] Single Page Application nganggo Angular.js](https://image.slidesharecdn.com/angular-jogjajs-140901060146-phpapp01/85/JogjaJS-Single-Page-Application-nganggo-Angular-js-8-320.jpg)
![Apa itu angularJS ?
MVW [Model View Wathever] Javascript
Framework untuk membuat 'web apps'
khususnya Single Page Application](https://image.slidesharecdn.com/angular-jogjajs-140901060146-phpapp01/85/JogjaJS-Single-Page-Application-nganggo-Angular-js-9-320.jpg)
[JogjaJS] Single Page Application nganggo Angular.js
- 1. Single Page Application nganggo by @jeguwaskito
- 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
- 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 Two-Way Data Binding TTeemmppllaattee VViieeww Continuous updates Model is Single-Source-of-Truth MMooddeell Compile Changes to View updates Model Changes to Model updates View
- 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