与AngularJS网站示例项目火力地堡API问题 [英] Firebase API issue with AngularJS website example project
问题描述
开始潜入AngularJS让我去他们的网站,但被困在线了其中,角使用火力地堡后端部分。
:第一个问题,从依赖的顺序来 angular.module('项目',['ngRoute','火力'])
改成
angular.module('项目',['火力','ngRoute'])
但现在它告诉我说 $添加
,在我的 $ scope.save
通话,是不确定的。
类似 $添加未定义
的问题是<一个href=\"http://stackoverflow.com/questions/26435066/angularfire-add-typeerror-undefined-is-not-a-function\">here和<一个href=\"http://stackoverflow.com/questions/18864017/undefined-is-not-a-function-error-using-angularfire\">here,但也似乎适用。
注:我运行节点的 HTTP服务器
,所以我假设它不是一个本地主机问题
脚本
angular.module('项目',['火力','ngRoute']).value的('fbURL','https://unique-url-yay.firebaseio.com/')
。服务('fbRef',函数(fbURL){
返回新的火力地堡(fbURL)
})
。服务('fbAuth',函数($ Q $火力点,$ firebaseAuth,fbRef){
VAR权威性;
返回功能(){
如果(AUTH)返回$ q.when(AUTH);
VAR authObj = $ firebaseAuth(fbRef);
如果(authObj。$ getAuth()){
返回$ q.when(AUTH = authObj $ getAuth());
}
变种推迟= $ q.defer();
authObj。$ authAnonymously()。然后(功能(的authData){
AUTH =的authData;
deferred.resolve(的authData);
});
返回deferred.promise;
}
})。服务('项目',函数($ Q $火力点,fbRef,fbAuth){
VAR自我=这一点;
this.fetch =功能(){
如果(this.projects)返回$ q.when(this.projects);
返回fbAuth()。然后(功能(AUTH){
变种推迟= $ q.defer();
VAR REF = fbRef.child('项目/+ auth.auth.uid);
变量$项目= $火力点(REF);
ref.on('值',函数(快照){
如果(snapshot.val()=== NULL){
$ $项目集(window.projectsArray)。
}
self.projects = $ $项目asArray()。
deferred.resolve(self.projects);
});
返回deferred.promise;
});
};
})的.config(函数($ routeProvider){
$ routeProvider
。什么时候('/', {
控制器:'的ListCtrl',
templateUrl:list.html',
解析:{
项目:功能(项目){
返回Projects.fetch();
}
}
})
。当('/编辑/:专案编号',{
控制器:'EditCtrl',
templateUrl:detail.html
})
。当('/新',{
控制器:'CreateCtrl',
templateUrl:detail.html
})
。除此以外({
redirectTo:'/'
});
}).controller('的ListCtrl',函数($范围,项目){
$ scope.projects =项目;
}).controller('CreateCtrl',函数($范围,$位置,项目){
$ scope.save =功能(){
Projects.projects。$加($ scope.project)。然后(功能(数据){
$ location.path('/');
});
};
}).controller('EditCtrl',
功能($范围,$位置$ routeParams,项目){
VAR专案编号= $ routeParams.projectId,
projectIndex; $ scope.projects = Projects.projects;
projectIndex = $ scope.projects $ indexFor(专案编号)。
$ scope.project = $ scope.projects [projectIndex] $ scope.destroy =功能(){
$ scope.projects。$删除($ scope.project)。然后(功能(数据){
$ location.path('/');
});
}; $ scope.save =功能(){
$ scope.projects。$保存($ scope.project)。然后(功能(数据){
$ location.path('/');
});
};
});
的index.html
&LT;!DOCTYPE HTML&GT;
&LT; HTML和GT;
&LT; HEAD&GT;
&LT;标题&GT;&角LT; /标题&GT;
&所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js&GT;&下; /脚本&GT;
&所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js&GT;
&LT; / SCRIPT&GT;
&所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js&GT;
&LT; / SCRIPT&GT;
&所述; SCRIPT SRC =https://cdn.firebase.com/js/client/2.0.4/firebase.js&GT;&下; /脚本&GT;
&所述; SCRIPT SRC =https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js&GT;&下; /脚本&GT;
&LT;脚本SRC =scripts.js中类型=文/ JavaScript的&GT;&LT; / SCRIPT&GT;
&LT;链接HREF =https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css的rel =stylesheet属性&GT;
&LT; /头&GT;
&LT;车身风格=填充:20像素;&GT;
&LT; DIV NG-应用=项目级=NG-范围&GT;&LT; / DIV&GT;
&LT; DIV NG-视图&gt;&LT; / DIV&GT;
&LT; /身体GT;
&LT; / HTML&GT;
好吧,几件事是怎么回事:
建议
-
AngularFire被更新为 1.1.1 一>和
$火力
现在是很precated。使用$ firebaseObject
和$ firebaseArray
来代替。 -
有没有必要做的所有的东西在你的
项目
服务和回报的承诺。$ firebaseObject
和$ firebaseArray
回报的承诺。
示例
看看这个 PLNKR 。我在呈现一个工作是什么,你的版本正在尝试完成的任务。
- 它绑在我的公开火力地堡实例之一。
- 您可以创建一个新的数据块,看看它的主页上。
JavaScript的:
(函数(角){
angular.module('项目',['火力','ngRoute'])
.value的('fbURL','https://sb-plnkr.firebaseio.com/so:28942661') 。服务('fbRef',函数(fbURL){
返回新的火力地堡(fbURL)
}) 。服务('fbAuth',函数($ Q $ firebaseAuth,fbRef){
VAR权威性;
返回功能(){
如果(AUTH)返回$ q.when(AUTH);
VAR authObj = $ firebaseAuth(fbRef);
如果(authObj。$ getAuth()){
返回$ q.when(AUTH = authObj $ getAuth());
}
变种推迟= $ q.defer();
authObj。$ authAnonymously()。然后(功能(的authData){
AUTH =的authData;
deferred.resolve(的authData);
});
返回deferred.promise;
}
}) 。服务('项目',函数($ Q $ firebaseArray,fbRef){
this.sync = $ firebaseArray(fbRef);
this.sync。$()加载,然后(功能(数据){
VAR项目=数据;
});
返回this.sync;
}) .controller('的ListCtrl',函数($范围,$位置,项目){
项目。$()加载,然后(功能(数据){
$ scope.projects =数据;
});
}) .controller('CreateCtrl',函数($范围,$位置,项目){
的console.log(CreateCtrl);
$ scope.save =功能(){
console.debug(添加);
如果($ scope.project&放大器;&安培; $ scope.project.content ==''!){
项目。$加($ scope.project)。然后(功能(REF){
的console.log(补充参考,参考);
$ location.path('/');
})赶上(功能(errorObject){
console.error(errorObject);
});
}其他{
警报(你必须输入一些东西。);
}
};
}) .controller('EditCtrl',函数($范围,$位置$ routeParams,项目){
VAR专案编号= $ routeParams.projectId,
projectIndex; $ scope.init =功能(){
项目。$()加载,然后(功能(数据){
$ scope.projects =数据;
console.info(EditCtrl - 项目$()加载:数据);
projectIndex = $ scope.projects $ indexFor(专案编号)。
$ scope.project = $ scope.projects [projectIndex]
});
} $ scope.destroy =功能(){
$ scope.projects。$删除($ scope.project)。然后(功能(数据){
$ location.path('/');
});
}; $ scope.save =功能(){
$ scope.projects。$保存($ scope.project)。然后(功能(数据){
$ location.path('/');
});
};
}) 的.config(函数($ routeProvider,$ locationProvider){
$ routeProvider
。什么时候('/', {
控制器:'的ListCtrl',
templateUrl:list.html
})
。当('/编辑/:专案编号',{
控制器:'EditCtrl',
templateUrl:detail.html
})
。当('/新',{
控制器:'CreateCtrl',
templateUrl:create.html上
})
。除此以外({
redirectTo:'/'
}); $ locationProvider.html5Mode(真);
});
})(window.angular);
HTML
(的index.html)
&LT;车身风格=填充:20像素;&GT;
&LT; DIV NG-应用=项目NG控制器=EditCtrl&GT;
&LT; A HREF =新&gt;全新&LT; / A&GT;
&LT; DIV NG-视图&gt;&LT; / DIV&GT;
&LT; / DIV&GT;
&LT; /身体GT;
(create.html上)
&LT; H2&GT;创建&LT; / H&GT;
&LT;按钮NG点击=保存()&GT;保存&LT; /按钮&GT;
(list.html)
&LT; H2&GT;列表与LT; / H&GT;
&LT; DIV NG重复=(键,数据)项目&GT;
&LT;跨度&GT; $ scope.projects [&LT;跨度NG绑定=键&GT;&LT; / SPAN&GT;]内容:&LT; / SPAN&GT;
&LT;跨度NG绑定=data.content&GT;&LT; / SPAN&GT;
&LT; / DIV&GT;
&LT; H2&GT;对象调试和LT; / H&GT;
&LT; pre NG绑定=工程| JSON&GT;&LT; / pre&GT;
希望帮助!
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网站示例项目火力地堡API问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!