How to read a module library vs. vanilla in angular?

I am new to service / provider / factory modules in angular. I have been using a library called annyang for 30 minutes and I wanted to find a more "angular" way to use this library.

Some git independent have created a Provider module which can be found here: ngAnnyang .

It has zero documentation on how to use it correctly.

But traditional annyang, you just run:

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

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

      

QUESTIONS: After injecting the module into my angular app:

  • will this module be implemented the same, or the commands are now prefixed with ng

    this ngAnnyang.addCommands(); ngAnnyang.start();

    :?

  • Should I still have the original lib annyang as a script tag in my application?

  • What in this angular wrapper makes it "angular" except that it can now 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);
        }
      };
    };
  });

      

+3


source to share


2 answers


You will need to use the following:

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

ngAnnyangProvider.addCommands (...);



});

More details:

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

+1


source


will this module be implemented the same way or are the commands now prefixed with nglike ngAnnyang.addCommands(); ngAnnyang.start();

:?

It seems 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 annyang as a script tag in my application?



Yes, as it is only a wrapper around the original library.

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

This seems to be the only advantage it provides. It also makes testing easier.

+1


source







All Articles