angularjs - $on('value...) gives me "undefined is not a function" in angularfire -



angularjs - $on('value...) gives me "undefined is not a function" in angularfire -

i have started utilize angularjs , next tutorial angularjs angularfire. in tutorial there section larn how utilize child_added

angular.module('firebaseapp').service('messageservice', function(fburl, $q, $firebase) { var messageref = new firebase(fburl).child('messages'); var firemessage = $firebase(messageref).$asarray(); homecoming { childadded: function childadded(limitnumber, cb) { firemessage.$on('child_added', function(snapshot){ console.log(snapshot); var val = snapshot.val(); cb.call(this,{ user: val.user, text: val.text, name: snapshot.name() }); }); },

and main controller :

messageservice.childadded(5, function(addedchild){ $timeout(function() { $scope.messages.push(addedchild); }); });

when utilize code, chrome developer tools giving error :

typeerror: undefined not function

adressing .$on in messageservice , .childadded in controller.

this video tutorial , can see him working this. checked many answers not find way. best shot guess different versions of angularjs , angularfire. did not help me either. can help me solve it?

thank in advance.

i thought i'd offer bit of clarity on topic taking tutorial on tutsplus. first, should pay attending versions of firebase , angularfire using, compared instructor using. might seem obvious, there many out there fail realize it. whenever watching tutorial, should check version of bundle using. world of software moves fast, , up-to-date tutorials luxury.

pay attending bower.json file in project. note version of next lines: "firebase": "~2.0.4", "angularfire": "~0.9.0"

you can see here version of dependencies used. chances are, me, , version differ find in teacher's version. instructor offers source files on course of study main page. download files, should titled sourcefiles_rtwebappangularfirebase.zip. 1 time downloaded, open it, , see list of packaged zip files contained in file called firebase source. find lesson-16-angularfire.zip, , open it. folder titled "firebase" should provided, , there find instructor's app created during tutorial. check out bower.json file, , check against have. according found, both versions of firebase , angularfire vastly different. means 1 thing: have reading do.

go here , check out releases of angularfire: https://github.com/firebase/angularfire/releases

scroll down, , read release notes of v0.8.0. of import note found here.

$on() , $off() no longer exist. similar functionality can obtained $watch() should discouraged trying manually manage server events (manipulation should done info transformations through $extendfactory() instead).

obviously now, understand can't follow blindly in instructor's footsteps. have seek mimicking app's functionality. reading posted above, can utilize $watch obtain similar functionality. however, tried create work, , functionality $watch delivers not functionality trying achieve. ideally, should synchronize our empty messages array $scope.messages $firebase(messageref).$asarray(). wouldn't fun though.

the route took this: looked @ cb.call() doing, following

messageservice.childadded(function(addedchild) { $scope.messages.push(addedchild); });

this phone call function pushes object created cherry picked values obtained snapshot returned 'child_added' event. real leverage here snapshot, provided $firebase module firebase.on(). if read docs "child_added" event, says

this event triggered 1 time each initial kid @ location, , triggered 1 time again every time new kid added. datasnapshot passed callback reflect info relevant child

the datasnapshot returned every "initial" kid @ location, populates list of messages. means can alter this:

firemessage.$on('child_added', function(snapshot){ console.log(snapshot); var val = snapshot.val(); cb.call(this,{ user: val.user, text: val.text, name: snapshot.name() }); });

back this:

messageref.on('child_added', function(snapshot) { var val = snapshot.val(); cb.call(this, user: val.user, text: val.text, name: snapshot.key() }); });

the messages should populate 1 time again on front end page. code should stable plenty follow instructor during remainder of refactor lesson.

angularjs angularfire

Comments

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -