A fast and loose overview of AngularJS & Firebase.

1. Hipster JS
A Brief Introduction to !
Angular & Firebase
very
^

2. About ME
• Python Programmer
• Hate JS
• Realized I had to suck it up
• Learned Angular and like it
• (Coffeescript is cool too)

3. Superheroic Javascript MVW Framework
(HTML enhanced for web apps!)

4. MVW?

5. Model!
View!
Whatever You Want

6. 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

7. Apps (modules)
You’ll probably only have one
Essential building block
var heroes = angular.module('heroes', []);
It’s your namespace

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

9. 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

10. Services
There are providers, services, and factories
Let’s focus on factory
heroes.factory('HeroFactory', function(){
return function(name) {
return {
name: name,
superpower: null,
alterEgo: null
}
}
});

11. Code
https://github.com/leetrout/jsheroes

12. Store & Sync Data Instantly
• NoSQL
• JSON Documents
• Plug and play with Angular

13. Plug and play Angular with Firebase

14. Learning More
egghead.io learn-angular.org codeschool.com
firebase.com codecademy.comangularfire.com

15. Thanks!