angularJS에서 firebase의 응답을 기다리는 중

Question

나는 firebase을 처음 사용하기 때문에 새로운 콘솔을 사용하여 firebase 실시간 데이터베이스에서 데이터를 저장하고 검색하는 방법을 간단하게 보여줍니다. 데이터를 검색 할 때이를 모델에 연결하여 목록 형식으로 화면에 표시합니다. 그러나 화면에는 아무 것도 표시되지 않습니다. firebase 데이터베이스에서 데이터를 가져올 때까지 기다릴 것을 약속드립니다.

app.factory('Authentication', ['$rootScope', function($rootScope) { 
return { 
    getUsers: function() { 
     firebase.database().ref('/userInfo').on('value', function (snapshot) { 
      return snapshot.val(); 
     }); 
    } 
    } 
} 

데이터를 가져올 때까지 기다릴 수있는 방법은 무엇입니까?

app.controller('myController', function($scope, $rootScope, Authentication) { 
    $scope.userData = Authentication.getUsers(); 
} 

Answer 1

먼저 Q를 설치하거나 다운로드 'q'

3을 추가하는 등 앱 모듈에 스크립트

1) npm install q --save

2) 추가이 추가)에 질문을 추가해야합니다 당신의 공장 및 사용 허가자

app.factory('Authentication', ['$rootScope','q', function($rootScope, q) { 
return { 
    getUsers: function() { 
     var defer = q.defer(); 
     firebase.database().ref('/userInfo').on('value', function (snapshot) { //assuming you get snapshot value from the db 
      defer.resolve(snapshot.val()); 
      //return snapshot.val(); 
     }); 
    return defer.promise; 
    } 
    } 
} 

4) 당신은 또한 ERR를 반환하고 당신이 당신이 여기에 코드의 다른 기능에

예를 들어

app.factory('Authentication', ['$rootScope','q', function($rootScope, q) { 
return { 
    getUsers: function() { 
     var defer = q.defer(); 
     firebase.database().ref('/userInfo').on('value', function (snapshot) { 
      if(!snapshot.val()){ 
       defer.reject('err no data'); 
      }else{ 
       defer.resolve(snapshot.val()); 
       //return snapshot.val(); 
      } 
     }); 
    return defer.promise; 
    } 
    } 
} 

그것을 잡아하고 연기의 .reject을 추가 할 수 있습니다

app.controller('myController', function($scope, $rootScope, Authentication) { 
    Authentication.getUsers().then(function(snap){ 
     $scope.userData = snap; 
    }); 
} 

함수에 다음 추가

app.controller('myController', function($scope, $rootScope, Authentication) { 
    Authentication.getUsers().then(function(snap){ 
     $scope.userData = snap; 
    }, function(err){ 
     //do something with the error 
    }); 
} 

는

도움 희망

참고

js는 비동기입니다. 그래서 우리가 응답을 기다릴 필요가있을 때, 시간이 걸릴 것입니다. js는 그의 일을 계속합니다. 그래서 우리는 그가 다음 단계로 가기 전에 그 응답을 확실히 할 수있는 약속이 필요합니다. (그가 우리가 가기를 원합니다)

Javascript와 AngularJS 세계에서 약속하는 것은 우리가 미래의 어떤 시점에서의 행동; 는

promise

그것이 당신 때문에 화면에 아무것도 표시되지 않는

Answer 2

Use AngularFire

을 hepled 희망이 기사를 읽고 해결 이잖아 더 많은 정보를 원하시면

거부 비동기 함수에서 복귀하려고합니다.

또한 Angular는 더티 검사 시스템을 사용하여 값이 변경된 시점을 알리고 화면을 다시 렌더링합니다. Firebase 라이브러리 자체만으로는이 더러운 검사 시스템을 트리거 할 수 없습니다. 이것이 공식적으로 지원되는 AngularFire 라이브러리를 사용해야하는 이유입니다.

// Initialize Firebase 
var config = { 
    apiKey: "<your-api-key>", 
    authDomain: "<your-auth-domain>", 
    databaseURL: "https://<your-database-url>.firebaseio.com", 
    storageBucket: "", 
}; 
firebase.initializeApp(config); 
angular.module('app', ['firebase']) 
    .constant('FirebaseUrl', config.databaseURL) 
    .controller('MyCtrl', MyController) 
    .config(function($firebaseRefProvider, FirebaseUrl) { 
    $firebaseRefProvider.registerUrl(FirebaseUrl); 
    }); 

function MyController($scope, $firebaseRef, $firebaseArray) { 
    var usersRef = $firebaseRef.child('userInfo'); 
    $scope.users = $firebaseArray(usersRef); 
}