javascript - 如何以 Angular 读取模块与 Vanilla JS 库？

Question

我是 angular 的服务/提供者/工厂模块的新手。我一直在使用一个名为 annyang 的库30 分钟，我想找到使用这个库的更“有 Angular ”的方式。

一些独立于 git 的人在这里找到了一个 moduleProvider:ngAnnyang .

关于如何正确使用它的文档为零。

但传统的 annyang 你只需运行:

var commands = {
  'remind me to *val' : reminders,
};

annyang.addCommands(commands);
annyang.start();

问题:将模块注入(inject)我的 Angular 应用程序后:

1. 这个模块是否会以相同的方式实现，或者命令现在以 ng 为前缀，例如:ngAnnyang.addCommands(); ngAnnyang.start();?

2. 我是否仍然需要将 annyang 的原始库作为应用程序中的脚本标签？

3. 除了现在可以注入(inject)之外，这个 Angular 包装器中的什么使它“有 Angular ”？

JS:ng-annyang

    /**
* ngAnnyang Module
*
* Annyang Angular wrapper
*/
angular.module('ngAnnyang', ['ng'])
  .provider('ngAnnyang', function ngAnnyangProvider() {
    'use strict';

    var isEnabledFn = function() {};

    // events
    console.log('ngAnnyang: set events');
    annyang.addCallback('start', function() {
      console.log('ngAnnyang: enabled true');
      isEnabledFn(true);
    });
    _.each(['end', 'error', 'errorNetwork', 'errorPermissionBlocked', 'errorPermissionDenied'], function(v) {
      annyang.addCallback(v, function() {
        console.log('ngAnnyang: enabled false');
        isEnabledFn(false);
      });
    });

    console.log('ngAnnyang: start');
    annyang.start();

    this.debug = function(state) {
      if(state){
        console.log('ngAnnyang: set debug', !!state);
        annyang.debug(!!state);

      } else {
        console.log('ngAnnyang: set debug', true);
        annyang.debug();
      }
    };

    this.setLanguage = function(lang) {
      if(lang){
        console.log('ngAnnyang: debug', ''+lang);
        annyang.setLanguage(''+lang);
      }
    };

    this.$get = function ngAnnyangFactory(){
      return {
        isEnabled: function(fn) {
          console.log('ngAnnyang: isEnabled callback', fn);
          isEnabledFn = fn;
        },
        addCommands: function(commands) {
          console.log('ngAnnyang: add commands', commands);
          annyang.addCommands(commands);
        },
        removeCommands: function(commands) {
          console.log('ngAnnyang: remove commands', commands);
          annyang.removeCommands(commands);
        }
      };
    };
  });

Answer 1

您将需要使用以下内容:

angular.module("你的应用名称").config("ngAnnyangProvider", function( ngAnnyangProvider) {

ngAnnyangProvider.addCommands(...);

});

更多详情:

https://docs.angularjs.org/guide/module