googlearchive/firebase-angular-starter-pack

A Firebase + AngularJS Starter Pack

Status: Archived

This repository has been archived and is no longer maintained.

This is a legacy Firebase example (for SDK 2.x.x). You probably want to use one of the up-to-date examples at https://firebase.google.com/docs/samples

---

Firebase & AngularJS Starter Pack

Firebase is a powerful platform for your mobile and web applications that lets you build apps fast without managing servers.

Introduction

This starter pack is for anyone building a web app with Angular and Firebase. Firebase's realtime database works well with Angular's two-way data binding and content rendering. This repository includes example applications that use some of the common patterns and best practices for integrating the two technologies.

We recommend taking the tutorial on both the Firebase JavaScript client and AngularJS before proceeding.

There are three key benefits to using Firebase as a backend for your Angular app:

No backend code required

Since Firebase is a hosted service, your app can use the Firebase JS library to talk to the Firebase servers directly. In combination with our flexible security rules that control access to data, this means that in many cases you don't need any backend code at all to write a production ready app.

Authentication

Firebase Authentication makes it easy to add authentication to your app via Facebook, Github, Persona, Twitter, or email / password login. If you already have your own user authentication system, Firebase can integrate with your servers as well.

Realtime Database

Firebase has a realtime database, which means all data synchronized via the service receives updates in realtime when a change is made. This makes Firebase especially powerful as a backend for collaborative apps where data changes frequently.

Example Projects

Chat

Realtime chat written with AngularJS + Firebase.

Live Demo

Todo

An version of the TodoMVC in AngularJS which has been modified to use Firebase as a backend.

Live Demo

Crowdsourced Fog

A crowdsourced weather application for San Francisco fog.

Live Demo

Ionic-Chatroom

A basic realtime chatroom application built with the Ionic frontend framework and Firebase as the backend.

angularFire-seed

An application skeleton for a typical AngularFire web app. This seed allows you to quickly bootstrap realtime apps using Firebase and Angular.

Ionic-seed

An application skeleton for a typical Ionic cross-platform (Android, iOS, Web) app. This seed provides a basic Ionic application hierarchy with Firebase and Angular.

Additional Firebase + AngularJS Resources

• AngularFire.com
• AngularFire Documentation
• Firebase + Angular Google Group
• Firebase on StackOverflow

If you have any technical questions or feedback on integrating Firebase with Angular, reach out to Firebase support.

firebase-angular-starter-pack's Issues

This repo is extremely out of date.

Just an FYI, for new firebase users trying to get up to speed on Firebase, the preponderance of docs and projects that are very old and out of date is a bit disconcerting. This project uses 1.2.7 of the firebase libs, so they really are not usable anymore. You might consider un-publishing them until they can be updated to a new version. That and the fact that every search for 'Firebase" sends you to outdated docs at firebase.com has made the past two days a huge struggle to get up to speed on using firebase.

Most demo links don't work

Most of the demo links to apps like chat, fog etc don't work

What's the difference between this and angularFire-seed?

Seems like both of these projects have the goal of bootstrapping a project with Angular and Firebase, and both are owned by the same github org. So what's the difference?

https://github.com/firebase/angularFire-seed

Update firebase.js and firebase-simple-login.js includes to latest version.

Friend of mine ran into trouble getting google auth to work, since the seed is referencing an old version of simple login.

Local server for web

Ionic has the ionic serve command now to preview the app in your browser without needing to run the python server. It even has ionic serve --lab for running a preview of the Android and iOS version side by side.

Can't manually type in a nested url

This is my main concern for using firebase. Most SPA's use a custom backend which has a catchall route handler that allows this feature (gmail, youtube, etc), but with firebase users have to start from the root path before navigating the routes. This issue may be out of scope since I'm guessing it's not possible with firebase, but is there something I can add to make this work? Thanks.

angularfire.min.js causing error Unknown provider: $firebaseSimpleLoginProvider <- $firebaseSimpleLogin

I think minify this file causing problem with firebase-simple-login.js:

https://github.com/firebase/firebase-angular-starter-pack/blob/master/Ionic-seed/www/js/firebase/angularfire.min.js

Error: [$injector:unpr] Unknown provider: $firebaseSimpleLoginProvider <- $firebaseSimpleLogin
http://errors.angularjs.org/1.2.7/$injector/unpr?p0=NaNirebaseSimpleLoginProvider%20%3C-%20%24firebaseSimpleLogin
    at http://0.0.0.0:4001/js/angular/angular.js:78:12
    at http://0.0.0.0:4001/js/angular/angular.js:3540:19
    at Object.getService [as get] (http://0.0.0.0:4001/js/angular/angular.js:3667:39)
    at http://0.0.0.0:4001/js/angular/angular.js:3545:45
    at getService (http://0.0.0.0:4001/js/angular/angular.js:3667:39)
    at invoke (http://0.0.0.0:4001/js/angular/angular.js:3694:13)
    at Object.instantiate (http://0.0.0.0:4001/js/angular/angular.js:3715:23)
    at http://0.0.0.0:4001/js/angular/angular.js:6766:28
    at update (http://0.0.0.0:4001/js/ionic-angular.js:2786:30)
    at directive.link (http://0.0.0.0:4001/js/ionic-angular.js:2749:7) 

If I use this version, it is fine
https://github.com/firebase/firebase-angular-starter-pack/blob/master/angularFire-seed/test/lib/firebase/angularfire.js

angularFire-seed - changing login email

After registration with email [email protected] a registered user is created (visible in login & auth section) and it appears also in the data under /users/id. The interface allows to change the email address, which updates the data (value of /users/id/email), but the login email stays unchanged, so the user cannot login with the new email.

$ionicLoading.hide() not working

I am trying to use ionic loading and .show() function works fine but hide doesnt work, I checked ionic-angular.js and it is not implemented I think you have an old version of ionic

Ionic-seed not compatible with Ionic v1.0.0-beta.6

If I replace both ionic.js and ionic-angular.js to v1.0.0-beta.6, running http://0.0.0.0:4000/index.html (Jekyll) will redirect to http://0.0.0.0:4000/index.html#/tab/account. And it is a blank page.

This is probably due to some route failure!?