Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I have a RESTful application with Laravel 4 and Angular JS.

In my Laravel Controller,

public function index() {

  $careers = Career::paginate( $limit = 10 );

  return Response::json(array(
    'status'  => 'success',
    'message' => 'Careers successfully loaded!',
    'careers' => $careers->toArray()),
    200
  );
}

And the angular script,

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

app.factory('Data', function(){
    return {
        root_path: "<?php echo Request::root(); ?>/"
    };
});

app.factory( 'Career', [ '$resource', 'Data', function( $resource, Data ) {
   return $resource( Data.root_path + 'api/v1/careers/:id', { id: '@id'});
}]);

function CareerCtrl($scope, $http, Data, Career) {

    $scope.init = function () {
        $scope.careers = Career.query(); 
    };
}

Here I am little confused to handle the response data to assign to scope variable, now I am getting empty array [] in $scope.careers. And also How can I handle success and error to show some messages like the following normal $http service,

$scope.init = function () {

    Data.showLoading(); // loading progress
    $http({method: 'GET', url: Data.root_path + 'api/v1/careers'}).
    success(function(data, status, headers, config) {
        Data.hideLoading();
        $scope.careers = data.careers.data;
    }).
    error(function(data, status, headers, config) {

        if(data.error.hasOwnProperty('message')) {
            errorNotification(data.error.message); 
        } else {
            errorNotification();
        }

        $scope.careers = [];
    });
};

See my request in console using $resource.

enter image description here

share|improve this question

2 Answers

up vote 1 down vote accepted

Try this:

app.factory( 'Career', [ '$resource', 'Data', function( $resource, Data ) {
   return $resource( Data.root_path + 'api/v1/careers/:id', { id: '@id'}, {
    query: {
        isArray: false,
        method: 'GET'
    }
   });
}]);


Career.query(function(res) {
   $scope.careers = res.careers.data;
}, function(error) {
  // Error handler code
});
share|improve this answer
 
Thanks, you saved my time... –  devo Nov 5 at 7:17
up vote 1 down vote

See: http://docs.angularjs.org/api/ngResource.$resource

$scope.init = function () {
    var success = function(careerList, getResponseHeaders){
      $scope.careers = careerList;
    };
    var failure = function(data){
      // TODO
    };
    Career.query(success, failure); 
};

Due to this quirks and other annoyances I would suggest to use Restangular instead of the default $resource . It makes life much easier

share|improve this answer
 
My first question, Why I am getting empty array [] in $scope.careers ? –  devo Nov 1 at 4:27
 
Not sure, It might be the default when the failure occurs ... –  fabrizioM Nov 1 at 17:44
 
It's not failure.see the screen-shot, I am getting all values, how can I map this to scope variable? –  devo Nov 1 at 17:53
 
do you get that screenshot with the $resource call or with the $http call ? Also try the new code edited. You get the data on the callback and that might be ran after the query function returns. –  fabrizioM Nov 1 at 17:58
 
The screen-shot is from $resource, and using your code also I am getting same and $scope.careers as undefined –  devo Nov 2 at 2:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.