在Angular tutorials on their website完成工作的过程中,我在尝试创建使用Firebase存储数据的列表时遇到困难。奇怪的是,一切都在Angular网站上运行,但是当我点击“编辑我”链接时,JSFiddle中没有任何内容显示。
我对Firebase很陌生,但它们在控制台中没有任何错误。
angular.module('project', ['ngRoute', 'firebase'])
.value('fbURL', 'https://angular-project-list.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-fresh/' + 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);
});
//Remove projects list when no longer needed.
ref.onDisconnect().remove();
return deferred.promise;
});
};
})
.config(function($routeProvider) {
var resolveProjects = {
projects: function (Projects) {
return Projects.fetch();
}
};
$routeProvider
.when('/', {
controller:'ProjectListController as projectList',
templateUrl:'list.html',
resolve: resolveProjects
})
.when('/edit/:projectId', {
controller:'EditProjectController as editProject',
templateUrl:'detail.html',
resolve: resolveProjects
})
.when('/new', {
controller:'NewProjectController as editProject',
templateUrl:'detail.html',
resolve: resolveProjects
})
.otherwise({
redirectTo:'/'
});
})
.controller('ProjectListController', function(projects) {
var projectList = this;
projectList.projects = projects;
})
.controller('NewProjectController', function($location, projects) {
var editProject = this;
editProject.save = function() {
projects.$add(editProject.project).then(function(data) {
$location.path('/');
});
};
})
.controller('EditProjectController',
function($location, $routeParams, projects) {
var editProject = this;
var projectId = $routeParams.projectId,
projectIndex;
editProject.projects = projects;
projectIndex = editProject.projects.$indexFor(projectId);
editProject.project = editProject.projects[projectIndex];
editProject.destroy = function() {
editProject.projects.$remove(editProject.project).then(function(data) {
$location.path('/');
});
};
editProject.save = function() {
editProject.projects.$save(editProject.project).then(function(data) {
$location.path('/');
});
};
});
答案 0 :(得分:2)
您缺少教程中的一些数据。将其添加到脚本的开头:
window.projectsArray = [
{
"name": "AngularJS",
"site": "http://angularjs.org",
"description": "HTML enhanced for web apps!"
},
{
"name": "jQuery",
"site": "http://jquery.com/",
"description": "Write less, do more."
},
{
"name": "Backbone",
"site": "http://documentcloud.github.com/backbone/",
"description": "Models for your apps."
},
{
"name": "SproutCore",
"site": "http://sproutcore.com/",
"description": "Innovative web-apps."
},
{
"name": "Sammy",
"site": "http://sammyjs.org/",
"description": "Small with class."
},
{
"name": "Spine",
"site": "http://spinejs.com/",
"description": "Awesome MVC Apps."
},
{
"name": "Cappucino",
"site": "http://cappuccino.org/",
"description": "Objective-J."
},
{
"name": "Knockout",
"site": "http://knockoutjs.com/",
"description": "MVVM pattern."
},
{
"name": "GWT",
"site": "https://developers.google.com/web-toolkit/",
"description": "JS in Java."
},
{
"name": "Ember",
"site": "http://emberjs.com/",
"description": "Ambitious web apps."
},
{
"name": "Batman",
"site": "http://batmanjs.org/",
"description": "Quick and beautiful."
}
]