Introduction to AngularJS
1 like605 views
This document outlines an introductory course on AngularJS taught over two days. Day one covers JavaScript review, Angular basics, and building a sample app. Day two focuses on best practices, using Firebase and the MEAN stack, and advanced topics. The course expects students to have a basic knowledge of JavaScript, HTML, CSS, and the MVC design pattern. It introduces key Angular concepts like directives, data binding, services and controllers. Students will learn to build a single-page application with Angular.
Introduction to AngularJS
- 1. INTRO TO ANGULARJS Jamal O’Garro Code Crew Software Engineer + Instructor CODE CREW | INTRO TO ANGULARJS
- 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. WHAT YOU’RE EXPECTED TO KNOW CODE CREW | INTRO TO ANGULARJS • Basic JavaScript • HTML + CSS • Familiarity with MVC design pattern
- 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. 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. WHY USE ANGULAR? CODE CREW | INTRO TO ANGULARJS • Rapid development • Code organization • Performance • Easy to test • Community
- 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. JAVASCRIPT REVIEW CODE CREW | INTRO TO ANGULARJS
- 9. • Created by Netscape • Runs in browser & server • Conforms to ECMAScript standard CODE CREW | INTRO TO ANGULARJS JAVASCRIPT
- 10. OBJECT-ORIENTED JAVASCRIPT CODE CREW | INTRO TO ANGULARJS
- 11. CODE CREW | INTRO TO ANGULARJS OBJECTS
- 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. • 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. Allow us to create new instances of objects CODE CREW | INTRO TO ANGULARJS CONSTRUCTOR FUNCTIONS
- 15. Allows us to dynamically update a web page without having to reload the entire page CODE CREW | INTRO TO ANGULARJS AJAX
- 16. PROMISES CODE CREW | INTRO TO ANGULARJS
- 17. KEY CONCEPTS CODE CREW | INTRO TO ANGULARJS
- 18. SINGLE PAGE APP CODE CREW | INTRO TO ANGULARJS
- 19. DATABASE BROWSER CONTROLLER VIEW MODEL CODE CREW | INTRO TO RAILS MVC DESIGN PATTERN
- 20. MODEL CODE CREW | INTRO TO ANGULARJS
- 21. VIEW CODE CREW | INTRO TO ANGULARJS
- 22. CONTROLLER CODE CREW | INTRO TO ANGULARJS
- 23. ROUTER CODE CREW | INTRO TO ANGULARJS
- 24. MVVM DESIGN PATTERN CODE CREW | INTRO TO ANGULARJS BROWSER VIEW VIEWMODEL MODEL
- 25. DATA BINDING CODE CREW | INTRO TO ANGULARJS
- 26. VIEW MODEL CODE CREW | INTRO TO ANGULARJS
- 27. SERVICE BASED ARCHITECTURE CODE CREW | INTRO TO ANGULARJS
- 28. DEPENDENCY INJECTION CODE CREW | INTRO TO ANGULARJS
- 29. SINGLETON CODE CREW | INTRO TO ANGULARJS
- 30. LAZY LOADING CODE CREW | INTRO TO ANGULARJS
- 31. CONSTRUCTOR CODE CREW | INTRO TO ANGULARJS
- 32. FACTORY/SERVICE CODE CREW | INTRO TO ANGULARJS
- 33. ANGULAR COMPONENTS CODE CREW | INTRO TO ANGULARJS
- 34. DIRECTIVES CODE CREW | INTRO TO ANGULARJS
- 35. MODULES CODE CREW | INTRO TO ANGULARJS
- 36. EXPRESSIONS CODE CREW | INTRO TO ANGULARJS
- 37. CONTROLLER CODE CREW | INTRO TO ANGULARJS
- 38. SCOPE CODE CREW | INTRO TO ANGULARJS
- 39. SERVICE / FACTORY CODE CREW | INTRO TO ANGULARJS
- 40. FILTER CODE CREW | INTRO TO ANGULARJS
- 41. ANGULAR DIRECTIVES CODE CREW | INTRO TO ANGULARJS
- 42. NG-APP CODE CREW | INTRO TO ANGULARJS
- 43. NG-CONTROLLER CODE CREW | INTRO TO ANGULARJS
- 44. NG-SHOW / NG-HIDE CODE CREW | INTRO TO ANGULARJS
- 45. NG-IF CODE CREW | INTRO TO ANGULARJS
- 46. NG-REPEAT CODE CREW | INTRO TO ANGULARJS
- 47. NG-CLICK CODE CREW | INTRO TO ANGULARJS
- 48. NG-MODEL CODE CREW | INTRO TO ANGULARJS
- 49. MAKING SERVER CALLS CODE CREW | INTRO TO ANGULARJS
- 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. CODE CREW | INTRO TO ANGULARJS REST
- 52. CODE CREW | INTRO TO ANGULARJS MEAN STACK
- 53. CODE CREW | INTRO TO ANGULARJS FIREBASE
- 54. LET’S BUILD OUR APP! CODE CREW | INTRO TO ANGULARJS
- 55. THANKS MUCH!!! Jamal O’Garro Code Crew Software Engineer + Instructor CODE CREW | INTRO TO ANGULARJS