【问题标题】:How to structure creating/updating data in Angular project with Firebase如何使用 Firebase 在 Angular 项目中构建/更新数据
【发布时间】:2015-12-03 08:35:22
【问题描述】:

我想知道在存储到 Firebase 时如何在 Angular 控制器中构建实际的推送和更新方法。现在我认为有很多重复的代码和糟糕的结构。它看起来像这样:

app.controller( "myController", [ "$scope", "$routeParams", function( $scope, $routeParams ) {
    $scope.id = $routeParams.id;
    $scope.save = function() {
        if( $scope.id ) {
            // Update
        }
        else {
            // Save
        }
    }
} ] );

update 和 save 之间的唯一区别是使用 Firebase 存储数据的方法(推送/更新)。否则存储的对象几乎相同,并且回调的处理方式相同。这给出了很多重复的代码。我将如何以一种好的方式来构建它以防止重复代码?

【问题讨论】:

    标签: javascript angularjs firebase angularfire angular-routing


    【解决方案1】:

    Use AngularFire.

    AngularFire 是 AngularJS 官方支持的 Firebase 绑定。它具有帮助同步收集和身份验证的服务。

    AngularFire 真正可以帮助您的是通过路由器中的resolve 对象将同步集合注入控制器。

    angular.module('app', ['firebase', 'ngRoute'])
      .config(ApplicationConfig)
      .constant('FirebaseUrl', '<my-firebase-app')
      .service('rootRef', ['FirebaseUrl', Firebase])
      .factory('itemFactory', ItemFactory)
      .controller('MyCtrl', MyCtrl);
    
    function ApplicationConfig($routerProvider) {
      $routeProvider.when('/', {
        templateUrl: 'book.html',
        controller: 'BookController',
        resolve: {
          item: function(itemFactory, $routeParams) {
             // return a promise
             // the resolved data is injected into the controller
             return itemFactory($routeParams.id).$loaded();
          }
        }
      });
    }
    
    function ItemFactory(rootRef, $firebaseObject) {
       function ItemFactory(id) {
         var itemRef = rootRef.child('list').child(id);
         return $firebaseObject(itemRef);
       }
    }
    
    function MyCtrl($scope, item) {
       $scope.item = item;
    
       // now you can modify $scope.item and then call $scope.$save()
       // no need to worry whether it's an update or save, no worrying
       // about callbacks or other async data flow      
    }
    

    【讨论】:

      【解决方案2】:

      可能是这样的

      //根据您的评论编辑答案

      app.controller( "myController", [ "$scope", "$routeParams", function( $scope, $routeParams ) {
          $scope.id = $routeParams.id;
          $scope.save = function() {
      
              //  https://www.firebase.com/docs/web/api/firebase/update.html
              // message when the data has finished synchronizing.
              var onComplete = function(error) {
                if (error) {
                  console.log('Synchronization failed');
                } else {
                  console.log('Synchronization succeeded');
                }
              };
      
      
      
              var fb = new Firebase( "URL" ); 
              if( $scope.id ) {
                  // Update
                  fb.update( { DATA }, onComplete  ); 
              }else{
                  fb.push( { DATA }, onComplete  ); 
              }
      
      
          }
      } ] );
      

      【讨论】:

      • 感谢您的输入,但这与 Firebase 没有太大关系。这是在 Firebase 中存储数据的方法: var fb = new Firebase( "URL" ); fb.push( { DATA }, function() { // 回调 } );或 fb.update( { DATA }, function() { // 回调 } );我正在考虑为此使用策略模式。有什么建议吗?
      • 我编辑我的答案,查看回调函数示例的 firebug 文档
      • 似乎是一个有效的答案。我想把它移到工厂并让它处理它: StorageFactory( "URL" ).save( { DATA }, function() { // callback } );这可能行得通。
      • 确实没有必要使用onComplete 回调。本地 firebase 更新首先触发,这给人一种活泼的感觉,服务器回调稍后发生。因此,如果您收听回调,它可能最终会变慢。你也应该考虑使用 AngularFire 来简化你的控制器代码。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多