在angularjs应用程序中重复调用firebase的地方在哪里？ [英] Where to put duplicate calls to firebase in angularjs app?

问题描述

我需要在每个控制器中从firebase获得一组 products ，如果我不必每次都进行API调用，那将是理想的选择。什么是最好的方式来实现这个angularfire库？

https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray

现在我有（在coffeescript中）：

$ p $ app $ angular_module'EApp' ，['ui.router'，'firebase']

app.config（$ stateProvider，$ urlRouterProvider） - >

$ stateProvider
.state'catalog'，
url：'/ catalog'
templateUrl：'partials / catalog.html'
controller：' catalogCtrl'
.state'product'，
url：'/ product /：id'
templateUrl：'partials / product.html'
控制器：'productCtrl'

$ urlRouterProvider.otherwise'catalog'
return

app.controller'catalogCtrl'，（$ scope，$ rootScope，$ firebase） - >
ref = new Firebase（https://my-url.firebaseIO.com/）
$ scope.products = $ firebase（ref）。$ asArray（）
return

app.controller'productCtrl'，（$ scope，$ rootScope，$ stateParams，$ firebase） - >
ref = new Firebase（https://my-url.firebaseIO.com/）
$ scope.products = $ firebase（ref）。$ asArray（）
return

是否有任何方法可以将2个控制器中的通用代码分解并设置个产品在 $ rootScope （或类似的）级别，以便我可以做一个 _。find in productCtrl 一旦产品已经被返回了？


解决方案


$ $ $ $ $ $ $ $ app.constant（'FBURL'， https://my-url.firebaseio.com/）;
app.factory（'products'，function（$ firebase，FBURL）{
var ref = new Firebase（FBURL）;
var products = $ firebase（ref）。$ asArray（） ;
返回产品;
}


而不是（或除了） $ firebase ：

  app。控制器'catalogCtrl'，（$ scope，products） - > 
 $ scope.products =产品
返回
  

在我的战壕应用程序中，我使用这种方法来设置这个微不足道的服务包装 $ firebaseSimpleLogin ：

  app.factory（'$ firebaseAuth' （$ firebase，$ firebaseSimpleLogin，FBURL）{
 var auth = $ firebaseSimpleLogin（new Firebase（FBURL））; 
 return auth; 
}）; 
  

取决于当前的URL /路由（simpli

  app.factory（'board'，function（$ firebase， $ firebaseAuth，FBURL，$ routeParams）{
 var ref = new Firebase（FBURL +boards /+ $ routeParams.boardId）; 
 var cards = $ firebase（ref.child（'cards'））。$ asArray（）; 
 return {
 ref：ref，
 id：$ routeParams.boardId，$ b $ cards：cards，
} 
}）; 
  

I need to get a set of products from firebase in every controller, and it would be ideal if I don't have to make an API call every single time. What is the best way to achieve this with the angularfire library?

https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray

Right now I have (in coffeescript):

app = angular.module 'EApp', ['ui.router', 'firebase']

app.config ($stateProvider, $urlRouterProvider) ->

  $stateProvider
    .state 'catalog',
      url: '/catalog'
      templateUrl: 'partials/catalog.html'
      controller: 'catalogCtrl'
    .state 'product',
      url: '/product/:id'
      templateUrl: 'partials/product.html'
      controller: 'productCtrl'

  $urlRouterProvider.otherwise 'catalog'
  return

app.controller 'catalogCtrl', ($scope, $rootScope, $firebase) ->
  ref = new Firebase("https://my-url.firebaseIO.com/")
  $scope.products = $firebase(ref).$asArray()
  return

app.controller 'productCtrl', ($scope, $rootScope, $stateParams, $firebase) ->
  ref = new Firebase("https://my-url.firebaseIO.com/")
  $scope.products = $firebase(ref).$asArray()
  return

Is there any way to factor out the common code in the 2 controllers and set products at the $rootScope (or similar) level such that I can do a _.find in productCtrl once the products have been returned?

解决方案

As @tymeJV says in his comment, I'd indeed set up a service for the array:

app.constant('FBURL', "https://my-url.firebaseio.com/");
app.factory('products', function($firebase, FBURL) {
    var ref = new Firebase(FBURL);  
    var products = $firebase(ref).$asArray();
    return products;
}

And then simply inject that into your controllers instead of (or in addition to) $firebase:

app.controller 'catalogCtrl', ($scope, products) ->
    $scope.products = products
    return

In my trenches app I've used this approach to set up this trivial service wrapping $firebaseSimpleLogin:

app.factory('$firebaseAuth', function($firebase, $firebaseSimpleLogin, FBURL) {
    var auth = $firebaseSimpleLogin(new Firebase(FBURL));
    return auth;
});

And a somewhat less trivial service that depends on the current URL/route (simplified snippet below, "full" code is on github):

app.factory('board', function($firebase, $firebaseAuth, FBURL, $routeParams) {
    var ref = new Firebase(FBURL+"boards/"+$routeParams.boardId);    
    var cards = $firebase(ref.child('cards')).$asArray();    
    return {
        ref: ref,
        id: $routeParams.boardId,
        cards: cards,
    }
});

这篇关于在angularjs应用程序中重复调用firebase的地方在哪里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！