How to include and use node modules in your Ionic

2020-02-08 10:49发布

问题:

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?

回答1:

The accepted answer is no longer accurate for Ionic V2 and the .bowerrc was removed from default installation.

Here is how you do it now, from the official Ionic V2 docs.

To add a third party library to an app, run the following command:

npm install --save

eg: Using the imported function

// named export pattern

import { myFunction } from 'theLibraryName';

...

// use the imported functionality

myFunction();



回答2:

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!



回答3:

  • Place the directory angular-base64/angular-base64.min.js in www/lib.

  • Include the JS file in index.html (for example: <script src="lib/angular-base64/angular-base64.min.js"></script>.

  • Inject the module in app.js: angular.module('starter', ['base64']).

Afterwards you should be able to use base64 everywhere in your app.