大佬教程收集整理的这篇文章主要介绍了angularjs – Firebase数据归一化.我应该如何根据这个结构获取一个集合?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在这里松散地讲述了这个教程:
http://www.thinkster.io/pick/eHPCs7s87O/angularjs-tutorial-learn-to-rapidly-build-real-time-web-apps-with-firebase#item-526e9330d90f99661f00046c
并在这里阅读有关反规范化数据的文档:
https://www.firebase.com/blog/2013-04-12-denormalizing-is-normal.html
如果我想在一个页面中显示用户,然后是其所有的书籍,我该怎么办?
firebase结构
FB | --user | | | --user1 | | | --name: "test name" | --email: "test@test.com" | --books | | | "-JFZG3coHOAblHZ7XSjK": true | "-KJKJASDIUOPIWE9WEeJ": true | "-YtUTRGJLNL876F3SSwS": true | --books | --"-JFZG3coHOAblHZ7XSjK" | | | --title: "book title 1" | --ownerId: "user1" | --"-KJKJASDIUOPIWE9WEeJ" | | | --title: "book title 2" | --ownerId: "user1" | --"-YtUTRGJLNL876F3SSwS" | | | --title: "book title 2" | --ownerId: "user1"
视图
<div data-ng-controller="UsersController" data-ng-init="findOneUser()"> <h2>Profile</h2> <img class="image_preview" data-ng-src="{{user.photoUrl}}"> <p>Name: {{ user.name }}</p> <p>Name: {{ user.email }}</p> <a data-ng-href="#/users/{{ userId }}/edit">Edit</a> <h2>Coffee Blends</h2> <div data-ng-repeat="book in user.books"> <p>---</p> <p>{{user.books}}</p> </div> <!--<div data-ng-controller="BooksController" data-init="">--> <!--</div>--> </div>
调节器
'use Strict'; angular.module('ccApp.controllerS.Users',['ccApp.serviceS.Users']) .controller('UsersController',['$scope','$routeParams','$LOCATIOn','angularFire','Users',function($scope,$routeParams,$LOCATIOn,angularFire,Users){ $scope.user = {}; $scope.userId = $routeParamS.UserId; $scope.findOneUser = function(userId){ if (!!$scope.userId){ angularFire(Users.find($routeParamS.UserId),$scope,'user'); } }; $scope.updatePhotoUrl = function(url,user){ $scope.fileUrl = url; console.log($scope.fileUrl[0].url); user.photoUrl = $scope.fileUrl[0].url; }; $scope.findUsers = function(){ $scope.users = Users.collection(); }; $scope.findWholeSALErs = function(){ $scope.wholeSALErs = Users.collection(); }; }]);
服务
'use Strict'; angular.module('ccApp.serviceS.Users',['ccApp.services.firebaseRefs']) .factory('Users',['angularFireCollection','FireRef',function(angularFireCollection,FireRef){ return{ collection: function(cb){ return angularFireCollection(FireRef.users(),cb); },find: function(userId){ return FireRef.users().child('/'+userId); } }; }]);
香草火腿
我会这样做的艰难的方法,因为我认为这里有很大的价值理解这里的基本原则.这是相当复杂的,我只会涵盖必需品.还有很多小边缘的案件也被处理:
angular.module('app',[]) .controller('UsersController',$firebase,$timeout,$routeParams){ var userId = $routeParamS.UserId; $scope.user = $firebase(new Firebase('URL/user/'+userId)); // or,for 3-way binding and automatic writes BACk to Firebase var userRef = $firebase(new Firebase('URL/users/'+userId)).$bind($scope. 'user'); // grab this users' books using Firebase (the hard way) $scope.books = {}; var booksRef = new Firebase('URL/books/'); // fetch the user's book list dynamically because it may change in real-time var indexRef = new Firebase('URL/user/'+userId+'/books'); // watch the index for add events indexRef.on('child_added',function(indexSnap) { // fetch the book and put it into our list var bookId = indexSnap.name(); booksRef.child(bookId).on('value',function(bookSnap) { // trigger $digest/$apply so Angular syncs the DOM $timeout(function() { if( snap.val() === null ) { // the book was deleted delete $scope.books[bookId]; } else { $scope.books[bookId] = snap.val(); } }); }); }); // watch the index for remove events indexRef.on('child_removed',function(snap) { // trigger $digest/$apply so Angular updates the DOM $timeout(function(snap) { delete $scope.books[snap.name()]; }); }); });
然后HTML(下面的其他例子将是一样的):
<div data-ng-repeat="(bookId,book) in books"> {{BookID}}: {{Book.titlE}} </div>
这里的一些边缘案例没有完全涵盖:
>数据不按优先级排序排序
>当从索引中删除记录时,应该在数据路径上调用off()
>索引排序的变化不会改变数据记录的顺序
>索引的值不存储在任何地方以供参考(如果重要)
FirebaseIndex
FirebaseIndex是一个简单的实用程序,它采用像您的书籍列表这样的索引,并以更复杂的方式管理我们刚才创建的代码.
不幸的是,FirebaseIndex不支持值事件,所以它不能与0.5之后的angularFire一起使用,因为对angularFire的内部加载机制有所改变.所以它不像以前那么简短和甜蜜.
angular.module('app',[]) .controller('UsersController',$timeout){ var userId = $routeParamS.UserId; $scope.user = $firebase(new Firebase('URL/user/'+userId)); var fb = new Firebase(URL); var index = new FirebaseIndex( fb.child('user/'+userId+'/books') ); $scope.books = {}; // almost magic index.on('child_added',function(snap) { $timeout(function() { $scope.books[snap.name()] = snap.val(); }); }); index.on('child_removed',function(snap) { $timeout(function() { delete $scope.books[snap.name()]; }); }); });
Firebase.util.join
Firebase-util是一个功能更强大和更复杂的库,用于规范化路径.因为它返回一个像普通Firebase参考一样工作的对象,它也可以与angularFire 0.5及以上版本无缝地使用.
angular.module('app',$firebasE){ var userId = $routeParamS.UserId; $scope.user = $firebase(new Firebase('URL/user/'+userId)); var fb = new Firebase(URL); var ref = new Firebase.util.intersection( fb.child('user/'+userId+'/books'),fb.child('books') ); // magic! $scope.books = $firebase(ref); });
以上是大佬教程为你收集整理的angularjs – Firebase数据归一化.我应该如何根据这个结构获取一个集合?全部内容,希望文章能够帮你解决angularjs – Firebase数据归一化.我应该如何根据这个结构获取一个集合?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。