3

此刻，urllocalhost/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);
})
4

2 回答 2

3

下面是示例代码：

angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
  return $resource('phones/:phoneId.json', {}, {
    query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
  });
});
于 2013-08-11T06:01:30.913 回答
0

这是对如何使用 ngResource 模块通过查询字符串将参数传递给后端 api 的问题的更广泛的答案，因为我在其他任何地方都找不到直接的指令。

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

在 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' });
})
于 2016-12-15T02:45:07.057 回答