Hacker News .hnnew | past | comments | ask | show | jobs | submitlogin

Hey Kevin, this isn't about directives but about RESTful services and $resource. I started learning how to use AngularJS yesterday and all of the examples that I've found on it are confusing to me and seem to do it in different ways.

I've seen somebody do it by calling myModule.factory. I've seen an example on Stackoverflow that says all you need to do is something like var Todo = $resource('/api/1/todo/:id');. I'm not sure where I'm supposed to put this code. I want to be able to use the resource globally but I don't have access to $resource in the global namespace.

All I'm trying to do is make a simple blog that can interact with my backend. If you have this part of the book written I'd love to read it right now.

EDIT: I figured out how to do it I think. But I'd still love a more complete introduction to using Angular with a RESTful service.



Personally I found using $http less restrictive - there seem to be some edge cases where $resource behaves oddly. Ideally what you should be doing with REST calls is pushing them out to Angular Services (http://docs.angularjs.org/guide/dev_guide.services.creating_...) rather than making them directly in your controller.

Here's a simple example:

  appServices.factory('Thing', function($http) {

    var Thing = function(data) {
      angular.extend(this, data);
    }

    Thing.all = function() {
      return $http.get('/things).then(function(response) {
        return new Thing(response.data);
      });
    }

    Thing.get = function(id) {
      return $http.get('/things/' + id).then(function(response) {
        return new Thing(response.data);
      });
    }

    Thing.delete = function(id) {
      return $http.delete('/things/' + id).then(function(response) {
        return new Thing(response.data);
      });
    }

    Thing.create = function(data) {
      return $http.post('/things', data).then(function(response) {
        return new Thing(response.data);
      });
    }

    Thing.update = function(data, id) {
      return $http.put('/things/' + id, data).then(function(response) {
        return new Thing(response.data);
      });
    }

    return Thing;
  });
In your controller, inject the service:

  function thingCtrl($scope, Thing) {
    Thing.all().then(function(data) {
      $scope.things = data;
    });
  }
  thingCtrl.$inject = ['$scope', 'Thing'];


Another nice feature of angular is that templates are promise-aware. So the following controller is equivalent for most purposes:

    function thingCtrl($scope, Thing) {
      $scope.things = Thing.all()
    }
    thingCtrl.$inject = ['$scope', 'Thing'];


I have not gotten to that part yet but will perhaps notify you when I get around to it.

Angular made a tutorial video on building a Twitter search app that may be helpful: https://www.youtube.com/watch?v=IRelx4-ISbs




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: