TypeScript / AngularJS - 使用 ngResource 服务

Question

我很难初始化一个新的资源对象。

从 REST 检索数据 API 工作正常。

以下代码行引发错误：

var newRoom = new this.lobbyStorage.LobbyRoom();

带有以下消息：

"this.$ngResource is not a function"

我一直在尝试很多事情，但没有一个让我得到积极的结果。

解决方案

Functions created with the syntax new Function(...) or just Function(...) have their name property set to an empty string. In the following examples anonymous functions are created, so name returns an empty string:

You cannot change the name of a function, this property is read-only:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name

大堂-storage.ts

module lobby.services {
  export class LobbyStorage {

    private baseUrl : string = 'http://localhost:2999'; /*this.appConstant.baseUrl + '/lobby';*/

    public static $inject = [
      '$http',
      '$resource'
    ];

    constructor(private $http: ng.IHttpService, private $ngResource : ng.resource.IResourceService /*,private appConstant*/) {

    }

    public LobbyRoom() : ng.resource.IResourceClass<ng.resource.IResource<any>> {
      return this.$ngResource(this.baseUrl + '/lobby/:id', { id: '@id' });
    }
  }
}

大堂-modules.ts

///<reference path='../../typings/tsd.d.ts' />
module lobby {
  'use strict';

  /* @ngdoc object
   * @name lobby
   * @description
   *
   */
  angular
    .module('lobby', [
      'ngRoute',
      'ngResource'
    ])
    .service('lobbyStorage', lobby.services.LobbyStorage)
  /* .constant('appConstant', lobby.constants.Constants.Default);*/
}

大堂-controller.ts

/// <reference path='../_lobby.ts' />

module lobby.controllers {
  'use strict';

  class LobbyCtrl {

    public lobbyData : Array<string>;
    public gameCreation : boolean = true;
    public currentItem : any = {};

    // $inject annotation.
    // It provides $injector with information about dependencies to be injected into constructor
    // it is better to have it close to the constructor, because the parameters must match in count and type.
    // See http://docs.angularjs.org/guide/di
    public static $inject = [
      '$scope',
      '$log',
      'lobbyStorage'
    ];

    // dependencies are injected via AngularJS $injector
    constructor(private $scope, private $log : ng.ILogService, private lobbyStorage) {
      this.init();
    }

    // Initializer function
    private init(){
      this.initializeLobbyData();
    }

    public createRoom() : void{
      var newRoom = new this.lobbyStorage.LobbyRoom();
      newRoom.name = this.currentItem.name;
      newRoom.$save();
    }

    public initializeLobbyData(){
      var res = this.lobbyStorage.LobbyRoom().query(
        () => this.lobbyData = res,
        () => this.lobbyData[0] = "Error"
      );
    }
  }


  /**
  * @ngdoc object
  * @name lobby.controller:LobbyCtrl
  *
  * @description
  *
  */
  angular
    .module('lobby')
    .controller('LobbyCtrl', LobbyCtrl);
}

Answer 1

当您使用 'new' 调用 LobbyRoom 时，您正在创建一个新对象。 'this' LobbyRoom 使用的是您正在创建的新对象，不会引用 class。你应该做两件事中的任何一件。创建一个 LobbyRoom class 或在不使用 'new' 的情况下调用 LobbyRoom，如下所示：

var newRoom = this.lobbyStorage.LobbyRoom();

Answer 2

这里的重点是我们调用的是函数而不是构造函数

// wrong
// this is not constructor call
var newRoom = new this.lobbyStorage.LobbyRoom()

// ok
// just a method
var newRoom = this.lobbyStorage.LobbyRoom()

有个broken example（直接点击运行）

var x = new lobby.services.LobbyStorage({}, (str) => {return str});

try {
  var y = new x.LobbyRoom();
}
catch (ex){
  alert(ex);    
}

如果我们不将其称为构造函数，而是作为方法 - 它会起作用：

var x = new lobby.services.LobbyStorage({}, (str) => {return str});

var y =  x.LobbyRoom();

alert(y);

检查 version here

TypeScript / AngularJS - 使用 ngResource 服务

TypeScript / AngularJS - Using ngResource Service

angularjs

typescript

ngresource

angularjs-ng-resource

解决方案

大堂-storage.ts

大堂-modules.ts

大堂-controller.ts