CODEWITHSUNDEEP
javascriptangularjs
JohnDizzle
JohnDizzle

Reputation: 1348

Issues with AngularJS Service

I´m currently starting to learn Angular.JS and worked with a few tutorials like this this one. I followed the Steps but tryed to improve the code by saving single parts like controllers or services in seperate .js files because I heared this is a good habit. That was no problem and all worked fine. But when I came up with the Service which provides my posts I also tried to write some sort of API in the Service because i learned in another tutorial to do so.

There comes the Problem: The API to get my list of posts is working fine but if I try to send data due to an addPost function to the API it doesn´t work at all.

So can you maybe help me to find out what the problem is because I want to implement a Backend to the post-Service later on and want all $http requests at one place.

EDIT

The code-sample below is running now and you can see the problem if you try to add a post. The code stops after/during the addPost() function in the MainCtrl because the "clearing" of the HTML-form isn´t happening.

here you can find my code: 

var app = angular.module('flapperNews', []);

app.controller('MainCtrl', function($scope, postService){
    $scope.test = "Hello, World!";

    $scope.posts = postService.getPosts();

    $scope.addPost = function(){
        if(!$scope.title || $scope.title === '') { return; }

        postService.addPost({title: $scope.title, link: $scope.link, upvotes: 0});  
        //This code above was my try ith the API in posts.js

        // $scope.posts.push({
        //    title: $scope.title,
        //    link: $scope.link,    // this whole part is from the tutorial and works fine
        //    upvotes: 0
        //});

        $scope.title = '';
        $scope.link = '';
    };

    $scope.incrementUpvotes = function(post) {
        post.upvotes += 1;
    };
});

app.factory('postService', function() {
    var srv = {};

    srv._posts = [
        {title: 'post 1', link: '', upvotes: 5},
        {title: 'post 2', link: '', upvotes: 2},
        {title: 'post 3', link: '', upvotes: 15},
        {title: 'post 4', link: '', upvotes: 9},
        {title: 'post 5', link: '', upvotes: 4}
    ];

    srv.getPosts = function() {
        return angular.copy(srv._posts);
    };

    srv.addPost = function(post) { //function to put the new Post in the Array
        srv._posts.push(post);
    };

    return {
        getPosts: function() {
            return srv.getPosts();
        },
        addPost: function(post) { //the public API to put the post in the Array
            srv.addPost(post);
        }
    };
});
<!DOCTYPE html>
<html>
<head>
	<meta charset="Utf-8">
	<title>FlapperNews</title>
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
	<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews" ng-controller="MainCtrl">

	<div class="row">
    <div class="col-md-6 col-md-offset-3">

      <div class="page-header">
        <h1>Flapper News</h1>
      </div>

      <div ng-repeat="post in posts | orderBy:'-upvotes'">
        <span class="glyphicon glyphicon-thumbs-up"
          ng-click="incrementUpvotes(post)"></span>
        {{post.upvotes}}
        <span style="font-size:20px; margin-left:10px;">
          <a ng-show="post.link" href="{{post.link}}">
            {{post.title}}
          </a>
          <span ng-hide="post.link">
            {{post.title}}
          </span>
        </span>
      </div>

      <form ng-submit="addPost()"
        style="margin-top:30px;">
        <h3>Add a new post</h3>

        <div class="form-group">
          <input type="text"
            class="form-control"
            placeholder="Title"
            ng-model="title"></input>
        </div>
        <div class="form-group">
          <input type="text"
          class="form-control"
          placeholder="Link"
          ng-model="link"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
      </form>

    </div>
  </div>
	<!-- Scripts -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script src=scripts/app.js></script>
	<script src=scripts/controller/main.js></script>
	<script src=scripts/service/posts.js></script>

</body>
</html>

Upvotes: 0

Views: 67

Answers (1)

AlainIb
AlainIb

Reputation: 4728

Once you push the data to the service you should update $scope.posts

$scope.addPost = function(){
    if(!$scope.title || $scope.title === '') { return; }

   postService.addPost({title: $scope.title, link: scope.link, upvotes: 0});  
   $scope.posts = postService.getPosts(); 

   // or edit postService.addPost so you can make 
  /* $scope.posts = postService.addPost({title: $scope.title, link: scope.link, upvotes: 0});  */


    $scope.title = '';
    $scope.link = '';

};

Upvotes: 1

Related Questions