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!