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);
        }
      };
    };
  });

skewl84 · Accepted Answer · 2014-10-14 00:00:37Z

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, 2014 at 0:00

skewl84

1842 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Abraham Over a year ago

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??

skewl84 Over a year ago

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.

Esteban Felix · Accepted Answer · 2014-10-14 00:02:20Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related