How to create utils library in angular

I am new to Angular. Sorry for the main question, but I couldn't find any information on how to write the library correctly in Angular.

The reason is to use Angular modules as well as testability / mocks.

Library

I am porting my code to Angular, but most of my code is based on a library that I developed in a couple of months. Imagine something like an underline.

So my initial thought was to wrap it in an Angular module like:

angular.module('mylib', [])
       .factory('map', map)
       .factory('reduce', reduce)
       .factory('find', find);

function map (...

      

Every factory function is testable and durable. And then use it like:

angular.module('app', ['mylib'])
       .controller('MainCtrl', ['$scope', 'map', MainCtrl]);

function MainCtrl($scope, map) {
    ... do stuff with map ...

      

This is fine for a few functions, which I think, but my library has over 20 functions and that's too many templates to define each one as a factory and then inject them into my controller.

Second solution

Another way is to have only one factory that returns an object. Kind:

angular.module('mylib', [])
       .factory('mylib', mylib)

function mylib () {
  var exports = {};

  exports.map = function (...
  exports.reduce = function (...
  exports.find = function (...

  return exports;
}

      

And then use it like this:

angular.module('app', ['mylib'])
       .controller('MainCtrl', ['$scope', 'mylib', MainCtrl]);

function MainCtrl($scope, mylib) {
    ... do stuff with mylib.map ...

      

But...

Is this a good approach? What would be a good way to write a utility library in Angular and use it? Readability and maintainability are important, but I prefer not to have that many templates.

+3


source to share


1 answer


If your library functions are as typical as your example, I would not define them as Angular modules. Write a regular JS library. This will result in a less useless boilerplate and as a bonus your library will also be used in Angular apps. Angular plays great with libraries that don't know about it, like not requiring data objects to implement anything extra (think ko.observable

Backbone Model

, etc.) in order for them to be used with data binding.

Being an Angular module is not a validation requirement. The only thing I can think of what Angular can do to improve testability in a shared utility library is dependency injection (for example, injection of a mock service for "current time" into a time library for deterministic results). If you don't need this, take the last of the least complications and just write a regular JS library.

If wrapping a library in an Angular module is an absolute requirement (for example, to avoid polluting the global namespace with a short namespace for it), I would still write the library in plain JS, put it into a more complex namespace, and then alias it with the Angular module.

Lib / purse-utility-1.0.js



// Or any other descriptive namespace
var handyUtilities = {
    map: function() { ... }
};

      

app / util.js

angular.module("handyUtilities", []).constant("util", handyUtilities);

      

+4


source







All Articles