Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modern Web Applications using AngularJS

3,733 views

Published on

An introductory session about #AngularJS, Kinda mentions history but focuses more on Angular's features, and what it introduces to Web Development.The session was introduced in Google Dev Fest 2014 in Cairo, Egypt . And then revised and presented in #CATScope14.

Published in: Technology

Modern Web Applications using AngularJS

  1. 1. Modern Web Applications using
  2. 2. Ibrahim Abdel Fattah Mohamed Web Development & Software Engineer @bingorabbit http://bingorabbit.com
  3. 3. Agenda
  4. 4. What is AngularJS?
  5. 5. .js
  6. 6. ~17,000 Lines of code
  7. 7. ~1,000 Lines of code
  8. 8. ‫راﺟﻞ؟‬ ‫ﯾﺎ‬
  9. 9. What is AngularJS?
  10. 10. .js
  11. 11. Library
  12. 12. Framework
  13. 13. What is AngularJS?
  14. 14. .js
  15. 15. Single Page Applications
  16. 16. You already know about it..
  17. 17. “Angular is what HTML would have been..” -- Angular Documentation
  18. 18. Why?
  19. 19. Simplicity is the ultimate sophistication... -- Leonardo Da Vinci
  20. 20. Before 1| <!DOCTYPE html> 2| <html lang="en"> 3| <head> 4| <title>Index</title> 5| </head> 6| <body> 7| Name: <input type="text" id="myInputBox"> 8| Hello, <span id="nameSpan"></span> 9| <script> 10| var inputElement = document.getElementById("myInputBox"); 11| inputElement.addEventListener('keyup', function(){ 12| var text = inputElement.value; 13| nameElement.innerHTML = text; 14| }); 15| </script> 17| </body> 18| </html>
  21. 21. 1| <!DOCTYPE html> 2| <html lang="en"> 3| <head> 4| <title>Index</title> 5| <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min. js"></script> 6| </head> 7| <body> 8| Name: <input type="text" id="myInputBox"> 9| Hello, <span id="nameSpan"></span> 10| <script> 11| $("#myInputBox").keyup(function(){ 12| $("#nameSpan").text($("#myInputBox").val()); 13| }); 14| </script> 15| </body> 16| </html> Beforeeven a better version..
  22. 22. 1| <!DOCTYPE html> 2| <html lang="en" ng-app> 3| <head> 4| <title>Index</title> 5| <script src="angular.min.js"></script> 6| </head> 7| <body> 8| Name: <input type="text" ng-model=”nameModel” /> 9| Hello, {{ nameModel }} 10| </body> 11| </html> After
  23. 23. W
  24. 24. Modularity
  25. 25. Reusability
  26. 26. Community
  27. 27. AngularJS HOT Features Some
  28. 28. Data Binding
  29. 29. Angular Directives
  30. 30. Angular Filters
  31. 31. Routing
  32. 32. STOP the ****** nonsense and show me some CODE!github repo used in session: -http://github.com/bingorabbit/shebbak -http://github.com/bingorabbit/bondera
  33. 33. Keywords - Declarative vs. Imperative Programming - Web Components - Promise Objects - History of AngularJS - angularjs.org - ng-book - W3Schools Angular: http: //goo.gl/vQjSKp - http://todomvc.com
  34. 34. Applications using AngularJS Built with AngularJS: http://goo.gl/r2c2at
  35. 35. Q?s
  36. 36. Thanks!:) Ibrahim Abdel Fattah Mohamed Tweet to me: @bingorabbit

×