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

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:

would this module be implemented the same or commands now get prefixed with nglike: ngAnnyang.addCommands(); ngAnnyang.start();?
Do i still need to have the original lib of annyang as a script tag in the app?
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);
        }
      };
    };
  });

score 1 · Accepted Answer · answered Oct 14 '14 at 00:00

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

answered Oct 14 '14 at 00:00

skewl84

184
2
9

why is it ngAnnyangProvider the name space? I'm still out of the house and I'll try both but the naming conventions between estban felix and yourself are different? is he right or you?? – Armeen Moon Oct 14 '14 at 01:38
Angularjs follows convention over configuration. Therefore, the namespace convention for provider is the provider variable name followed by the word "P"rovider. Hope this helps. – skewl84 Oct 14 '14 at 01:40

score 1 · Answer 2 · answered Oct 14 '14 at 00:02

would this module be implemented the same or commands now get prefixed with nglike: 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.

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

2 Answers2