Question

我需要在AngularJs控制器中使用此NoSleep.js。我使用bower安装了NoSleep，但我需要将它注入我的angularjs控制器，但我不知道它是怎么做的，NoSleep不是一个角度服务，我需要使用这个声明var noSleep = new NoSleep();才能使用它

我正在使用babel，webpack，gulp，karma

有任何建议吗？

Answer 1

如果您有任何JS lib并且它不是Angularjs lib，只需在html文件中使用script标记添加它，并在创建AngularJ之前调用它。你试过吗？

或者转到另一种方式并使用AgnularJs服务包装lib（编写一个AngularJs服务并在其中调用lib方法），然后将这个新服务注入到任何你想要的地方。

<强>更新
@Mike Feltman和@ richbai90在他们的回答中说的很好，也许对你来说足够了，但我认为构建你的服务并调用你创建的方法会更好，但是在这些方法中使用你想要的库（它就像在C＃中使用接口一样：

(function() {
    'use strict';

    angular.module('nosleep.module', []).service('nosleep', ['', nosleepFunc]);

    function nosleepFunc() {
         var nosleepObj = new NoSleep();

         var service = {
              method1: method1,
              method2: method2
              //... etc
         };

         function method1() {
             return nosleepObj.method1();
         }

         // ..... other methods

         return service;
    }

})();

这样，如果您想将nosleep lib更改为另一个，并且新的lib具有其他方法名称，则只需更改服务代码即可。

Answer 2

看起来NoSleep只是在全局范围内声明了一个函数，所以你可以这样做：

<强> NoSleepService.js

(function () {
    // place noSleep minified code here
    angular.module('myApp').service('noSleep', NoSleep);
})()

这将在封闭函数中创建一个NoSleep对象，以便它不会污染全局范围并将new实例注册到您的角应用程序。

Answer 3

通常，在Angularjs应用程序中使用非angularjs库时，它们将包装在模块中。然后你将模块注入你的应用程序，然后根据需要将你用它包装的服务/工厂注入你的控制器，这样你就可以创建一个如下所示的模块：

(() => {
  "use strict"
  angular.module('nosleep.module', []).factory('nosleep', ['', function () {
    return new NoSleep()
  }])
})()

然后，您将模块注入主应用程序模块，例如：

angular.module('myApp', '[nosleep-module')

然后在需要访问nosleep的控制器中，你会注入nosleep。

class myController {
    constructor(nosleep) {
       this.nosleep = nosleep
    }
}

然后，您可以在控制范围内使用this.nosleep解决问题。

如何在angularjs控制器中注入外部javascript文件

3 个答案: