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

Question

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

我正在使用babel，webpack，gulp，业力

有什么建议吗？

Answer 1

如果您有任何JS库，但它不是Angularjs库，则只需在html文件中使用script标签将其添加，然后像以前一样调用它们，然后再创建AngularJs。
你试过了吗？

或采用另一种方法，并用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库更改为另一个库，而新的库具有另一个方法名，则只需更改服务代码即可。

Answer 2

看起来NoSleep只是在全局范围内声明了一个函数，因此您可以执行以下操作：

NoSleepService.js

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

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

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解决它。