Using a NPM module in my ionic framework app

ionic-v1
1

I want to be able to use the “Request” Node module in my Ionic app. I want to call a URL and display the response HTML in a view. The issue I am having trouble with is using a Node module in Ionic, since Node is backend and Ionic is frontend. Can someone provide some insight on how this is done?

1 Like
2

Check out browserify http://browserify.org/ . It allows you to use node modules in the browser.

3

Yeah, I have checked out Browserify. But there are no Ionic (or AngularJS specific) examples…at leat none that I have found. Thank you, though.

1 Like
4

i figured it out. I had to require angular.js, controllers.js and services.js file in my app.js file.

var angular = require(‘angular’); //may not be needed, haven’t tried without. I believe ionic bundle includes angular already.

require(’./controllers’);
require(’./services’);

Then I ran the following:
browserify app.js > bundle.js

I included the bundle.js to the index.html file and commented out the controllers.js and services.js (since they will be added by the require statements.

<script src="js/bundle.js"></script>
    <!--<script src="js/controllers.js"></script>-->
    <!--<script src="js/services.js"></script>-->

Then I add whatever code I want in my controllers.js file:

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, $http) {
       var somemodule = require('somemodule');

        somemodule(blahblahblah, function (err, data){
            $scope.data = data;
        });
})

…

I hope this oversimplified example helps others out there. I was trying to figure this out for over a week.

4 Likes
5

Cool! Yeah you shoulndt need to require angular. angular is already on the global scope

6

Hey marcelluseasley I am having a similar problem. I want to include a npm module in Ionic but I have no idea where to include the require line of code. Do you have any more info on this ?

7

@wheats take a look at Ionic browserify . theres a post that references a tutorial for ionic/browserify

8

@wheats i was having same problem. and after a few up and down i reach it. i’m going to push this week. Its the basic ionic boilerplate but working with browserify.

9

You need to include the var blah = require… in your controller…at least I do. like this:

angular.module(‘starter.controllers’, )

.controller(‘DashCtrl’, function($scope, $http) {

 var request = require('request');
  request.whatever....

});

10

It’s a real pain that a simple example of this hasn’t been posted before… at least that I could find. I am still trying to find a way to debug bundles created with browserify, though.

11

@marcelluseasley since require is on the global scope you should be able to declare the var anywhere. You could even wrap your angular module around a self executing anonymous function like

(function (angular, require) {
  'use strict';

  var request = require('request');

  angular.module('starter.controllers', [])
    .controller('DashCtrl', function($scope, $http) {
        console.log(request);
    });
  
})(angular, require);

That way you can use your request module anywhere within the self executing function rather than scoped directly to your controller

12

I must be doing something wrong. I followed the steps above, and the browserify seemed to work, but I get an error if I comment out the link to controller.js from index. And any time I use require I get an error that require is undefined.

13

Hi guys, any news about that ? I’m trying to require a test npm module in my ionic demo project ( as per [Browserify error “require is not defined”] ) but I still have the require not defined errors.

Follow the steps in browserify doc that are the same you did :

  1. .constant(‘Crypto’,require(‘crypto’)) in app.js

  2. bundle.js creation with browserify app.js -o bundle.js

  3. bundle js import in index.html

but still require is not defined.

Please any hints ?

Thanks in advance.

14

For the visual learners out there, the link below is a getting started with browserify, explains what you need to know and how it works.

15

The following steps worked for me: ionic v1

  1. npm install browserify

  2. next modify app.js and ‘require’ the modules you want to browserify (in my case I tried with ‘aws-sdk’) , also the controllers and services need to be included as follows, at beginning of app.js:

    var controllers = require(’./controllers’);
    var services = require(’./services’);
    require(‘aws-sdk’); // the module to be loaded

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services',])

  1. run the command:: // will generate a ned bundle.js file under www/js
    browserify app.js > bundle.js

  2. next include bundle.js script in index.html, also make sure to comment the app.js,controller.js and services.js scripts:

  3. Now the npm module can be called anywhere from the controller like this :
    var aws = require('aws-sdk');

//NOTE: any changes to controller.js and services.js will not be reflected real time, each time you make a change, make sure to run : browserify app.js > bundle.js