BLIBLIDOTCOM - ANGULARJS

BLIBLIDOTCOM - ANGULARJS

Transcript

1. ANGULARJS v.1.x BY IRFAN MAULANA
2. ABOUT ME • Name : Irfan Maulana • Job : Software Development Engineer • Role : Front End Developer
3. WEB - BEFORE • Javascript DOM Manipulation Browser compatibility problem
4. WEB - BEFORE • jQuery + DOM Manipulation DOM Manipulation Browser compatibility problem
5. WEB NOWADAYS
6. ANGULARJS Developed by Google Javascript Framework for Modern Web Application
7. MVC ARCHITECTURE
8. > MODEL Entire javascript’s object that reflect data structure and wrapped in $scope.
9. > MODEL > VIEW HTML template that references the data to model
10. > MODEL > VIEW > CONTROLLER All the logic that control the model than react all changes triggered by view
11. EXAMPLE 1 : Data Binding File created : 1. Application.js 2. AppController.js 3. index.html
12. EXAMPLE 1 : Data Binding 1. Application.js
13. EXAMPLE 1 : Data Binding 2. AppController.js
14. EXAMPLE 1 : Data Binding 3. index.html
15. 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
16. 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
17. 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
18. EXAMPLE 4 : Routing Source code : https://github.com/mazipan/angularjs-basic- tutorial/tree/master/example4-routing You Learn : + How to create routing in AngularJS
19. Exercise Create AngularJS Web Application that have CRUD interaction base on below API : https://jsonplaceholder.typicode.com/
20. THANK YOU