标签: angularfire

在angularFire示例中,它显示了如何从firebase获取对象集合.

app.controller('ctrl', ['$scope', '$timeout', 'angularFireCollection',
  function($scope, $timeout, angularFireCollection) {    
    var url = 'https://ex.firebaseio.com/stuff';
    $scope.col = angularFireCollection(url);
  }
]);

那只是一个对象呢？

我试过这样的事情:

  fb.child('stuff/'+id).on('value', function(snapshot) {
    $scope.obj = snapshot.val();
    console.log('hey got the value')
    console.log(snapshot.val())
  });

似乎没有用.控制台正确输出对象值,但控制器不更新.

在AngularJS中处理Firebase的最佳方式肯定必须来自服务,因此它可供整个应用程序中的所有控制器使用.

我只是无法让它工作!...我第一次尝试使用angularFire(new Firebase(url)),希望我可以绑定到服务的范围,但Angular抱怨它不能$watch.

所以我尝试使用angularFireCollection,如下所示:

app.factory('myService', function myService(angularFireCollection) {
    var url = 'https://myfirebase.firebaseio.com';
    return {
        getAll: function(path) {
            var ref = angularFireCollection(new Firebase(url + '/' + path));
            console.log(ref);
            return ref;
        },
        ...
    };
});

但是,angularFireCollection是一个包含大量方法等的Object,如果我将它绑定到控制器$ scope我只是得到垃圾.它还抱怨它在我尝试使用之前无法调用Firebase功能(例如Error: Firebase.push failed: second argument must be a valid function.)......任何人都有任何想法我会出错？

看到这个PLUNKER

我现在已经玩过这个了,但是无法理解它:

(使用角度1.2.2,angularFire 0.5.0和最新的ng-grid)

所以我有一个firebase,我正在使用angularFire将我的数据提取到ng-grid组件中,如下所示:

//First I go get my data, in this case something called 'grades' from ..../db/grades
    var promise = angularFire(new Firebase($scope.fireBaseUrl), $scope, 'grades');
//When they're fetched I start up a watcher
    promise.then(function(grades) {
    startWatchGrade($scope, filterFilter, appSettings);
});

//Then I bind that grades as a datasource to my ng-grid
$scope.gridOptions = { 
data: 'grades',
enableCellSelection: false,
enableRowSelection: true,
etc....,

效果很好,我已经完成了控制,将新项目添加到"成绩"(推送)和删除项目(拼接),所有内容都很好地反映到ng-grid.像这样:

//Adding new like this is ok
$scope.grades.push({some-new-data-here});

//Deleting old like this is ok
$scope.grades.splice(row.rowIndex, 1);

但是这种方法会自动生成基于int的火钥匙,这些火钥匙在修改时会一直变化,所以我想控制钥匙,所以我改变了添加要使用的项目:

var fbRef = …

我正在使用Angular与UI路由器和Firebase.在一个页面上有两种形式的两种形式:联系表格和信用卡表格.

当用户点击提交时,信用卡信息将提交给Stripe.然后,只有在信用卡交易成功完成后,才会将联系表单提交给Firebase.以下代码适用于开发.但是当代码缩小时,联系表单永远不会被提交.

对我做错了什么的想法？

联系表格控制器:

.controller('ContactFormCtrl', ['$scope', 'Contacts', 'serviceB',  function ($scope, Contacts, serviceB) {
  var contactForm = this;
  var stripeDone = serviceB.get();
  contactForm.contact = {};
  contactForm.contacts = Contacts;

  $scope.$watch(serviceB.get, function(stripeDone) {
    if (stripeDone === 'yes') {
      console.log(contactForm.contact);
      Contacts.$add(contactForm.contact)
 } else {
      console.log('Card not charged');
       }
 }])

信用卡表格控制器:

.controller('PaymentFormCtrl', ['$scope', '$http', 'serviceB', function ($scope, $http, serviceB) {

    $scope.handleStripe = function (status, response) {

    var stripeDone='yes';

        return $http.post(http://localhost:9000/api/payments, JSON.stringify(response))
       .then(function() {
         serviceB.set(stripeDone);console.log('serviceB set now',stripeDone);})
       .then(function() {$scope.payment={};
       })
       .then(function() {$state.go('thankyou');})
}]);

ServiceB服务:

(function() { …

我正在尝试将firebase连接到John Papa的angular2英雄之旅教程,我无法弄清楚如何去做.

我试着遵循和执行他的angular2例如jeffbcross 这里,但我不能完全得到它的工作.我正在尝试创建一个简单的angular2和firebase一起玩的例子,如果它包含OAuth,它会非常酷.有谁知道如何挂钩或有这个回购？

在尝试使用jeffbcross的例子之后,我被困在这里:github.com/LukeSchlangen/heroesOfFirebase我无法获得所有引用和导入工作.具体来说,import * as Firebase from 'firebase';会继续显示我有'firebase'未定义,这是有道理的,因为我从未导出它,但我不知道在哪里导出它.

(如果它有帮助,我使用的是Visual Studio Code,确切的错误是"找不到模块'firebase'")

我需要apiKey到firebase应用程序.

在文档中,示例是:

var config = {
      apiKey: '<your-api-key>',
      authDomain: '<your-auth-domain>',
      databaseURL: 'https://tecki.firebaseio.com/',
      storageBucket: '<your-storage-bucket>'
    };
firebase.initializeApp(config);

并查看控制台,文档,而不是在哪里找到它.

我想将 angular Universal 集成到我的项目中，并使用 AngularFire 库。但是当我通过运行 npm run build && npm run serve:ssr 在本地测试我的应用程序时。

我有这个错误

  webpack:///./dist/server/main.js?:95613
                throw err;
                ^

    Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto'
        at Object.openSync (fs.js:440:3)
        at Object.readFileSync (fs.js:342:35)
        at fetch (webpack:///./dist/server/main.js?:95679:34)
        at Root.load (webpack:///./dist/server/main.js?:95713:13)
        at Root.loadSync (webpack:///./dist/server/main.js?:95754:17)
        at Object.loadSync (webpack:///./dist/server/main.js?:133270:17)
        at Object.8ZNE (webpack:///./dist/server/main.js?:98662:37)
        at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
        at Object.BYZf (webpack:///./dist/server/main.js?:104679:19)
        at __webpack_require__ (webpack:///./dist/server/main.js?:20:30) {
      errno: -2,
      syscall: 'open',
      code: 'ENOENT',

  path: 'google/protobuf/api.proto'

我已经将 firebase JS SDK 从 v7 升级到 v8.0.0，我正在像这样导入 firebase。

import * as firebase from 'firebase';

访问以下任何一项都会导致以下错误。

firebase.firestore.FieldValue.serverTimestamp()
firebase.User
firebase.auth.UserCredential

在“firebase”中找不到导出“firestore”（导入为“firebase”）属性“firestore”在类型“typeof import("appPath/node_modules/firebase/index")”上不存在

我通过将 firebase 更改为 firebase.default 找到了一种解决方法，例如

firebase.default.firestore.FieldValue.serverTimestamp()

这是解决此问题的正确方法吗？

编辑：我也在项目中使用 AngularFire。我尝试使用：

import firebase from 'firebase/app';
import 'firebase/firestore';
export const firestore = firebase.firestore();

但这给了我以下错误：

未捕获的 FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - 调用 Firebase App.initializeApp() (app/no-app)。

我在另一个 NPM 包中有一个 NPM 包。子包有一些代码，例如import { range } from 'iter-tools'. 即使子 package.json 不依赖于iter-tools，我也没有收到任何类型的 Typescript 编译错误。据推测，这是因为模块解析器 / tsc 正在走到父node_modules文件夹以查找依赖项并在那里找到它。我不希望这种情况发生。我想得到一个错误，我忘记将其包含iter-tools在本地子项的依赖项列表中。换句话说，我希望子包在某种程度上是独立的。我不知道如何实现这一点。我做了很多谷歌搜索，发现了类似的问题，但找不到答案。有什么我需要添加tsconfig.json或package.json？

这个问题的背景是我有一个 Angular + Firebase 存储库。服务器部分之一是 Firebase 云功能 - FCF。这生活在一个functions具有自己的 package.json 的文件夹中，并且这是 Angular CLI 设置的项目的子文件夹。我在部署 FCF 时遇到了麻烦，除非它所需的所有代码都包含在 FCF 文件夹中。如果在更高级别的 node_modules 文件夹（例如 Angular 根目录中）中获取某些代码和类型定义，则部署将无法进行。如果我忘记在 FCF 的 package.json 中包含依赖项，我会收到编译错误。相反，我没有收到任何编译错误，只有部署错误。

我的项目还有一个本地 NPM 包，其中包含在客户端和服务器之间共享的代码，我想确保该包是独立的 - 不依赖于父文件夹中的 package.json 文件。

有没有办法从firebase获取随机记录,如下所示:

{
  "-JbmopNnshefBT2nS2S7" : {
    "dislike" : 0,
    "like" : 0,
    "post" : "First post."
  },
  "-JbmoudijnJjDBSXNQ8_" : {
    "dislike" : 0,
    "like" : 0,
    "post" : "Second post."
  }
}

我使用此代码来解决问题,但它下载了所有记录,因此如果DB更大,我的应用程序将非常慢:

HTML代码:

    <div ng-controller="RandomCtrl">{{RandomPost.post}}</div>

JS代码:

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

app.controller('RandomCtrl', function($scope, $firebase){
    var ref = new Firebase("https://ind.firebaseio.com/");
    var sync=$firebase(ref);

    $scope.messages = sync.$asArray();

    $scope.GetRandomPost=function(){
        return $scope.RandomPost=$scope.messages[Math.floor(Math.random()*$scope.messages.length)];
    };

    $scope.GetRandomPost();    

});