ANGULARJS v.1.x BY IRFAN MAULANA 

ABOUT ME • Name : Irfan Maulana • Job : Software Development Engineer • Role : Front End Developer 

WEB - BEFORE • Javascript DOM Manipulation Browser compatibility problem 

WEB - BEFORE • jQuery + DOM Manipulation DOM Manipulation Browser compatibility problem 

WEB NOWADAYS 

ANGULARJS Developed by Google Javascript Framework for Modern Web Application 

MVC ARCHITECTURE 

> MODEL Entire javascript’s object that reflect data structure and wrapped in $scope. 

> MODEL > VIEW HTML template that references the data to model 

> MODEL > VIEW > CONTROLLER All the logic that control the model than react all changes triggered by view 

EXAMPLE 1 : Data Binding File created : 1. Application.js 2. AppController.js 3. index.html 

EXAMPLE 1 : Data Binding 1. Application.js 

EXAMPLE 1 : Data Binding 2. AppController.js 

EXAMPLE 1 : Data Binding 3. index.html 

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 

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 

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 

EXAMPLE 4 : Routing Source code : https://github.com/mazipan/angularjs-basic- tutorial/tree/master/example4-routing You Learn : + How to create routing in AngularJS 

Exercise Create AngularJS Web Application that have CRUD interaction base on below API : https://jsonplaceholder.typicode.com/ 

THANK YOU