Angular Js Second Edition Workshop

This is my second edition of Angular Js Workshop at Google Developer Tlemcen, Algeria

Transcript

1. Angular Js Super Heroic Framework andelus tasfaout.com Made with By Tasfaout Yassine
2. Why i dropped out Maybe it could happen : )
3. Agenda 1- Introduction to Javascript 2- What is Angular Js 3- Why & When to use it 4- Angular Js Structure 5- Getting Started
4. Introduction To Javascript Let’s settle this once for all
5. Tkhantich ! Some code Samples // Variable Declaration var gdgDevFest = “Awesomeness"; // Array Declaration var gdgArray = ["Yassine",true, 2,function(){return 1}]; // Object Declaration var gdgObject = { name : "DevFest", location : "Tlemcen", speakers : ["Yassine","Samad","Charaf"] };
6. Tkhantich ! Some code Samples //Function return a function Inception! function add(n){ return function(b){ return n+b; }; } //Sorting an array ASCE function asce(arr){ arr.sort(function(a,b){ return a-b; }); }
7. Tkhantich ! Some code Samples //Get the distance between two point in xy scale var arr = [[0,0],[5,1]]; function getLength(arr) { var length = Math.sqrt( Math.pow(arr[0][0] - arr[1][0],2) + Math.pow(arr[0][1] - arr[1][1],2)); return length.toFixed(2); } getLength(arr);
8. That was a glance of javascript
9. What is Angular Js MVC javascript framework that will help us build dynamic web application specially SPA
10. MVC MVC : Model, View & Controller Model : Is the data View : What the user sees Controller: All the logic that connect the model with the view
11. Why & When to use MVC or DOM
12. Why & When to use MVC or DOM MVC DOM
13. Why & When to use MVC or DOM Demonstration Of The Difference
14. Why & When to use MVC or DOM MVC Framework is great at : -Handeling Data -Listen to user interactions -Presenting data or changes back to the user -Providing a pipeline, between your data and the view. And various inputs, that allow the user to interact with that data. DOM library is great at : -Visual enhancement of the already available data. …
15. Angular Js Structure
16. Angular Js Structure Key Elements: - Two way data binding - Controllers - Directives - Filters - Factories
17. Angular Js Structure Two Way Data Binding
18. Angular Js Structure Controllers A module that will hold our logic between the data and our view
19. Angular Js Structure Directives Get HTML to do awesome stuff !
20. Angular Js Structure Filters Play with our data
21. Angular Js Structure Factories Any Reusable code across our app.
22. Angular Js Structure Getting Started
23. The End