如何在角度中读取模块与vanilla JS库？

Question

I'm new to service/provider/factories modules in angular. I've been using a library called annyang for 30 mins and I wanted to find the more "angular" way of using this library.

Some independent on git made a moduleProvider found here: ngAnnyang .

It has zero documentation on how to use it properly.

But traditional annyang you simply run:

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

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

QUESTIONS: After injecting the module into my angular application:

1. would this module be implemented the same or commands now get prefixed with ng like: ngAnnyang.addCommands(); ngAnnyang.start(); ngAnnyang.addCommands(); ngAnnyang.start(); ?

2. Do i still need to have the original lib of annyang as a script tag in the app?

3. What in this angular wrapper makes it "angular" except that it now can be injected?

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

You will need to use the following:

angular.module("your app name").config("ngAnnyangProvider", function( ngAnnyangProvider) {

ngAnnyangProvider.addCommands (...);

});

For more details:

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

Answer 2

would this module be implemented the same or commands now get prefixed with nglike: ngAnnyang.addCommands(); ngAnnyang.start(); ngAnnyang.addCommands(); ngAnnyang.start(); ?

It seems like that ngWrapper starts the service as soon as the provider is instantiated. You would use it in the same way:

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

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

Do i still need to have the original lib of annyang as a script tag in the app?

Yes as this is only a wrapper around the original library.

What in this angular wrapper makes it "angular" except that it now can be injected?

It seems like that is the only benefit that it provides. This also makes it easier to test.