angularFire should wrap the simple user login createUser function with an angularFire friendly method.

Currently, the angularFire service uses $apply but with a check for the (undocumented) $$phase. We should be using $timeout instead.

 $scope.model =angularFireCollection(ref);
             angular.forEach($scope.model, function(value, key) {   
                console.log(value);
            });

console.log(value); doesn't return any value or object! Why?

var testApp = angular.module('testApp', ['firebase'])
  .config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {

    $routeProvider
      .when('/', {
        templateUrl: '/views/main.html',
        controller: 'MainCtrl'
      })
     .when('/test', {
        templateUrl: '/views/test.html',
        controller: testCrtl,
        resolve:
        {
            firedata: function($q,angularFire){
            var deffered = $q.defer();

            var ref = new Firebase('https://shadowfax.firebaseio.com/items');
            ref.on('value', function(result){
                deffered.resolve(result.val());
            });

            return deffered.promise;
            }

        }
      })
      .otherwise({
        redirectTo: '/'
      });
      // $locationProvider.html5Mode( true );
  }]);


  angular.module('testApp')
    .controller('MainCtrl', ['$scope','$routeParams','$rootScope', function ($scope,$routeParams,$rootScope) {

        $scope.load = function(){ return false;}
        $rootScope.$on('$routeChangeStart', function(next, current) { 
        $scope.load = function(){ return true;}

        });


  }]);

  testApp.controller('TestCtrl',['$scope','$timeout','Fire','firedata','testCrtl']);

  var testCrtl = function ($scope,$timeout,Fire,firedata) {

                $scope.items=firedata;

  };

Why $scope.items=firedata; is null?

Now I use native Firebase script not angular one as here #60

...and renamed to FirebaseSimpleLogin

After loading an application, switching on / offline will result with bound data deleted from firebase

I'm not sure if this is not the right way to go about it, but I would like to establish a binding with an object -- the following works if I were to replace the object with an array

var promise = angularFire(url, $scope, 'objs');

promise.then = function() {
  $scope.objs = {a:1, b:3}
}

var idTestCtrl =  testApp.controller('IdTestCtrl', function (angularFireCollection,$scope,$routeParams) {

                var ref = new Firebase('https://shadowfax.firebaseio.com/items/'+$routeParams.idTest);

                var result= angularFireCollection(ref);


                $scope.model = result;


  });

I want to make a simple Edit View.

1. go to www.mydomain.com/item/-Iz3_MPc3Qe1EbHFNxQL
2. I use angularFireCollection because I want an Explicit Synchronization method do that:

• I get a form filled in with an Object data that I want to edit
• This form is updated from server (one way real-time)
• My changes only apply after I submit them (as described in your docs for Explicit Synchronization )

The problem is that var result= angularFireCollection(ref); returns not an object that I can attach to $scope.

How can I use angularFireCollection to get an Object for displaying data with a scenario I described?

The angularFire constructor only takes a URL as an argument, which makes auth more difficult than it should be. Like Backfire, we should accept Firebase objects that could be pre-authed, in addition to URLs.

I have a resource like this

|invites:
|---username:"mydata"

Mapped with

var fbInvites = fb.child('invite');
$scope.invites = angularFireCollection(fbInvites);

Username key is dynamic and in the views I use $id to show the username:

<li ng-repeat="invite in invites">
    <a href="#" ng-click="enterChat(invite.$id)">{{ invite.$id }}</a>
</li>

But how can I access to "mydata" from invite object (inside a controller or a view)?

The auth requirement is never checked on the initial path, because the route change event is not bound until after the initial path is triggered in the initialize function.

Probably not a huge issue, but if you want a login page to be the first thing someone hits, then it makes it a sort of manual process.

An unnatural behavior is shown when two or more angularFire's are created with the same name. I would expect the following code to log the value of "data2":

angularFire(url + 'data1', $scope, 'data', "");
promise = angularFire(url + 'data2', $scope, 'data', "");
promise.then(function () {console.log($scope.data);});

Instead however, the promise is never fulfilled. This code demonstrates that promise1 is being fulfilled and promise2 is left unfulfilled.

promise1 = angularFire(url + 'data1', $scope, 'data', "");
promise2 = angularFire(url + 'data2', $scope, 'data', "");

promise1.then(function () {
    // This is fulfilled.
    console.log('Value of promise 1:' + $scope.data);
});

promise2.then(function () {
    // This is not.
    console.log('Value of promise 2:' + $scope.data);
});

This seems counter-intuitive to me, I would expect the last promise to be the one that is fulfilled and not vice-versa.

Here is a plunkr demonstrating this behaviour: http://plnkr.co/edit/EWsKz60IomgN9RK7mGwq?p=preview

I added these in one of my projects. If you guys think this is a good idea, I could open a PR for it with tests.

Now you can just do for example myBase.$on('child_added', function(snapshot) { ... }); and it will $apply for you.

function firebaseWrap(fnName) {
  return function(arg, cb) {
    this[fnName](arg, function() {
      var args = arguments;
      $rootScope.$apply(function() {
        cb.apply(null, args);
      });
    });
  };
}
Firebase.prototype.$set = firebaseWrap('set');
Firebase.prototype.$once = firebaseWrap('once');
Firebase.prototype.$on = firebaseWrap('on');
Firebase.prototype.$update = firebaseWrap('update');
Firebase.prototype.$push = firebaseWrap('push');

I have been working on making a pull request which includes an alternative for the TodoMVC example that makes use of a service for the connecting/syncing to a firebase. It's much cleaner and simpler to do I think, and falls more inline with angular's idea for what a service should be used for: data, server connections etc. Basically anything that is always constant and may need to be accessed from anywhere in the app.

That's why I felt it would be good to add this alternate example. I'm just running into a few minor snags when it comes to the parts that have to do with completed todos and filtering of the completed and remaining todos which are part of the $watch in the current example's todoCtrl code. I wanted to what I've gotten done so far and thought someone might be able to help me fill in the missing pieces for the example.

Here's the code for the two files which I've gotten working, more or less.
https://gist.github.com/jaredwilli/5472340

var testApp = angular.module('testApp', ['firebase'])
  .config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {


     .when('/test', {
        templateUrl: '/views/test.html',
        controller: 'TestCtrl',
        resolve:
        {
            loaddata: testCtrl.loaddata
        }
      });

      // $locationProvider.html5Mode( true );
  }]);



testCtrl.loaddata = function(angularFire,$rootScope) {

var promise = angularFire('https://test.firebaseio.com/items', $rootScope, 'items', []);
return promise;

    }

If I use $rootScope it works, but how can i pass $scope of my controller that will be resolved after promise is done?

I dont want to use global Scope.

I bind a "$scope.data" to angularFire, using the normal method, inside a Controller.

From that point on, any change to data will get reflected to a certain location in Firebase.

At some point, I have a select box to switch profile, so I replace data with a "new" profile. I would like to be able to unwatch the previous one, because I'm now changing the location
of the data in Firebase (to a different profile, thus a different URL).

Right now, if I call angularFire() again, with $scope and data, it'll add a second set of watches, and write to BOTH locations.. which becomes increasingly odd :)

Also, right now if I try to remove or replace my data element, it deletes on the Firebase side.. which isn't very nice once I'm done editing.

To attempt to fix this, I added a way to remove watches by tweaking the call to $watch this way:

  var unwatch = $scope.$watch(name, function() {
  if (self._initial) {
    self._initial = false;
    return;
  }
  var val = JSON.parse(angular.toJson($scope[name]));
  if (angular.equals(val, self._remoteValue)) {
    return;
  }
  self._fRef.set(val);
}, true);
$scope['$ngFireUnwatch_' + name] = unwatch;

First and last lines are important here.

So I manage to be able to remove the watches from my code, before calling angularFire again.. and it works the first or second time I switch.. but then it completely deletes my objects from Firebase.

How could we solve this elegantly ?

thanks for your great work

It would be very helpful if angularFireCollections were key-accessible.

I'm trying to save some user settings to firebase. I'd like the settings object to look like:

settings: {
  firstName: "",
  lastName: ""
}

or, if necessary:

settings: {
  firstName: { val: "" },
  lastName: { val: "" }
}

To deal with ordering and human-readable titling, I'm planning to use a $scope variable outside of Firebase:

function myCtrl( ... ) {
  $scope.settingsModel = [
    { key: "firstName", title: "First name" },
    { key: "lastName", title: "Last name" }
  ];
  $scope.settingsCollection = angularFireCollection( ... );
}

Then my view can look like:

<div ng-repeat="field in settingsModel">
  <label>{{ field.title }}</label>
  <input ng-model="settingsCollection[field.key].val">
</div>

There doesn't seem to be a way to access elements of an angularFireCollection by key, though, so this won't work. Has anyone else run into a similar use case?

It would also seem natural to be able to do something like:

<div ng-repeat="(key, field) in settingsModel">
  {{ key }} : {{ field }}
</div>

Hi,could it be possible, that in the update function there should be the update method instead of the set method ??

Re: 82e5d17#commitcomment-3633616

Issue #52 handled the case where authorisation was not being checked for the initial route, however it doesn't seem to handle the scenario where initialize is called before $route.current can be set, causing an exception.

My initial solution was:

if (options.path) {
            if (typeof $route.current === 'undefined'){
                authRequiredRedirect(options.path, options.path, self);
            } else {
                authRequiredRedirect($route.current, options.path, self);
            }
          $rootScope.$on("$routeChangeStart", function(e, next) {
            authRequiredRedirect(next, options.path, self);
          });
        }

But this is based on the assumption that options.path is also the route that will initially be loaded - I expect that this is not the best / most elegant solution, so I would like to get some feedback on how best to cover this scenario.

Thanks

https://github.com/firebase/angularFire/blob/gh-pages/angularFire.js#L7

angularFireCollection.add takes a callback argument, but update and remove don't. I don't see any reason not to add it for those methods as well.

Hello folks!

This morning I went to include angularFire into my project via my bower.json file:

"angular-fire": "~0.1.0"

After doing so and running bower install from the CLI I got the following error:

/usr/local/share/npm/lib/node_modules/bower/node_modules/tmp/lib/tmp.js:260
  throw err;
        ^
TypeError: Invalid Version: 8bbe6022e28b28b8d697904415af89e39a49a0ef
    at new SemVer (/usr/local/share/npm/lib/node_modules/bower/node_modules/semver/semver.js:257:11)
    at compare (/usr/local/share/npm/lib/node_modules/bower/node_modules/semver/semver.js:410:10)
    at gte (/usr/local/share/npm/lib/node_modules/bower/node_modules/semver/semver.js:459:10)
    at cmp (/usr/local/share/npm/lib/node_modules/bower/node_modules/semver/semver.js:476:22)
    at Comparator.test (/usr/local/share/npm/lib/node_modules/bower/node_modules/semver/semver.js:546:10)
    at testSet (/usr/local/share/npm/lib/node_modules/bower/node_modules/semver/semver.js:818:17)
    at Range.test (/usr/local/share/npm/lib/node_modules/bower/node_modules/semver/semver.js:810:9)
    at Function.satisfies (/usr/local/share/npm/lib/node_modules/bower/node_modules/semver/semver.js:831:16)
    at null.<anonymous> (/usr/local/share/npm/lib/node_modules/bower/lib/core/package.js:773:23)
    at Array.filter (native)

I did some sleuthing around and it seems that there only exists one tag on this repo: v0.1 - which is an incorrect semver format.

It seems if you were to re-tag it as v0.1.0 it should work.

Until then I'm working around this issue by just explicitly assigning what SHA to checkout in my bower.json file:

"angular-fire": "d00e85750439e8fa2e338798ec6398836046f599"

Thanks for your help!

Need instructions, specifically the additional cdn depdendency.

http://stackoverflow.com/questions/15854435/angularfire-is-returning-undefined-when-the-controller-is-loaded-the-second-ti

I noticed that the auth implementation issue was closed, and I have read the new code. Unfortunately I am not very experienced, I was wondering if / when you intend to update the documentation to describe how to implement the new functionality?

Thanks in advance

In the todomvc example the tests are failing with:

Error: No module: firebase

I did:

npm install
npm test

on a fresh cloned repository

The issue is well described here: http://stackoverflow.com/questions/17807895/how-to-properly-implement-angularfireauth

This issue is present if the following conditions are valid:

• A route path has the 'authRequired' option set to true
• The representative controller has a path (i.e. where to redirect the user if he's not validated)

A sample code:

router

angular.module('phonecat', ['firebase']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl,
authRequired: false,
pathTo: '/phones'
}).
when('/phones/:age', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl,
authRequired: true,
pathTo: '/phones/:phoneId'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: LoginCtrl,
authRequired: false,
pathTo: '/login'
}).
otherwise({
redirectTo: '/phones'
}); }]);


controller

'use strict';
function PhoneListCtrl($scope, angularFire, angularFireAuth) {
var url = 'https://.firebaseio.com/';
var promise = angularFire(url, $scope, 'phones', []);
angularFireAuth.initialize(url, {scope: $scope, name: "user"});
}
function PhoneDetailCtrl($scope, $routeParams, angularFire, angularFireAuth) {
var url = 'https://.firebaseio.com/' + $routeParams.age;
angularFireAuth.initialize(url, {scope: $scope, path: "/login"});
$scope.$on("angularFireAuth:login", function(evt, user) {
var promise = angularFire(url, $scope, 'phone', {});
});
$scope.$on("angularFireAuth:logout", function(evt) {
console.log("you are logged out.");
});
$scope.$on("angularFireAuth:error", function(evt, err) {
console.log(err);
});
}
function LoginCtrl($scope, angularFire, angularFireAuth) {
var url = 'https://.firebaseio.com';
$scope.form = {};
$scope.login = function() {
var username = $scope.form.username;
var password = $scope.form.password;
angularFireAuth.login('password', {
email: username,
password: password,
rememberMe: false
});
};
}

Using this relatively simple code, when calling the '$scope.login' function the site will end up making endless loops - first the right partial will load (/phones/:age) then /login will load, which will again load the right partial and this loop will continue until the browser hangs.

A proposed fix is to remove the following two lines from initialise function:
this._redirectTo = null;
this._authenticated = false;

And change the client variable to:
var client = new FirebaseSimpleLogin(this._ref, function(err, user) {
self._cb(err, user);
if (err) {
$rootScope.$broadcast("angularFireAuth:error", err);
} else if (user) {
this._authenticated = true;
this._redirectTo = $route.current.pathTo;
self._loggedIn(user)
} else {
this._authenticated = false;
self._loggedOut();
}
});
this._authClient = client;
},

This sorts out the problem with the endless loop. The only issue that remains is under the condition when a user is already logged in (there is a valid user object) and we navigate to /login. The page will stay at /login as opposed to loading the right partial. This is because above I have used the $route.current.pathTo option.

I will have a think how this last case could be covered. If there are any questions, please first refer to the stackoverflow post, if you are still stuck, do let me know.

Hey @anantn !

Yesterday I saw your talk on realtime apps with angular and firebase. So first of all, your firebase stuff is pretty neat! However I took a look at this repository and was wondering, if this is really the repo where you guys develop on. Since I can't find any build process files (for grunt e.g.), files for linting and all this stuff which is actually must-have in such a project.

How about adding a proper build process to represent a developers workflow with all the great tools we have? I use a lot of them in angular-translate, maybe this is interesting for you. Would love to help out, if I can!

Cheers!

From: http://stackoverflow.com/questions/16159576/im-convinced-that-ref-auth-is-bugged

"If you want to see the bugs in AngularFire, change priority of items. Then you'll see AngularFire unable to correctly move the items in the collection"

Awesome project! Wasn't able to find an icon or logo for the project so I threw this together for your consideration :-)

The function should be placed inside the factory of angularFire.

is it possible to use option 2 explicit sync and on callback calling some function first before binding the data?

'$scope.items = angularFire(url, $scope, 'items', []);

$scope.items initially points to an unfulfilled promise. When data is available, the on('value') handler is fired causing a rewrite of the field by the new value (angularFire.js:64). Thus the reference to the promise is lost, making it a target for the garbage collection. That might cause unexpected behavior in the longer term :/
A simple solution is to separate the promise from the actual data:

$scope.items = []
var itemsPromise = angularFire(url, $scope, 'items', []);

But this leave another issue: Promises can only be resolve once. Thus, instead of relying on Angular templates support for $q Promises, the code updates $scope['item'] itself and all the Promises code is actually useless but the first time (actually not even as the field is overwritten before the resolve).

All in all there seem to be a mismatch between the Promise semantic (one-shot) and the streaming nature of Firebase. FRP (Bacon, Flapjax...) events streams/property might be more adapted.

Currently, you can break the application by replacing the todos array with something else.

For instance, typing this into the console:

angular.element(document.getElementById("new-todo")).scope().$apply(function(scope) { scope.todos = {length: 0}; });

If you could actually replace de push function on the object, this would be a full blown XSS.

Just a tip :)

James Talmage posted to the firebase-talk list:

1. Use the simple name/desc list app from the docs (see attached).
2. Add a bunch of items to the list.
3. Delete them one by one in forge (using the shift key and deleting as rapidly as I can).

Deleting bottom to top (in forge) seems to work fine.

Deleting top to bottom causes angular to not update some of the array elements (seemingly randomly).

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

myApp.controller('MyCtrl', ['$scope', 'angularFireCollection',
    function MyCtrl($scope, angularFireCollection) {
        $scope.items = angularFireCollection("https://angularfire-sync-problem.firebaseio.com/items");

        $scope.addItem = function(item){
            $scope.items.add({name:item.name,desc:item.desc},function(){});
            item.name = "";
            item.desc = "";
        }
    }
]);

I'm getting this when I have a single item nested in Firebase. Ideally I'd like to be able to handle it as an object array with only one item in it as I'm expecting further items to be added in the future.

I experimented with the angularFireCollection object but it lacks promises and I seem to have issues iterating over it using underscore methods, however I have not dug into this too deeply yet (in the examples, it looks like a for..in should work ok for this).

I have other collections which seem to behave fine although I notice a few null items coming back in my arrays.

We use angular.copy in angularFire but not angularFireCollection - we should do so to get rid of keys like $$hashKey.

It would be cool if angularFire were added to the bower registry so that it could easily be installed as a component, for example, when using Yeoman to create angular projects.

You can install angular-firebase using bower already, which I might opt to use instead since it can be easily added when scaffolding a project with yeoman so that my app will have its modules already available upon installing the deps..

I see that offline support was 'not yet' in February: http://stackoverflow.com/questions/14670394/does-firebase-allow-an-app-to-start-in-offline-mode

I created some simple offline support for now, but I'd really like firebase to handle this. Is this still on it's way?

Mkkl.

PS! Doing a Spotify app btw, seems to work as expected so far.

I'm reporting unexpected behavior from my application using http://[redacted]

My "broadcast" messages are pushed correctly, and received by everybody
listening on them. But when a new connected client try to get latest
inserted messages, they aren't received.

I'm using the same code since the end of april and worked

I've debugged my application and found the cause of the problem (I'm using
angularFire):

var fbMessages = fb.child('broadcast');
$scope.messages = angularFireCollection(fbMessages.limit(50));

If I remove the call to the limit function all works fine...

I'm not sure if this is not the right way to go about it, but I would like to establish a binding with an object -- the following works if I were to replace the object with an array

var promise = angularFire(url, $scope, 'objs');

promise.then = function() {
  $scope.objs = {a:1, b:3}
}

Here:

https://github.com/firebase/angularFire/blob/gh-pages/angularFire.js#L202

It would be great if you could do something like this:

var test = $scope.items.add(new_item);
alert(test.name());

It appears that angularFire does not push updates to Firebase if the data is not modified from a method on $scope. I think this has to do with $apply not being called. For example, take this code.

app.controller('Home', ['$scope', 'angularFire',
function Home($scope, angularFire) {
    var url = 'https://<firebase>.firebaseio.com/';

    var promise = angularFire(url + '/items', $scope, 'items', []);

    promise.then(function() {
      // This new entry shows in rendered template, but doesn't push to firebase
      $scope.items.push({name: "Firebase", desc: "is awesome!"});

      $scope.removeItem = function() {
        $scope.items.splice($scope.toRemove, 1);
        $scope.toRemove = null;
      };
    });
}
])

As far as I know, this isn't really a bug as much as an issue with how Angular is setup and how I'm using it. From what I've read, when modifying data outside of the typical angular "loop" we need to call $apply for the changes to be reflected. This happens, for example, when changing data on $scope through dev tools. I think that is what is happening here. Since data isn't typically modified at this time, $apply is not called. When I call $apply manually or trigger it with a click, then the updates are stored as expected.

I don't believe this is a bug as much as misuse of angular on my part, but regardless it is an issue which I suggest be addressed in the docs as to avoid further confusion for others!

After the AngularJS meetup I talked to the core team about how my empty arrays were not being saved to the server.

The issue with this is that, lets say we have a shopping cart app.

1. I create a new list, which contains a 'name' property and an 'items' array property
2. Someone closes the window without creating any items
3. Someone reopens the page, the list is restored, but now I have to check if the 'items' property exists before I start pushing to it.

It's fairly negligible check theoretically, but it would be nice if this would be handled a bit better.

Trying to toggle a firebase model on/off doesn't quite work. It will sporadically fail to engage in 2-way syncing if the target scope variable already exists.

demo: http://jsfiddle.net/ItsLeeOwen/QAVv4/embedded/result/

angularFire should fire a "beforeLogout" event before calling unauth.

It should also provide a method to dispose all references and listeners (probably right on the collection object that gets added to $scope), calling off() internally to remove the references so they don't generate security errors.

Tying changes to authentication to a $scope variable requires a $scope.$apply call everytime there is a change. We should consider automatically wrapping this, though this will mean we will have to create a proxy Firebase object to wrap the one provided by firebase.js.

Tried adding query options. Here's a crude example for angularFireCollection

    var collectionRef = new Firebase(collectionUrl);
    collectionRef = collectionRef.startAt(priority,name);

After doing this realized that the object returned to collectionRef is not the same as in the first statement because it does not have a push method. What would be the easiest way to add query functionality?

Thanks to your tremendous work, storing data and synchronizing clients state become a joy.
I am more than happy delegating to you the complexity of hosting and scaling the infrastructure :)
Coupled with AngularJS magic, frontend development become a very DRY and declarative experience. Bliss...

Still I need some help to make it perfect, I hope this is the right channel to ask.
The model I am working with is deeply nested, a single Angular controller exposes the data root to the template using the implicit binding. Several levels of ng-repeat display the whole hierarchy.

Whenever a new entity is added to a collection deep inside, the whole data is invalidated/refreshed, triggering a complete rerender.
It works, but causes a delay and some user-visible glitches. Ideally, only the template scoped by the modified subtree should rerender.

Is there a way to achieve this result in the current state of the bindings? Or should I wait for the more fine-grained use of the child_remove/added events instead of 'value' as seen in the comments of the script ?

Thanks again!