Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BLIBLIDOTCOM - ANGULARJS

BLIBLIDOTCOM - ANGULARJS

BLIBLIDOTCOM - ANGULARJS

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

March 14, 2017
Tweet

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