<commit_before>---
layout: post
title:  "How to build the nested $http service"
date:   2017-01-15 10:38:01 -0500
---


In my final project, I built a todo list app which has the nested $http service. I stuck with writing codes for it, so I'd like to write about my sticking points.



![](http://i.imgur.com/nc1Tuu7.gif)



I had built the Dashboard page using $http service. $http service is the low level so I had to implement Read, Create,  and Delete actions by myself. 


*TodoListService.js*
```

'use strict';

// $q : A service that helps you run functions asynchronously,
// and use their return values (or exceptions) when they are done processing.

angular
  .module('todoApp')
  .factory('TodoListService', ['$http', '$q', function($http, $q){

    return {

      getAllTodoLists: function(){
        return $http.get('/api/todo_lists/')
                    .then(function(response){
                      return response.data;
                    },
                    function(errorResponse){
                      console.error('Error while getting lists');
                      return $q.reject(errorResponse);
                    });
      },

      findTodoList: function(id){
        return $http.get('/api/todo_lists/'+id)
                    .then(function(response){
                      return response.data;
                    },
                    function(errorResponse){
                      console.error('Error while finding list');
                      return $q.reject(errorResponse);
                    });
      },

      createTodoList: function(list){
        return $http.post('/api/todo_lists/', list)<commit_msg>Updating my blog post.<commit_after>---
layout: post
title:  "How to build the nested $http service"
date:   2017-01-15 10:38:01 -0500
---


In my final project, I built a todo list app which has the nested $http service. I stuck with writing codes for it, so I'd like to write about my sticking points.



![](http://i.imgur.com/nc1Tuu7.gif)



I had built the Dashboard page using $http service. $http service is the low level so I had to implement Read, Create,  and Delete actions by myself. 

*$q : A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.


*TodoListService.js*
```

'use strict';

angular
  .module('todoApp')
  .factory('TodoListService', ['$http', '$q', function($http, $q){

    return {

      getAllTodoLists: function(){
        return $http.get('/api/todo_lists/')
                    .then(function(response){
                      return response.data;
                    },
                    function(errorResponse){
                      console.error('Error while getting lists');
                      return $q.reject(errorResponse);
                    });
      },

      findTodoList: function(id){
        return $http.get('/api/todo_lists/'+id)
                    .then(function(response){
                      return response.data;
                    },
                    function(errorResponse){
                      console.error('Error while finding list');
                      return $q.reject(errorResponse);
                    });
      },

      createTodoList: function(list){
        return $http.post('/api/todo_lists/', list)
{'fraction_non_alphanumeric': 0.11131167268351384, 'fraction_numerical': 0.012033694344163659, 'mean_word_length': 1.898866608544028, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4440521', 'n_tokens_mistral': 937, 'n_tokens_neox': 851, 'n_words': 282}