Search code examples
javascriptangularjsyeomanyeoman-generator-angular

Error: [ng:areq] Argument is not a function, got undefined, on thinkster.io's tutorial


[Update] It was a stupid typo on my part. Thank you dfsq!

There is a similar question here on SO, and my code follows the recommended answer, so please do not mark this as a duplicate.

In my localhost I get the following error: Error: [ng:areq] Argument 'PostCtrl' is not a function, got undefined

Contents of app.js:

/* global app:true */
/* exported app */
'use strict';

var app = angular
  .module('redjsApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'firebase'
  ])
  .constant('FIREBASE_URL', 'https://blazing-fire-6602.firebaseio.com/')
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/posts.html',
        controller: 'PostCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Contents of scripts/services/post.js:

'use strict';

app.factory('Post', function ($firebase, FIREBASE_URL) {
  var ref = new Firebase(FIREBASE_URL + 'posts');
  var posts = $firebase(ref.child('posts')).$asArray();
  console.log($firebase(ref.child('posts')).$asArray());

  var Post = {
    all: posts,
    create: function (post) {
      return posts.$add(post);
    },
    get: function (postId) {
      return $firebase(ref.child('posts').child(postId)).$asObject();
    },
    delete: function (post) {
      return posts.$remove(post);
    }
  };

  return Post;

});

Contents of scripts/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 (post) {
    Post.delete(post);
  };

});

Contents of posts.html are :

<div ng-repeat="post in posts">
  <a ng-href="{{ post.url }}">{{ post.title }}</a>
  <a ng-click="deletePost(post)">delete</a>
</div>
</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>
Posts: {{ posts}} <br />
Post: {{post}}

Only the html is rendered, none of the associated js is rendered.The app was scaffolded using yeoman. Help would be appreciated!


Solution

  • Your controller name has a typo:

    app.controller('PostsCtrl', ...
    

    while in the route it's

    controller: 'PostCtrl'