javascriptangularjsgistannyang

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


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

Solution

  • 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