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.
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
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
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