Laravel 4
とAngular JS
を備えたRESTful
アプリケーションがあります。
私のLaravelコントローラーでは、
public function index() {
$careers = Career::paginate( $limit = 10 );
return Response::json(array(
'status' => 'success',
'message' => 'Careers successfully loaded!',
'careers' => $careers->toArray()),
200
);
}
そしてangularスクリプト、
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();
};
}
ここでは、スコープ変数に割り当てる応答データを処理するのに少し混乱していますが、[]
に空の配列$scope.careers
があります。また、成功とエラーを処理して、次の通常の$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 = [];
});
};
$ resourceを使用してコンソールで私のリクエストを参照してください。
これを試して:
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
});
参照: 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);
};
この癖やその他の煩わしさのために、デフォルトの$ resourceの代わりに Restangular を使用することをお勧めします。それは人生をはるかに楽にします