Require / Browserify hoodie in Angular

Question

My aim is to use hood.ie framework in Angular. Instead of including all the JS files, I would like to use Browserify and require() the dependencies. I cannot find a way to require hoodie (template app for hood.ie uses <script src="/_api/files/hoodie.js"> which is provided by "hoodie start" command. Is there a way to include it with require()?

My project structure:

.
+-- app 
|  +-- app.js
|  +-- index.html
|  +-- main
|  |  +-- index.js
|  |  +-- main.html
|  +-- auth
|  |  +-- index.js
|  |  +-- login.html
+-- dist
|  +-- main
|  |  +-- main.html
|  +-- auth
|  |  +-- index.html 
|  +-- browsified.js
|  +-- index.html

The dist directory is built by gulp:

var gulp = require('gulp')
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var exec = require('child_process').exec

gulp.task('hoodie-start', ['copy-static', 'browserify'],  function() {
  var child = exec('node ./node_modules/hoodie-server/bin/start --www dist --custom-ports 6001,6002,6003');
  child.stdout.on('data', function(data) {
      console.log(data);
  });
  child.stderr.on('data', function(data) {
      console.log(data);
  });
  return child;
});

gulp.task('browserify', function() {
    var options = {
        entries: ['./app/app.js'],
        extensions: ['.js']
    }
    return browserify(options)
        .bundle()
        .pipe(source('browserified.js'))
        .pipe(gulp.dest('./dist'));
});

gulp.task('copy-static', function() {
    return gulp.src(['./app/**/*.html'])
        .pipe(gulp.dest('./dist')); 
});

The package.json file (stripped from irrelevant parts):

{
  ...
  "main": "dist/index.html",
  "dependencies": {
    "angular": "^1.4.8",
    "angular-route": "^1.4.8",
    "hoodie-plugin-angularjs": "^0.1.1",
    "hoodie-plugin-appconfig": "^2.0.1",
    "hoodie-plugin-email": "^1.0.0",
    "hoodie-plugin-users": "^2.2.2",
    "hoodie-server": "^4.0.2"
  },
  "bundleDependencies": [
    "hoodie-plugin-angularjs",
    "hoodie-plugin-appconfig",
    "hoodie-plugin-email",
    "hoodie-plugin-users",
    "hoodie-server"
  ],
  "devDependencies": {
    "browserify": "^13.0.0",
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "hoodie": {
    "plugins": [
      "hoodie-plugin-appconfig",
      "hoodie-plugin-email",
      "hoodie-plugin-users",
      "hoodie-plugin-angularjs"
    ]
  }
}

Finally, app.js:

var angular = require('angular');
var ngRoute = require('angular-route');

var main = require('./main');
var auth = require('./auth');  

var app = angular.module('myApp', ['ngRoute', 'hoodie', main.name, auth.name]); 

app.config([
    '$routeProvider', 'hoodieProvider', function($routeProvider, hoodieProvider) {

        $routeProvider.when('/login', {
            templateUrl: 'auth/login.html',
            controller: 'LoginController'
        });

        $routeProvider.otherwise({
            templateUrl: 'main/main.html',
            controller: 'MainController'
        });

        hoodieProvider.url('http://myapp.com');

    }
]);

I planned to take advantage of hoodie-plugin-angularjs, but it is not require()-able either.

Any hints how to plumb it all together?

Answer 1

It seems you have 2 issues here. First, by looking at the documentation it looks like you need to require the client library which exposes the Hoodie constructor. Second, the hoodie-plugin-angularjs library expects a global Hoody to be available. Try the following:

// app.js

// Make global
var Hoodie = require('hoodie-client');
window.Hoodie = Hoodie;

// Now the plugin knows about Hoodie.
// It will run the side-effect,
// namely registering the angular service 
require('hoodie-plugin-angularjs');

// ... Angular code that uses Hoodie