Question

目前，网址localhost/view/titles将使用下面的路由，控制器和服务，服务器将返回所有标题对象的列表。如何扩展服务以允许其他查询参数，例如结果限制等？

// main app module with route
var app = angular.module('app', ['ngResource']).
    config(function ($routeProvider, $locationProvider) {
        $routeProvider.when(
            '/view/:obj/:limit',
            {
                templateUrl: '/static/templates/titles.html',
                controller: 'titlesController'
            }
        )})

// list service
var listService = app.factory('listService', function ($q, $resource) {
        return {
            getList: function (obj) {
                var deferred = $q.defer();

                $resource('/api/view/' + obj).query(
                    function (response) {
                        console.log('good')
                        deferred.resolve(response);
                    }
                    ,
                    function (response) {
                        console.log('bad ' + response.status)
                        deferred.reject(response);
                    }
                )
                return deferred.promise;
            }
        }
    }
)


// controller
var titlesController = bang.controller('titlesController', function($scope, listService, $routeParams){
    $scope.titles = listService.getList($routeParams.obj);
})

Answer 1

以下是示例代码：

angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
  return $resource('phones/:phoneId.json', {}, {
    query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
  });
});

Answer 2

对于如何使用ngResource模块使用查询字符串将params传递到后端api的问题，这是一个更广泛的答案，因为我无法在其他任何地方找到直接的指令。

ngResource设置：使用bower或npm bower install angular-resource从命令行安装ngResource包。

在index.html页面的head元素中添加angular-resource脚本

<script src="lib/angular-resource/angular-resource.min.js"></script>

js / app.js：添加依赖项。因为我使用的是ui-router这是一个单独的主题，所以我不会遗漏路线。

angular.module('app', ['app.controllers', 'app.services', 'ngResource'])

视图：templates / list.html

<input type="search" ng-model="filters.title" placeholder="Search">
<button ng-click="searchList(filters)">Submit</button>

<div ng-repeat="item in list">
  <p>{{item.title}} - {{item.description}}</p>
</div>

控制器：js / controllers.js

.controller('ListCtrl', function($scope, ListService) {
  $scope.searchList = function(filters){
    $scope.filters = { title: '' }; //This will clear the search box.
    $scope.list = ListService.query({title: filters.title});   
  }
})

工厂：js / services.js。假设您也将通过商品ID进行获取请求。如果没有遗漏/:id, {id: '@id'}

.factory('ListService', function($resource) {
  return $resource('http://localhost:3000/api/view/:id', { id: '@id' });
})

如何使用AngularJS $ resource.query传递params？

2 个答案: