个人中心
gpt4 book ai didi

javascript - AngularJS 网站示例项目的 Firebase API 问题

转载 作者：行者123 更新时间：2023-11-30 17:00:39 25 4
gpt4 key购买 nike

开始深入研究 AngularJS，所以我访问了他们的网站，但卡在了 wire up a backend 上Angular 使用 Firebase 的部分。第一个问题来自依赖项的排序:

angular.module('project', ['ngRoute', 'firebase'])

改为

angular.module('project', ['firebase', 'ngRoute'])

但现在它告诉我 $add 在我的 $scope.save 调用中未定义。

类似的$add undefined问题是here和 here , 但似乎都不适用。

注意:我正在运行节点的 http-server，所以我假设这不是本地主机问题。

脚本

angular.module('project', ['firebase', 'ngRoute'])

.value('fbURL', 'https://unique-url-yay.firebaseio.com/')
.service('fbRef', function(fbURL) {
  return new Firebase(fbURL)
})
.service('fbAuth', function($q, $firebase, $firebaseAuth, fbRef) {
  var auth;
  return function () {
      if (auth) return $q.when(auth);
      var authObj = $firebaseAuth(fbRef);
      if (authObj.$getAuth()) {
        return $q.when(auth = authObj.$getAuth());
      }
      var deferred = $q.defer();
      authObj.$authAnonymously().then(function(authData) {
          auth = authData;
          deferred.resolve(authData);
      });
      return deferred.promise;
  }
})

.service('Projects', function($q, $firebase, fbRef, fbAuth) {
  var self = this;
  this.fetch = function () {
    if (this.projects) return $q.when(this.projects);
    return fbAuth().then(function(auth) {
      var deferred = $q.defer();
      var ref = fbRef.child('projects/' + auth.auth.uid);
      var $projects = $firebase(ref);
      ref.on('value', function(snapshot) {
        if (snapshot.val() === null) {
          $projects.$set(window.projectsArray);
        }
        self.projects = $projects.$asArray();
        deferred.resolve(self.projects);
      });
      return deferred.promise;
    });
  };
})

.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      controller:'ListCtrl',
      templateUrl:'list.html',
      resolve: {
        projects: function (Projects) {
          return Projects.fetch();
        }
      }
    })
    .when('/edit/:projectId', {
      controller:'EditCtrl',
      templateUrl:'detail.html'
    })
    .when('/new', {
      controller:'CreateCtrl',
      templateUrl:'detail.html'
    })
    .otherwise({
      redirectTo:'/'
    });
})

.controller('ListCtrl', function($scope, projects) {
  $scope.projects = projects;
})

.controller('CreateCtrl', function($scope, $location, Projects) {
  $scope.save = function() {
      Projects.projects.$add($scope.project).then(function(data) {
          $location.path('/');
      });
  };
})

.controller('EditCtrl',
  function($scope, $location, $routeParams, Projects) {
    var projectId = $routeParams.projectId,
        projectIndex;

    $scope.projects = Projects.projects;
    projectIndex = $scope.projects.$indexFor(projectId);
    $scope.project = $scope.projects[projectIndex];

    $scope.destroy = function() {
        $scope.projects.$remove($scope.project).then(function(data) {
            $location.path('/');
        });
    };

    $scope.save = function() {
        $scope.projects.$save($scope.project).then(function(data) {
           $location.path('/');
        });
    };
});

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
   </script>
    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
    <script src="scripts.js" type="text/javascript"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body style="padding:20px;">
    <div ng-app="project" class="ng-scope"></div>
      <div ng-view></div>
  </body>
</html>

最佳答案

好的，这里发生了一些事情:

建议

  1. AngularFire 已更新为 1.1.1并且 $firebase 现已弃用。使用 $firebaseObject和 $firebaseArray相反。

  2. 无需在您的 Projects 服务中执行所有这些操作并返回 promise 。 $firebaseObject 和 $firebaseArray 返回 promise 。

例子

看看这个 PLNKR我展示了您要完成的工作的工作版本。

  • 它与我的一个公共(public) Firebase 实例相关联。
  • 您可以创建一条新数据并在主页上查看它。

JavaScript:

(function(angular) {
  angular.module('project', ['firebase', 'ngRoute'])
  .value('fbURL', 'https://sb-plnkr.firebaseio.com/so:28942661')

  .service('fbRef', function(fbURL) {
    return new Firebase(fbURL)
  })

  .service('fbAuth', function($q, $firebaseAuth, fbRef) {
    var auth;
    return function () {
      if (auth) return $q.when(auth);
      var authObj = $firebaseAuth(fbRef);
      if (authObj.$getAuth()) {
        return $q.when(auth = authObj.$getAuth());
      }
      var deferred = $q.defer();
      authObj.$authAnonymously().then(function(authData) {
          auth = authData;
          deferred.resolve(authData);
      });
      return deferred.promise;
    }
  })

  .service('Projects', function($q, $firebaseArray, fbRef) {
    this.sync = $firebaseArray(fbRef);
    this.sync.$loaded().then(function(data) {
      var projects = data;
    });
    return this.sync;
  })

  .controller('ListCtrl', function($scope, $location, Projects) {
    Projects.$loaded().then(function(data){
      $scope.projects = data;
    });
  })

  .controller('CreateCtrl', function($scope, $location, Projects) {
    console.log("CreateCtrl");
    $scope.save = function() {
      console.debug("Adding");
      if ($scope.project && $scope.project.content !== '') {
        Projects.$add($scope.project).then(function(ref) {
          console.log("Added ref",ref);
          $location.path('/');
        }).catch(function(errorObject){
          console.error(errorObject);
        });
      } else {
        alert("You have to enter something.");
      }
    };
  })

  .controller('EditCtrl',function($scope, $location, $routeParams, Projects) {
    var projectId = $routeParams.projectId,
        projectIndex;

    $scope.init = function(){
      Projects.$loaded().then(function(data) {
        $scope.projects = data;
        console.info("EditCtrl - Projects.$loaded():",data);
        projectIndex = $scope.projects.$indexFor(projectId);
        $scope.project = $scope.projects[projectIndex];
      });
    }

    $scope.destroy = function() {
      $scope.projects.$remove($scope.project).then(function(data) {
        $location.path('/');
      });
    };

    $scope.save = function() {
      $scope.projects.$save($scope.project).then(function(data) {
       $location.path('/');
      });
    };
  })

  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        controller:'ListCtrl',
        templateUrl:'list.html'
      })
      .when('/edit/:projectId', {
        controller:'EditCtrl',
        templateUrl:'detail.html'
      })
      .when('/new', {
        controller:'CreateCtrl',
        templateUrl:'create.html'
      })
      .otherwise({
        redirectTo:'/'
      });

      $locationProvider.html5Mode(true);
  });
})(window.angular);

HTML:

(index.html)

<body style="padding:20px;">
  <div ng-app="project" ng-controller="EditCtrl">
    <a href="new">New</a>
    <div ng-view></div>
  </div>
</body>

(创建.html)

<h2>Create</h2>
<button ng-click="save()">Save</button>

(列表.html)

<h2>List</h2>
<div ng-repeat="(key,data) in projects">
  <span>$scope.projects[<span ng-bind="key"></span>].content : </span>
  <span ng-bind="data.content"></span>
</div>
<h2>Object Debug</h2>
<pre ng-bind="projects | json"></pre>

希望对您有所帮助!

关于javascript - AngularJS 网站示例项目的 Firebase API 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28942661/

25 4 0
文章推荐： javascript - 如果 元素有文本，则将类添加到
文章推荐： javascript - 如何使用已有的 REST API 后端在 Angular 应用程序中实现登录系统
文章推荐： javascript - 防止客户端滥用/欺骗奖励用户的重复 Ajax 调用
文章推荐： C 库从 BG 线程调用 kdb 函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com