Question

我有一个JS库，其中包含以下函数：

function TestService() {
}

TestService.init = function() {
 ------
}

TestService.foo = function() {
--------------
}

现在这是一个旧库，想在角度代码中使用这些函数。有没有办法我们可以把它作为服务/工厂包装起来并正确使用它？提前获得帮助。

Answer 1

如果您的课程设计为使用new进行实例化，请将其传递给.service：

app.service('testService', TestService);

Angular会在其上调用new一次以创建单身。

修改

我认为你的问题有错误，而且函数确实应该被分配给原型。

如果您只需要该功能，请使用工厂或常数返回：

app.factory('testService', function() { return TestService: });

或者：

app.constant('testService', TestService);

Answer 2

当然可以：

// trying to gimmick your library
function test() {}

test.prototype.hey = function() {
    alert('hey');
}

test.prototype.hoy = function() {
    alert('hoy');
}

app.factory('testFactory', function() {
    // that's where your using your library
    return new test();           
});

然后在控制器中使用它：

// controller function
function HelloCtrl($scope, testFactory) {
    testFactory.hey();
}

试一试：

http://jsfiddle.net/ufLf50n1/

Answer 3

您可以使用class返回angular.factory：

class TestService {
  constructor() {
    console.log('instance initialized');
  }

  static init() {
    console.log('static init')
  }

  static foo() {
    console.log('static foo');
  }
}

angular.module('app', [])
  .factory('TestService', () => TestService)
  .run((TestService) => {
    new TestService();
    TestService.init();
    TestService.foo();
  })

<script src="https://code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="app"></div>

将现有JS代码包装为Angularjs Services

3 个答案: