INTRO TO ANGULARJS

Jamal O’Garro Code Crew Software Engineer + Instructor

CODE CREW | INTRO TO ANGULARJS

Day 1

• JavaScript Review

• Angular Basics

• Sample App

Day 2

• Best Practices

• Firebase / MEAN

• Advanced Topics

CODE CREW | INTRO TO ANGULARJS

CLASS ROADMAP

WHAT YOU’RE EXPECTED TO KNOWCODE CREW | INTRO TO ANGULARJS

• Basic JavaScript

• HTML + CSS

• Familiarity with MVC design pattern

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

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

WHY USE ANGULAR?CODE CREW | INTRO TO ANGULARJS

• Rapid development

• Code organization

• Performance

• Easy to test

• Community

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

JAVASCRIPT REVIEW

CODE CREW | INTRO TO ANGULARJS

• Created by Netscape

• Runs in browser & server

• Conforms to ECMAScript standard

CODE CREW | INTRO TO ANGULARJS

JAVASCRIPT

OBJECT-ORIENTED JAVASCRIPTCODE CREW | INTRO TO ANGULARJS

CODE CREW | INTRO TO ANGULARJS

OBJECTS

• 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

• 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

Allow us to create new instances of objects

CODE CREW | INTRO TO ANGULARJS

CONSTRUCTOR FUNCTIONS

Allows us to dynamically update a web page without having to reload the entire page

CODE CREW | INTRO TO ANGULARJS

AJAX

PROMISESCODE CREW | INTRO TO ANGULARJS

KEY CONCEPTS

CODE CREW | INTRO TO ANGULARJS

SINGLE PAGE APPCODE CREW | INTRO TO ANGULARJS

DATABASE

BROWSER CONTROLLER

VIEW MODEL

CODE CREW | INTRO TO RAILS

MVC DESIGN PATTERN

MODELCODE CREW | INTRO TO ANGULARJS

VIEWCODE CREW | INTRO TO ANGULARJS

CONTROLLERCODE CREW | INTRO TO ANGULARJS

ROUTERCODE CREW | INTRO TO ANGULARJS

MVVM DESIGN PATTERNCODE CREW | INTRO TO ANGULARJS

BROWSER

VIEW VIEWMODEL MODEL

DATA BINDINGCODE CREW | INTRO TO ANGULARJS

VIEW MODELCODE CREW | INTRO TO ANGULARJS

SERVICE BASED ARCHITECTURECODE CREW | INTRO TO ANGULARJS

DEPENDENCY INJECTIONCODE CREW | INTRO TO ANGULARJS

SINGLETONCODE CREW | INTRO TO ANGULARJS

LAZY LOADINGCODE CREW | INTRO TO ANGULARJS

CONSTRUCTORCODE CREW | INTRO TO ANGULARJS

FACTORY/SERVICECODE CREW | INTRO TO ANGULARJS

ANGULAR COMPONENTS

CODE CREW | INTRO TO ANGULARJS

DIRECTIVESCODE CREW | INTRO TO ANGULARJS

MODULESCODE CREW | INTRO TO ANGULARJS

EXPRESSIONSCODE CREW | INTRO TO ANGULARJS

CONTROLLERCODE CREW | INTRO TO ANGULARJS

SCOPECODE CREW | INTRO TO ANGULARJS

SERVICE / FACTORYCODE CREW | INTRO TO ANGULARJS

FILTERCODE CREW | INTRO TO ANGULARJS

ANGULAR DIRECTIVES

CODE CREW | INTRO TO ANGULARJS

NG-APPCODE CREW | INTRO TO ANGULARJS

NG-CONTROLLERCODE CREW | INTRO TO ANGULARJS

NG-SHOW / NG-HIDECODE CREW | INTRO TO ANGULARJS

NG-IFCODE CREW | INTRO TO ANGULARJS

NG-REPEATCODE CREW | INTRO TO ANGULARJS

NG-CLICKCODE CREW | INTRO TO ANGULARJS

NG-MODELCODE CREW | INTRO TO ANGULARJS

MAKING SERVER CALLS

CODE CREW | INTRO TO ANGULARJS

$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

CODE CREW | INTRO TO ANGULARJS

REST

CODE CREW | INTRO TO ANGULARJS

MEAN STACK

CODE CREW | INTRO TO ANGULARJS

FIREBASE

LET’S BUILD OUR APP!

CODE CREW | INTRO TO ANGULARJS

THANKS MUCH!!!

Jamal O’Garro Code Crew Software Engineer + Instructor

CODE CREW | INTRO TO ANGULARJS