4
AngularJS를 사용하여 Firebase에 내 데이터를 저장하고 검색하려고합니다. 나는 지금까지 이오니아 탭 프로젝트를 구축하고 사용자 정의 컨트롤러 및 사용자 정의 공장을 만들었습니다. 저는 공장에서 데이터를 검색하고 컨트롤러를 통해 데이터를 처리하는 것이 관례임을 이해합니다. 그러나, 나는 내 다음 코드는 작동하지 않는 이유를 이해하지 않습니다AngularJS 팩토리의 Firebase에서 데이터 가져 오기 및 가져 오기
services.js
angular.module('starter.services', ['firebase'])
.factory('OtherFriends', ['$firebase', function ($firebase) {
var ref = new Firebase("https://example1234.firebaseio.com/friendlist");
var sync = $firebase(ref);
var otherfriends = sync.$asArray();
return {
all: function() {
return otherfriends;
},
get: function(friendId) {
// Simple index lookup
return otherfriends[friendId];
}
}
}])
controllers.js
angular.module('starter.controllers', [])
// OTHER CONTROLLERS
.controller('OtherFriendsCtrl', function($scope, OtherFriends) {
$scope.otherfriends = OtherFriends.all();
})
탭 otherfriends.html
<ion-view title="OtherFriends">
<ion-content>
<ion-list>
<ion-item ng-repeat="otherfriend in otherfriends" type="item-text-wrap" href="#/tab/otherfriend/{{otherfriend.id}}">
{{otherfriend.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
는
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])
// OTHER STANDARD IONIC CODE
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.otherfriends', {
url: '/otherfriends',
views: {
'tab-otherfriends': {
templateUrl: 'templates/tab-otherfriends.html',
controller: 'OtherFriendsCtrl'
}
}
})
// OTHER TABS
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
index.html을
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- firebase (loaded after ionic bundle) -->
<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
Back
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
을 app.js 그리고 Firebase.io (수입 .JSON 파일)의 데이터 :
{"friendlist":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
"작동하지 않습니다". 무슨 일이 일어날 지 구체적으로 설명해 줄 수 있습니까? 데이터가 표시되지 않습니까? 오류 메시지가 나타 납니까? 'OtherFriends.all()'함수에 이미 중단 점을 설정 했습니까? 그리고 그것이 촉발 되나요? –
OtherFriends가'return $ firebase (ref). $ asArray()'대신에이 어색한 all/get 래퍼 객체를 반환하는 이유는 무엇입니까? synchronized 배열은 이미'$ getRecord' 메쏘드를 가지고 있으므로'get' 메쏘드가 불필요합니다.'all'은 배열을 반환하기 때문에 동위 원소가됩니다. – Kato