如何在角度中讀取模塊與vanilla JS庫？

Question

我是角度服務/提供商/工廠模塊的新手。 我一直在使用一個名為annyang的庫30分鍾，我想找到使用這個庫的更“有棱角”的方式。

一些獨立於git的人在這里找到了一個moduleProvider： ngAnnyang 。

它沒有關於如何正確使用它的文檔。

但傳統的annyang你只需運行：

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

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

問題： 將模塊注入我的角度應用程序后：

1. 將此模塊實現相同或現在命令的前綴為ng ： ngAnnyang.addCommands(); ngAnnyang.start(); ngAnnyang.addCommands(); ngAnnyang.start(); ？

2. 我還需要在應用程序中將annyang的原始庫作為腳本標記嗎？

3. 這個角度包裝的內容使它“有角度”，除了它現在可以注入？

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（“你的app name”）。config（“ngAnnyangProvider”，function（ngAnnyangProvider）{

ngAnnyangProvider.addCommands（...）;

}）;

更多細節：

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

Answer 2

將此模塊實現相同或現在命令以nglike為前綴： ngAnnyang.addCommands(); ngAnnyang.start(); ngAnnyang.addCommands(); ngAnnyang.start(); ？

似乎ngWrapper在實例化提供程序后立即啟動服務。 你會以同樣的方式使用它：

var app = angular.module('app',[]);

app.controller('SpeechRecognize', ['ngAnnyang','tpsService',function(speechRecognition, tpsService) {
    var commands = {
        'show tps report': function() {
          tpsService.show();
        }
    };
    speechRecognition.addCommands(commands);
}]);

我還需要在應用程序中將annyang的原始庫作為腳本標記嗎？

是的，因為這只是原始庫的包裝。

這個角度包裝的內容使它“有角度”，除了它現在可以注入？

似乎這是它提供的唯一好處。 這也使測試更容易。