Why I keep getting TypeError setting property of undefined in angularJS?

Question

I'm writing a microblog app to teach myself angularJS.

Now an annoying problem is that I'm so messed up with service, factory and provider. After searching for the differences between them I choose service to fullfill the part of making post in my app.

But then I keep getting the error: TypeError: Cannot set property 'get' of undefined

My service code looks like:

angular.module('mblogApp.services',[]).
  service('Posts', function(){
    var posts = [];

    this.prototype.get = function(){return posts};

    this.prototype.push = function(user, text){
          var post = {
               user: user,
               text: text,
               time: Date.now()
          };

          posts.push(post);
     };
});

And in my controller I wrote something like:

angular.module('mblogApp.controllers').
  controller('makePostCtrl', ['Posts', function($scope, Posts){
    posts.push($scope.user, $scope.text);
  }]).
  controller('showPostCtrl', ['Posts', function($scope, Posts){
    $scope.posts = Posts.get();
  }
]);

Any good practice are appreciated. :).

The problem sucks me so hard.I'm really tired of it.Tried to make it simple to find out where the error comes from and rewrite my code into a html file as follow:

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>Angular Service Demo</title>
  <script type="text/javascript" src="angular/angular.js"></script>
</head>
<body>
  <div ng-controller="makePostCtrl">
    <label for="name">Name: </label>
    <input type="text" ng-model="name">
    <br>
    <label for="text">Text: </label>
    <input type="text" ng-model="text">
    <br>
    <button ng-click="post()">post</button>
  </div>

  <div ng-controller="showPostCtrl">
    <ul>
      <li ng-repeat="post in posts">
        <p>Name: {{post.name}}</p>
        <p>Text: {{post.text}}</p>
      </li>
    </ul>
  </div>
</body>
<script type="text/javascript">
var app = angular.module('app', []);

app.service('posts', function(){
  this.posts = function(){
    var posts = [];
    return {
      get: function(){return posts},
      push: function(user, text){
        posts.push({
          user: user,
          text: text
        });
      }
    };
  };
});

app.controller('makePostCtrl    ', ['posts',function($scope, posts){
  $scope.post = function(){
    posts.push($scope.user, $scope.text);
  };

  $scope.posts = posts.get();
}]);

app.controller('showPostCtrl')
</script>
</html>

and the error goes like:

TypeError: Cannot call method 'get' of undefined

zs2020 · Accepted Answer · 2013-08-29 14:40:43Z

1

Change the service code to:

app.service('posts', function () {
    var posts = [];
    return {
        get: function () {
            return posts
        },
        push: function (user, text) {
            posts.push({
                user: user,
                text: text
            });
        }
    };
});

And the module are injected in order, you missed '$scope' so the module injection doesn't match.

app.controller('makePostCtrl', ['$scope', 'posts', function ($scope, posts) {

edited Aug 29, 2013 at 14:40

answered Aug 27, 2013 at 4:02

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edward G. Over a year ago

I try to declare the controllers and services in the same file but still got the same error.

Chandermani · Accepted Answer · 2013-08-27 04:32:17Z

0

I believe you are missing dependency inject for your service. Try this

angular.module('mblogApp.controllers',['mblogApp.services']).

edited Aug 27, 2013 at 4:32

answered Aug 27, 2013 at 3:26

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

1 Comment

Chandermani Over a year ago

@EdwardG. there was a typo. Can you check now.

BKM · Accepted Answer · 2013-08-29 05:29:58Z

0

Try this code.

In your service make change like this;

angular.module('mblogApp'). service('Posts', function(){

  var post_values = [];
return {
  get : function(){
            return post_values
             },

   push : function(user, text){
      var post = {
          user: user,
          text: text,
          time: Date.now()
      };

      post_values.push(post);
  }
};
});

And your controller;

    var app = angular.module('mblogApp');

    app.controller('makePostCtrl', ['Posts', function ($scope, Posts) {
        Posts.push($scope.user, $scope.text);
    });
   app.controller('showPostCtrl', ['Posts', function ($scope, Posts) {
        $scope.posts = Posts.get();
    });

edited Aug 29, 2013 at 5:29

answered Aug 27, 2013 at 4:28

BKM

7,0797 gold badges32 silver badges47 bronze badges

5 Comments

Edward G. Over a year ago

Following you suggestion doesn't solve my problem.And I think that the way you suggest me is the right way since I find that the code of service goes in the same way as yours in [link](h ttp://jsfiddle.net/manishchhabra/Ne5P8/) .

BKM Over a year ago

Edited my answer. Please check it out.

Edward G. Over a year ago

tried, but still getting the same error:Cannot call the method 'get' of undefined @BKM

Edward G. Over a year ago

I correct it and rewrite it into a html file like i just post in the question and the type error still there

BKM Over a year ago

Try it now. I changed the variable name from posts to post_values.

Collectives™ on Stack Overflow

Why I keep getting TypeError setting property of undefined in angularJS?

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related