Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Introduction to AngularJS

536 Aufrufe

Veröffentlicht am

Introduction to the AngularJS framework.

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Introduction to AngularJS

  1. 1. INTRO TO ANGULARJS Jamal O’Garro Code Crew Software Engineer + Instructor CODE CREW | INTRO TO ANGULARJS
  2. 2. Day 1 • JavaScript Review • Angular Basics • Sample App Day 2 • Best Practices • Firebase / MEAN • Advanced Topics CODE CREW | INTRO TO ANGULARJS CLASS ROADMAP
  3. 3. WHAT YOU’RE EXPECTED TO KNOW CODE CREW | INTRO TO ANGULARJS • Basic JavaScript • HTML + CSS • Familiarity with MVC design pattern
  4. 4. WHAT IS ANGULARJS? CODE CREW | INTRO TO ANGULARJS • Framework for building single-page applications • Based on service based architecture, data binding and dependency injection • Open source and maintained by Google • Is often referred to as being a MV* framework
  5. 5. ANGULAR PHILOSOPHY CODE CREW | INTRO TO ANGULARJS • What HTML would have been if it were created today • HTML should be dynamic • Code should be modular and easy to test • Components should be reusable
  6. 6. WHY USE ANGULAR? CODE CREW | INTRO TO ANGULARJS • Rapid development • Code organization • Performance • Easy to test • Community
  7. 7. ANGULAR VS. RAILS, DJANGO, ETC. CODE CREW | INTRO TO ANGULARJS • Angular is a client-side application • Angular apps are single-page apps • Angular enforces slightly different design patterns
  8. 8. JAVASCRIPT REVIEW CODE CREW | INTRO TO ANGULARJS
  9. 9. • Created by Netscape • Runs in browser & server • Conforms to ECMAScript standard CODE CREW | INTRO TO ANGULARJS JAVASCRIPT
  10. 10. OBJECT-ORIENTED JAVASCRIPT CODE CREW | INTRO TO ANGULARJS
  11. 11. CODE CREW | INTRO TO ANGULARJS OBJECTS
  12. 12. • There are several ways to create objects • If a variable is part of an object is called a property • If a function is part of an object it is called a method CODE CREW | INTRO TO ANGULARJS A FEW MORE NOTES ABOUT OBJECTS
  13. 13. • JavaScript uses objects for inheritance • Objects are linked to each other by a special prototype object • If we create a new instance of an object using a constructor the new object “inherits” the properties and methods of the parent CODE CREW | INTRO TO ANGULARJS PROTYPAL INHERITANCE
  14. 14. Allow us to create new instances of objects CODE CREW | INTRO TO ANGULARJS CONSTRUCTOR FUNCTIONS
  15. 15. Allows us to dynamically update a web page without having to reload the entire page CODE CREW | INTRO TO ANGULARJS AJAX
  16. 16. PROMISES CODE CREW | INTRO TO ANGULARJS
  17. 17. KEY CONCEPTS CODE CREW | INTRO TO ANGULARJS
  18. 18. SINGLE PAGE APP CODE CREW | INTRO TO ANGULARJS
  19. 19. DATABASE BROWSER CONTROLLER VIEW MODEL CODE CREW | INTRO TO RAILS MVC DESIGN PATTERN
  20. 20. MODEL CODE CREW | INTRO TO ANGULARJS
  21. 21. VIEW CODE CREW | INTRO TO ANGULARJS
  22. 22. CONTROLLER CODE CREW | INTRO TO ANGULARJS
  23. 23. ROUTER CODE CREW | INTRO TO ANGULARJS
  24. 24. MVVM DESIGN PATTERN CODE CREW | INTRO TO ANGULARJS BROWSER VIEW VIEWMODEL MODEL
  25. 25. DATA BINDING CODE CREW | INTRO TO ANGULARJS
  26. 26. VIEW MODEL CODE CREW | INTRO TO ANGULARJS
  27. 27. SERVICE BASED ARCHITECTURE CODE CREW | INTRO TO ANGULARJS
  28. 28. DEPENDENCY INJECTION CODE CREW | INTRO TO ANGULARJS
  29. 29. SINGLETON CODE CREW | INTRO TO ANGULARJS
  30. 30. LAZY LOADING CODE CREW | INTRO TO ANGULARJS
  31. 31. CONSTRUCTOR CODE CREW | INTRO TO ANGULARJS
  32. 32. FACTORY/SERVICE CODE CREW | INTRO TO ANGULARJS
  33. 33. ANGULAR COMPONENTS CODE CREW | INTRO TO ANGULARJS
  34. 34. DIRECTIVES CODE CREW | INTRO TO ANGULARJS
  35. 35. MODULES CODE CREW | INTRO TO ANGULARJS
  36. 36. EXPRESSIONS CODE CREW | INTRO TO ANGULARJS
  37. 37. CONTROLLER CODE CREW | INTRO TO ANGULARJS
  38. 38. SCOPE CODE CREW | INTRO TO ANGULARJS
  39. 39. SERVICE / FACTORY CODE CREW | INTRO TO ANGULARJS
  40. 40. FILTER CODE CREW | INTRO TO ANGULARJS
  41. 41. ANGULAR DIRECTIVES CODE CREW | INTRO TO ANGULARJS
  42. 42. NG-APP CODE CREW | INTRO TO ANGULARJS
  43. 43. NG-CONTROLLER CODE CREW | INTRO TO ANGULARJS
  44. 44. NG-SHOW / NG-HIDE CODE CREW | INTRO TO ANGULARJS
  45. 45. NG-IF CODE CREW | INTRO TO ANGULARJS
  46. 46. NG-REPEAT CODE CREW | INTRO TO ANGULARJS
  47. 47. NG-CLICK CODE CREW | INTRO TO ANGULARJS
  48. 48. NG-MODEL CODE CREW | INTRO TO ANGULARJS
  49. 49. MAKING SERVER CALLS CODE CREW | INTRO TO ANGULARJS
  50. 50. $HTTP CODE CREW | INTRO TO ANGULARJS • Allows us to make AJAX calls to server • Returns a promise with error and success methods • Automatically converts payloads and responses to JSON
  51. 51. CODE CREW | INTRO TO ANGULARJS REST
  52. 52. CODE CREW | INTRO TO ANGULARJS MEAN STACK
  53. 53. CODE CREW | INTRO TO ANGULARJS FIREBASE
  54. 54. LET’S BUILD OUR APP! CODE CREW | INTRO TO ANGULARJS
  55. 55. THANKS MUCH!!! Jamal O’Garro Code Crew Software Engineer + Instructor CODE CREW | INTRO TO ANGULARJS

×