AngularJS 网站示例项目的 Firebase API 问题 [英] Firebase API issue with AngularJS website example project
问题描述
开始深入研究 AngularJS 所以我去了他们的网站,但被困在 wireAngular 使用 Firebase 的后端部分.第一个问题来自依赖的排序:
angular.module('project', ['ngRoute', 'firebase'])
改为
angular.module('project', ['firebase', 'ngRoute'])
但现在它告诉我 $add
在我的 $scope.save
调用中是未定义的.
类似的 $add undefined
问题是 这里和这里,但似乎都没有申请.
注意:我正在运行节点的 http-server
,所以我假设它不是本地主机问题.
脚本
angular.module('project', ['firebase', 'ngRoute']).value('fbURL', 'https://unique-url-yay.firebaseio.com/').service('fbRef', 函数(fbURL) {返回新的 Firebase(fbURL)}).service('fbAuth', function($q, $firebase, $firebaseAuth, fbRef) {变量身份验证;返回函数(){if (auth) 返回 $q.when(auth);var authObj = $firebaseAuth(fbRef);如果 (authObj.$getAuth()) {返回 $q.when(auth = authObj.$getAuth());}var deferred = $q.defer();authObj.$authAnonymously().then(function(authData) {auth = authData;deferred.resolve(authData);});返回 deferred.promise;}}).service('项目', 函数($q, $firebase, fbRef, fbAuth) {var self = this;this.fetch = 函数 () {if (this.projects) 返回 $q.when(this.projects);返回 fbAuth().then(function(auth) {var deferred = $q.defer();var ref = fbRef.child('projects/' + auth.auth.uid);var $projects = $firebase(ref);ref.on('值',函数(快照){if (snapshot.val() === null) {$projects.$set(window.projectsArray);}self.projects = $projects.$asArray();deferred.resolve(self.projects);});返回 deferred.promise;});};}).config(function($routeProvider) {$routeProvider.什么时候('/', {控制器:'ListCtrl',templateUrl:'list.html',解决: {项目:功能(项目){返回 Projects.fetch();}}}).when('/edit/:projectId', {控制器:'EditCtrl',templateUrl:'detail.html'}).when('/新', {控制器:'CreateCtrl',templateUrl:'detail.html'}).除此以外({重定向到:'/'});}).controller('ListCtrl', function($scope, projects) {$scope.projects = 项目;}).controller('CreateCtrl', function($scope, $location, Projects) {$scope.save = function() {Projects.projects.$add($scope.project).then(function(data) {$location.path('/');});};}).controller('EditCtrl',功能($scope,$location,$routeParams,项目){var projectId = $routeParams.projectId,项目索引;$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
<头><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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"><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">头部><body style="padding:20px;"><div ng-app="project" class="ng-scope"></div><div ng-view></div></html>
好的,这里有一些事情:
建议
AngularFire 已更新为 1.1.1 和
$firebase
现在已弃用.使用$firebaseObject
和$firebaseArray
代替.无需在您的
Projects
服务中执行所有这些操作并返回承诺.$firebaseObject
和$firebaseArray
返回承诺.
示例
看看这个 PLNKR 我展示了你正在尝试的工作版本来完成.
- 它与我的一个公共 Firebase 实例相关联.
- 您可以创建一条新数据并在主页上查看.
JavaScript:
(function(angular) {angular.module('project', ['firebase', 'ngRoute']).value('fbURL', 'https://sb-plnkr.firebaseio.com/so:28942661').service('fbRef', 函数(fbURL) {返回新的 Firebase(fbURL)}).service('fbAuth', function($q, $firebaseAuth, fbRef) {变量身份验证;返回函数(){if (auth) 返回 $q.when(auth);var authObj = $firebaseAuth(fbRef);如果 (authObj.$getAuth()) {返回 $q.when(auth = authObj.$getAuth());}var deferred = $q.defer();authObj.$authAnonymously().then(function(authData) {auth = authData;deferred.resolve(authData);});返回 deferred.promise;}}).service('项目', 函数($q, $firebaseArray, fbRef) {this.sync = $firebaseArray(fbRef);this.sync.$loaded().then(function(data) {var 项目 = 数据;});返回 this.sync;}).controller('ListCtrl', function($scope, $location, Projects) {Projects.$loaded().then(function(data){$scope.projects = 数据;});}).controller('CreateCtrl', function($scope, $location, Projects) {console.log("CreateCtrl");$scope.save = function() {console.debug("添加");if ($scope.project && $scope.project.content !== '') {Projects.$add($scope.project).then(function(ref) {console.log("添加参考",ref);$location.path('/');}).catch(函数(errorObject){控制台错误(错误对象);});} 别的 {alert("你必须输入一些东西.");}};}).controller('EditCtrl',function($scope, $location, $routeParams, Projects) {var projectId = $routeParams.projectId,项目索引;$scope.init = function(){Projects.$loaded().then(function(data) {$scope.projects = 数据;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.什么时候('/', {控制器:'ListCtrl',templateUrl:'list.html'}).when('/edit/:projectId', {控制器:'EditCtrl',templateUrl:'detail.html'}).when('/新', {控制器:'CreateCtrl',templateUrl:'create.html'}).除此以外({重定向到:'/'});$locationProvider.html5Mode(true);});})(window.angular);
HTML:
(index.html)
<div ng-app="project" ng-controller="EditCtrl"><a href="new">New</a><div ng-view></div>
(create.html)
创建
<button ng-click="save()">保存</button>
(list.html)
列表
<div ng-repeat="(key,data) 在项目中"><span>$scope.projects[<span ng-bind="key"></span>].content : </span><span ng-bind="data.content"></span>
<h2>对象调试</h2><pre ng-bind="projects | json"></pre>
<小时>
希望有所帮助!
Beginning to dive into AngularJS so I went to their website, but got stuck on the wire up a backend portion where Angular uses Firebase. The first issue came from the ordering of dependencies:
angular.module('project', ['ngRoute', 'firebase'])
changed to
angular.module('project', ['firebase', 'ngRoute'])
But now it's telling my that $add
, in my $scope.save
call, is undefined.
Similar $add undefined
questions are here and here, but neither seem to apply.
Note: I'm running node's http-server
, so I'm assuming it's not a localhost problem.
Scripts
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>
Alright, a few things are going on here:
Suggestions
AngularFire was updated to 1.1.1 and
$firebase
is now deprecated. Use$firebaseObject
and$firebaseArray
instead.There is no need to do all that stuff in your
Projects
service and return a promise.$firebaseObject
and$firebaseArray
return promises.
Example
Check out this PLNKR I made showing a working version of what you're trying to accomplish.
- It's tied to one of my public Firebase instances.
- You can create a new piece of data and see it on the home page.
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>
(create.html)
<h2>Create</h2>
<button ng-click="save()">Save</button>
(list.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>
Hope that helps!
这篇关于AngularJS 网站示例项目的 Firebase API 问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!