2016-01-25 4 views
2

Моя цель - использовать hood.ie рамки в Угловом. Вместо того чтобы включать все JS-файлы, я хотел бы использовать Browserify и require() зависимости. Я не могу найти способ, чтобы потребовать толстовку (шаблон приложения для hood.ie использует <script src="/_api/files/hoodie.js">, который предоставляется командой «балахон старт» Есть ли способ, чтобы включить его (требуется)Требуется/Выбирайте туфли в Угловом

Моя структура проекта:.?

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

расстояние каталог построен глотка:

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, но это не требуется() - возможность либо.

Любые намеки о том, как вскрыть все это вместе?

+0

Я попытался «NPM установить --save толстовку @ следующий», а затем требуют («балахон»), но он не работает по какой-то причине. Это путь? – TomaszGuzialek

+0

Если вы установили плагин через npm, он должен быть ... – elclanrs

+0

Не удалось найти hoodie, пожалуйста, приложите ошибку: http://pastebin.com/K2SWNTwn – TomaszGuzialek

ответ

1

У вас есть 2 проблемы. Во-первых, просмотрев документацию, похоже, вам понадобится библиотека client, которая предоставляет конструктор Hoodie. Во-вторых, будет доступна библиотека hoodie-plugin-angularjsexpects a global 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 
+0

Я думаю, я принял ответ слишком быстро. Первая строка, «Hoodie = требуется» («hoodie-client»), «работала как шарм. Добавив его, я мог бы создать объект hoodie вручную «hoodie = hoodie = new Hoodie()», но требование hoodie-plugin-angularjs на самом деле не получилось с «Ошибка: не удалось найти модуль hoodie-plugin-angularjs» при запуске «gulp browserify» , Это потому, что это не правильный модуль CommonJS? – TomaszGuzialek

+0

Похоже на это ... Я бы посмотрел на [browerify-shim] (https://github.com/thlorenz/browserify-shim), иначе вы могли бы разветвить его и сделать его совместимым с Commonjs. – elclanrs