Hipster JS: Angular & Firebase (Tri-JS Meetup)

15
Hipster JS A Brief Introduction to Angular & Firebase very ^

Transcript of Hipster JS: Angular & Firebase (Tri-JS Meetup)

Page 1: Hipster JS: Angular & Firebase (Tri-JS Meetup)

Hipster JS

A Brief Introduction to !Angular & Firebase

very^

Page 2: Hipster JS: Angular & Firebase (Tri-JS Meetup)

About ME

• Python Programmer

• Hate JS

• Realized I had to suck it up

• Learned Angular and like it

• (Coffeescript is cool too)

Page 3: Hipster JS: Angular & Firebase (Tri-JS Meetup)

Superheroic Javascript MVW Framework

(HTML enhanced for web apps!)

Page 4: Hipster JS: Angular & Firebase (Tri-JS Meetup)

MVW?

Page 5: Hipster JS: Angular & Firebase (Tri-JS Meetup)

Model!View!Whatever You Want

Page 6: Hipster JS: Angular & Firebase (Tri-JS Meetup)

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

Page 7: Hipster JS: Angular & Firebase (Tri-JS Meetup)

Apps (modules)

You’ll probably only have one

Essential building block

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

It’s your namespace

Page 8: Hipster JS: Angular & Firebase (Tri-JS Meetup)

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'; }]);

Page 9: Hipster JS: Angular & Firebase (Tri-JS Meetup)

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

Page 10: Hipster JS: Angular & Firebase (Tri-JS Meetup)

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 } } });

Page 11: Hipster JS: Angular & Firebase (Tri-JS Meetup)

Codehttps://github.com/leetrout/jsheroes

Page 12: Hipster JS: Angular & Firebase (Tri-JS Meetup)

Store & Sync Data Instantly

• NoSQL • JSON Documents • Plug and play with Angular

Page 13: Hipster JS: Angular & Firebase (Tri-JS Meetup)

Plug and play Angular with Firebase

Page 14: Hipster JS: Angular & Firebase (Tri-JS Meetup)

Learning More

egghead.io learn-angular.org codeschool.com

firebase.com codecademy.comangularfire.com

Page 15: Hipster JS: Angular & Firebase (Tri-JS Meetup)

Thanks!