Currently working on the Angular Tutorial provided by Thinkster.io and enjoying every bit of it. However, I've hit a roadblock in Chapter 4 that seems impossible to overcome. Whenever I attempt to execute a Post or Delete action, I encounter the following error:
TypeError: undefined is not a function
at Object.Post.create (http://localhost:9000/scripts/services/post.js:12:20)
at Scope.$scope.submitPost (http://localhost:9000/scripts/controllers/posts.js:9:10)
at http://localhost:9000/bower_components/angular/angular.js:10795:21
at http://localhost:9000/bower_components/angular/angular.js:19036:17
at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12632:28)
at Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:12730:23)
at HTMLFormElement.<anonymous> (http://localhost:9000/bower_components/angular/angular.js:19035:21)
at HTMLFormElement.jQuery.event.dispatch (http://localhost:9000/bower_components/jquery/dist/jquery.js:4409:9)
at HTMLFormElement.elemData.handle (http://localhost:9000/bower_components/jquery/dist/jquery.js:4095:28)
-
Below is my implementation in app/scripts/app.js:
'use strict';
/* global app:true */
/**
* @ngdoc overview
* @name angNewsApp
* @description
* # angNewsApp
*
* Main module of the application.
*/
var app = angular.module('angNewsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'firebase'
])
.constant('FIREBASE_URL', 'https://blazing-fire-1894.firebaseio.com/');
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
-
app/services/post.js:
'use strict';
app.factory('Post',
function ($firebase, FIREBASE_URL) {
var ref = new Firebase(FIREBASE_URL + 'posts');
var posts = $firebase(ref);
var Post = {
all: posts,
create: function (post) {
return posts.$add(post);
},
find: function (postId) {
return posts.$child(postId);
},
delete: function (postId) {
return posts.$remove(postId);
}
};
return Post;
});
-
'app/scripts/controllers/posts.js':
'use strict';
app.controller('PostsCtrl', function ($scope, Post) {
$scope.posts = Post.all;
$scope.post = {url: 'http://', 'title': ''};
$scope.submitPost = function () {
Post.create($scope.post).then(function () {
$scope.post = {url: 'http://', 'title': ''};
});
};
$scope.deletePost = function (postId) {
Post.delete(postId);
};
});
-
app/views/posts.html:
<div ng-repeat='(postId, post) in posts'>
<a href='{{ post.url }}'>{{ post.title }}</a> <a ng-click="deletePost(postId)">[X]</a>
</div>
<form ng-submit='submitPost()'>
<input type='text' ng-model='post.title' />
<input type='text' ng-model='post.url' />
<input type='submit' value='Add Post' />
</form>
Preview: <a href='{{ post.url }}'>{{ post.title }}</a>
-
Included scripts in app/index.html
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/posts.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/services/post.js"></script>
<!-- endbuild -->
-
If anyone has any insights on how to resolve this issue, I would greatly appreciate your input!