javascript - How to include and use node modules in your Ionic / AngularJs app?

Question

I have an Ionic app and I'd like to include the node module angular-base64 to use in my controllers, or even wrap inside an angular service etc. I've gone ahead and ran

npm install angular-base64

Which went ahead and installed the folder containing angular-base64.min.js file inside /myIonicApp/node_modules/. So the full path to the file is /myIonicApp/node_modules/angular-base64/angular-base64.min.js .

However when I try and make use of the module in one of my controllers like this:

app.controller('myController', ['$scope', '$base64',
  function($scope, $base64) {

    //$base64... 

  }
]);

It has no idea what I'm talking about. Do I have to do something else to get this to work? Perhaps something in my app.js?

Answer 1

The accepted answer is not correct. In order to add client-side modules to your Ionic/AngularJS app, you should use Bower and not NPM. NPM should only be used to install modules that are part of the development/build/deployment processes. Anything you want to come across to your users as part of the client-side package should be managed by Bower.

If you look in the .bowerrc file, you'll see the following:

{
  "directory": "www/lib"
}

This configuration sets the www/lib directory as the home for everything installed by bower. If you use the following command, the package will be installed in the correct location:

bower install --save angular-base64

(The --save flag saves the dependency in your bower.json file.)

You may now add the script tag to your index.html file: <script src="lib/angular-base64/angular-base64.min.js"></script>

You will also need to inject the module into your app as described above. In app.js add the module like so: angular.module('starter', ['base64'])

When using tools like Bower or NPM, I find that having to make manual modifications to an installation is often the first sign that I've done it wrong!