This document introduces AngularJS version 1.x and provides an overview of its key concepts and features. It discusses AngularJS's MVC architecture including models, views, and controllers. It then provides examples of using AngularJS for data binding, making requests to retrieve data, creating services, and routing. The examples demonstrate basic usage and capabilities of AngularJS. The document concludes by proposing an exercise to create a CRUD application using the AngularJS framework and interacting with a JSON placeholder API.

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