introduction to angularjs
TRANSCRIPT
![Page 1: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/1.jpg)
INTRO TO ANGULARJS
Jamal O’Garro Code Crew Software Engineer + Instructor
CODE CREW | INTRO TO ANGULARJS
![Page 2: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/2.jpg)
Day 1
• JavaScript Review
• Angular Basics
• Sample App
Day 2
• Best Practices
• Firebase / MEAN
• Advanced Topics
CODE CREW | INTRO TO ANGULARJS
CLASS ROADMAP
![Page 3: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/3.jpg)
WHAT YOU’RE EXPECTED TO KNOWCODE CREW | INTRO TO ANGULARJS
• Basic JavaScript
• HTML + CSS
• Familiarity with MVC design pattern
![Page 4: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/5.jpg)
ANGULAR PHILOSOPHYCODE 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
![Page 6: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/6.jpg)
WHY USE ANGULAR?CODE CREW | INTRO TO ANGULARJS
• Rapid development
• Code organization
• Performance
• Easy to test
• Community
![Page 7: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/8.jpg)
JAVASCRIPT REVIEW
CODE CREW | INTRO TO ANGULARJS
![Page 9: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/9.jpg)
• Created by Netscape
• Runs in browser & server
• Conforms to ECMAScript standard
CODE CREW | INTRO TO ANGULARJS
JAVASCRIPT
![Page 10: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/10.jpg)
OBJECT-ORIENTED JAVASCRIPTCODE CREW | INTRO TO ANGULARJS
![Page 11: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/11.jpg)
CODE CREW | INTRO TO ANGULARJS
OBJECTS
![Page 12: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/12.jpg)
• 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
![Page 13: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/13.jpg)
• 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
![Page 14: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/14.jpg)
Allow us to create new instances of objects
CODE CREW | INTRO TO ANGULARJS
CONSTRUCTOR FUNCTIONS
![Page 15: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/15.jpg)
Allows us to dynamically update a web page without having to reload the entire page
CODE CREW | INTRO TO ANGULARJS
AJAX
![Page 16: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/16.jpg)
PROMISESCODE CREW | INTRO TO ANGULARJS
![Page 17: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/17.jpg)
KEY CONCEPTS
CODE CREW | INTRO TO ANGULARJS
![Page 18: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/18.jpg)
SINGLE PAGE APPCODE CREW | INTRO TO ANGULARJS
![Page 19: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/19.jpg)
DATABASE
BROWSER CONTROLLER
VIEW MODEL
CODE CREW | INTRO TO RAILS
MVC DESIGN PATTERN
![Page 20: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/20.jpg)
MODELCODE CREW | INTRO TO ANGULARJS
![Page 21: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/21.jpg)
VIEWCODE CREW | INTRO TO ANGULARJS
![Page 22: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/22.jpg)
CONTROLLERCODE CREW | INTRO TO ANGULARJS
![Page 23: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/23.jpg)
ROUTERCODE CREW | INTRO TO ANGULARJS
![Page 24: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/24.jpg)
MVVM DESIGN PATTERNCODE CREW | INTRO TO ANGULARJS
BROWSER
VIEW VIEWMODEL MODEL
![Page 25: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/25.jpg)
DATA BINDINGCODE CREW | INTRO TO ANGULARJS
![Page 26: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/26.jpg)
VIEW MODELCODE CREW | INTRO TO ANGULARJS
![Page 27: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/27.jpg)
SERVICE BASED ARCHITECTURECODE CREW | INTRO TO ANGULARJS
![Page 28: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/28.jpg)
DEPENDENCY INJECTIONCODE CREW | INTRO TO ANGULARJS
![Page 29: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/29.jpg)
SINGLETONCODE CREW | INTRO TO ANGULARJS
![Page 30: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/30.jpg)
LAZY LOADINGCODE CREW | INTRO TO ANGULARJS
![Page 31: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/31.jpg)
CONSTRUCTORCODE CREW | INTRO TO ANGULARJS
![Page 32: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/32.jpg)
FACTORY/SERVICECODE CREW | INTRO TO ANGULARJS
![Page 33: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/33.jpg)
ANGULAR COMPONENTS
CODE CREW | INTRO TO ANGULARJS
![Page 34: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/34.jpg)
DIRECTIVESCODE CREW | INTRO TO ANGULARJS
![Page 35: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/35.jpg)
MODULESCODE CREW | INTRO TO ANGULARJS
![Page 36: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/36.jpg)
EXPRESSIONSCODE CREW | INTRO TO ANGULARJS
![Page 37: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/37.jpg)
CONTROLLERCODE CREW | INTRO TO ANGULARJS
![Page 38: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/38.jpg)
SCOPECODE CREW | INTRO TO ANGULARJS
![Page 39: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/39.jpg)
SERVICE / FACTORYCODE CREW | INTRO TO ANGULARJS
![Page 40: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/40.jpg)
FILTERCODE CREW | INTRO TO ANGULARJS
![Page 41: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/41.jpg)
ANGULAR DIRECTIVES
CODE CREW | INTRO TO ANGULARJS
![Page 42: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/42.jpg)
NG-APPCODE CREW | INTRO TO ANGULARJS
![Page 43: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/43.jpg)
NG-CONTROLLERCODE CREW | INTRO TO ANGULARJS
![Page 44: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/44.jpg)
NG-SHOW / NG-HIDECODE CREW | INTRO TO ANGULARJS
![Page 45: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/45.jpg)
NG-IFCODE CREW | INTRO TO ANGULARJS
![Page 46: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/46.jpg)
NG-REPEATCODE CREW | INTRO TO ANGULARJS
![Page 47: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/47.jpg)
NG-CLICKCODE CREW | INTRO TO ANGULARJS
![Page 48: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/48.jpg)
NG-MODELCODE CREW | INTRO TO ANGULARJS
![Page 49: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/49.jpg)
MAKING SERVER CALLS
CODE CREW | INTRO TO ANGULARJS
![Page 50: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/50.jpg)
$HTTPCODE 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
![Page 51: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/51.jpg)
CODE CREW | INTRO TO ANGULARJS
REST
![Page 52: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/52.jpg)
CODE CREW | INTRO TO ANGULARJS
MEAN STACK
![Page 53: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/53.jpg)
CODE CREW | INTRO TO ANGULARJS
FIREBASE
![Page 54: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/54.jpg)
LET’S BUILD OUR APP!
CODE CREW | INTRO TO ANGULARJS
![Page 55: Introduction to AngularJS](https://reader033.vdocument.in/reader033/viewer/2022052700/55b1c108bb61ebc5208b47c4/html5/thumbnails/55.jpg)
THANKS MUCH!!!
Jamal O’Garro Code Crew Software Engineer + Instructor
CODE CREW | INTRO TO ANGULARJS