Angularjs $resource如何调用多个服务

angularjs $resource how to call multiple services

本文关键字:调用 服务 resource 何调用 Angularjs      更新时间:2023-09-26

我昨天刚刚开始学习angularjs,并且已经到了教程的这一部分,这里有一个使用$resource从服务访问数据的示例。我在ASP运行这个例子。Net MVC和json文件存储位置的配置略有不同。包含手机列表的json文件和包含每个手机详细描述的一堆文件位于不同的文件夹中。现在我看到的问题是这一行:

return $resource('phones/:phoneId.json', {}, {
      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}

根据我的文件夹结构,包含电话列表的json文件可以使用我从上面修改的这一行访问

  return $resource('/MyAngularScripts/:phoneId.json.htm', {}, {
      query: { method: 'GET', params: { phoneId: 'jsonPhonedata' }, isArray: true }

我将扩展名更改为.htm,因为我不想向IIS express添加另一个处理程序。文件扩展名不是问题,因为我可以看到电话列表。现在,当我点击每个手机,我应该能够看到它的详细说明从json文件,这是另一个文件夹。文件夹为:/Content/PhoneData/{all the various phone data json files here}

目前我得到一个404没有找到,因为详细信息文件是在/Content/PhoneData/motorola-xoom-with-wi-fi.json.htm,但我击中url作为/MyAngularScripts/motorola-xoom-with-wi-fi.json.htm

我如何修改我的服务,因为它现在允许两个不同的url ?

当前服务代码:

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

获取电话列表的当前控制器代码:$scope.phones = Phone.query();

获取选定电话详细信息的当前控制器代码:

 $scope.phone = Phone.get({ phoneId: $routeParams.phoneId }, function (phone) {
      $scope.mainImageUrl = phone.images[0];
  });

如何修改控制器代码以调用服务?

可以为每个操作指定url

 return $resource(
           "/MyAngularScripts/:phoneId.json.htm",
           { Id: "@Id" },
           {
               'get':{url:'/Content/PhoneData/'+:phoneId+'json.html},
               'query' : {url:'/MyAngularScripts/jsonPhonedata.json.html'},
           }
      );