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