角要求/褐化帽衫

Question

我的目标是在角度上使用hood.ie框架。我不想包含所有的JS文件，而是使用Browserify并要求()依赖项。我无法找到一种方法来要求帽衫(模板应用程序hood.ie使用<script src="/_api/files/hoodie.js">，这是由“帽衫开始”命令提供。)有没有一种方法可以将它包含在require()中？

我的项目结构：

.
+-- 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

dist目录是由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')); 
});

package.json文件(从不相关的部分中剥离)：

{
  ...
  "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"
    ]
  }
}

最后，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');

    }
]);

我计划利用帽衫-插件-angularjs，但它也不需要()-able。

有什么提示怎么把所有的东西都放在一起吗？

Answer 1

看来你这里有两个问题。首先，通过查看文档，您需要使用公开客户端构造函数的Hoodie库。第二，hoodie-plugin-angularjs库Hoody是可用的。尝试以下几点：

// 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