Introduction to AngularJS
•
1 like•599 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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (11)
Similar to Introduction to AngularJS
Similar to Introduction to AngularJS (20)
More from Jamal Sinclair O'Garro
More from Jamal Sinclair O'Garro (12)
Recently uploaded
Recently uploaded (20)
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