Hipster JS

A Brief Introduction to !Angular & Firebase

very^

About ME

• Python Programmer

• Hate JS

• Realized I had to suck it up

• Learned Angular and like it

• (Coffeescript is cool too)

Superheroic Javascript MVW Framework

(HTML enhanced for web apps!)

MVW?

Model!View!Whatever You Want

Different approach to web app architecture.

Boiler plate and cruft replaced with black magic and voodoo.

But seriously- it is a different approach.

Apps, Controllers, Directives, Services

Apps (modules)

You’ll probably only have one

Essential building block

var heroes = angular.module('heroes', []);

It’s your namespace

Controllers

If the HTML is the where and the JS is the what…

controllers are the how…

Most importantly- they give you a scope. (and lots of other stuff)

heroes.controller('HeroController', ['$scope', function($scope){ $scope.hero = 'Spiderman'; }]);

Directives

This is really the where- they are used in the HTML

Encapsulate logical functionality and display

Can have templates

Can have controllers

Can have an isolated scope

ServicesThere are providers, services, and factories

Let’s focus on factory

heroes.factory('HeroFactory', function(){ return function(name) { return { name: name, superpower: null, alterEgo: null } } });

Codehttps://github.com/leetrout/jsheroes

Store & Sync Data Instantly

• NoSQL • JSON Documents • Plug and play with Angular

Plug and play Angular with Firebase

Learning More

egghead.io learn-angular.org codeschool.com

firebase.com codecademy.comangularfire.com

Thanks!