Using node modules in Angularjs

Question

I am trying to use a third party module which is available as a node module in my angular application. I have just started using angular and I am yet to fully understand the modular behavior. I am importing the angular modules (router etc) through script tags and injecting them in my main app module but I do not know how to inject the node modules.

Google has got me even more confused with words such as CommonJS, AMD etc. as I am just starting to learn about modular approach. Can someone guide me on how to inject node modules inside my app module?

I am using AngularJS v1.6.4. I have the option to use browserify and webpack. I have them both.

Answer 1

After you have installed the module with npm you have to include it with the script tag. Like so

<script src="node_modules/angular-messages/angular-messages.min.js"></script>

(I use angular-messages as an example)

This is typically done in index.html, together with all the other script tags. The path has to be correct of course. It will be from the server point-of-view and Developer Tools will tell you if it can't find the file. You have to inspect the module folder and/or read the module's readme to find what file to use. The actual code you want for most modules is a single .js file.

You can also shorten the path. If you use express it would be done like this

app.use('/angular-messages', express.static(path.join(__dirname, 'node_modules/angular-messages')));

and the script tag would change to

<script src="angular-messages/angular-messages.min.js"></script>

because express is set up to route angular-messages to node_modules/angular-messages.

To get the module working in AngularJS you have to add it as a dependency to the app. For example:

angular.module('myapp', ['ngRoute', 'ngMessages']).config(config).run(setupAuth)

The readme of the module will tell you the name of the module. In this case it was named ngMessages so that was added as a dependency. This is typically done in the file where you bootstrap the AngularJS application (app.js or something similar). You can read about how the module function works here. The second parameter is usually an array containing the dependency names.

It should be noted that only AngularJS modules are added to this array. If you have a module that is not an AngularJS module, for instance validator.js, you have to find some other way to use it. When a script is included in a script tag

<script src="node_modules/validator/validator.min.js"></script>

its code will be available in the global window object. To access window in AngularJS you can use the $window service. For instance:

let isItAlpha = $window.validator.isAlpha('test123'));

The file validator.min.js gives access to an object called validator, which contains a function called isAlpha. I could access it by going through $window, because the window object contained the code read from validator.min.js. This might not be the purest way of using non-AngularJS modules, but it works. Many non-AngularJS modules will also have AngularJS wrappers as separate modules. You could try finding the AngularJS version before trying to use the main version.

I would get it to work this way before using browserify and webpack and all that.