Introduction to AngularJS

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
CLASS ROADMAP

WHAT YOU’RE EXPECTED TO KNOW
• Basic JavaScript
• HTML + CSS
• Familiarity with MVC design pattern

WHAT IS 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 PHILOSOPHY
• 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?
• Rapid development
• Code organization
• Performance
• Easy to test
• Community

ANGULAR VS. RAILS, DJANGO, ETC.
• Angular is a client-side application
• Angular apps are single-page apps
• Angular enforces slightly diﬀerent design patterns

JAVASCRIPT REVIEW

• Created by Netscape
• Runs in browser & server
• Conforms to ECMAScript
standard
JAVASCRIPT

OBJECT-ORIENTED JAVASCRIPT

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
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
PROTYPAL INHERITANCE

Allow us to create new instances of objects
CONSTRUCTOR FUNCTIONS

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

PROMISES

KEY CONCEPTS

SINGLE PAGE APP

DATABASE
BROWSER CONTROLLER
VIEW MODEL
CODE CREW | INTRO TO RAILS
MVC DESIGN PATTERN

MODEL

VIEW

CONTROLLER

ROUTER

MVVM DESIGN PATTERN
BROWSER
VIEW VIEWMODEL MODEL

DATA BINDING

VIEW MODEL

SERVICE BASED ARCHITECTURE

DEPENDENCY INJECTION

SINGLETON

LAZY LOADING

CONSTRUCTOR

FACTORY/SERVICE

ANGULAR COMPONENTS

DIRECTIVES

MODULES

EXPRESSIONS

SCOPE

SERVICE / FACTORY

FILTER

ANGULAR DIRECTIVES

NG-APP

NG-CONTROLLER

NG-SHOW / NG-HIDE

NG-IF

NG-REPEAT

NG-CLICK

NG-MODEL

MAKING SERVER CALLS

$HTTP
• Allows us to make AJAX calls to server
• Returns a promise with error and success methods
• Automatically converts payloads and responses to
JSON

REST

MEAN STACK

FIREBASE

LET’S BUILD OUR APP!

THANKS MUCH!!!
Jamal O’Garro
Code Crew
Software Engineer + Instructor

Introduction to AngularJS

More Related Content

What's hot

Viewers also liked

Similar to Introduction to AngularJS

More from Jamal Sinclair O'Garro

Recently uploaded

Introduction to AngularJS