2015-12-21 3 views
1

Я только что сгенерировал угловое приложение, используя инструмент генератора проекта Yeoman. Сгенерированный проект имеет каталог «node_modules». Внутри этого модуля есть много, возможно, «предопределенных функций» для массива-diff и т. Д., И я хочу использовать эти функции внутри моего приложения angularJS (контроллеры, директивы), только если это возможно.Использование node_modules внутри приложения AngularJS

I'v пытался использовать эти узловые_модули с помощью RequireJS и Node-Browserfy unfortonatelly без каких-либо успехов каждый раз, когда я получал некоторую ошибку. Пример «Фильтр не определяет и т. Д.». Есть ли пошаговое руководство для интеграции этого модуля в приложение AngularJS?

Моя структура проекта: Project structure

Это мой bundle.js генерируется узлом-browswerfy

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ 
var myFilter =require('../../node_modules/array-filter/index.js'); 
},{"../../node_modules/array-filter/index.js":2}],2:[function(require,module,exports){ 
/** 
* Array#filter. 
* 
* @param {Array} arr 
* @param {Function} fn 
* @return {Array} 
*/ 

module.exports = function (arr, fn) { 
    if (arr.filter) return arr.filter(fn); 
    var ret = []; 
    for (var i = 0; i < arr.length; i++) { 
    if (!hasOwn.call(arr, i)) continue; 
    if (fn(arr[i], i, arr)) ret.push(arr[i]); 
    } 
    return ret; 
}; 

var hasOwn = Object.prototype.hasOwnProperty; 

},{}]},{},[1]); 

Это мой контроллер

'use strict'; 

/** 
* @ngdoc function 
* @name alam2App.controller:MainCtrl 
* @description 
* # MainCtrl 
* Controller of the alam2App 
*/ 
angular.module('alam2App') 
    .controller('MainCtrl', function ($scope) { 

var array = [1, 2, 3]; 
console.log(myFilter (array, function (el, i, arr) { 
    return false; // I throw it on the ground! 
})); 
    $scope.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma' 
    ]; 
    }); 

Сообщение об ошибке я получил на консоли

ReferenceError: myFilter is not defined 
+0

Как вы пробовали? Прикрепите код вашей попытки. – marekful

+1

Вы не должны использовать node_modules, потому что папка node_modules не будет развернута на сервере. Для функций утилиты массива используйте lodash или UnderscoreJS. –

+0

@Mahesh Sapkal Это неверно. Нулевые мудулы должны существовать в развернутой среде. _Использование существующих модулей в вашем коде просто в порядке. – marekful

ответ

1

Документация всегда является хорошим местом для начала, requirejs хорошо документирован, и их страница, ссылающаяся на использование node и node_modules, описывает именно то, что вам нужно сделать.

r.js создает развертываемых сверток весь код, который вы используете, и оно не имеет большого значения, в какую папку вы поместите его в. r.js будет объединять весь код в один файл, вы просто включить это в вашей странице и выполняет содержащий все требуемые зависимости.

Угловой сделал плохой выбор относительно определения модуля, это был не такой ужасный выбор в то время, как раз недальновидный, поэтому вы застряли в том, что у вас есть проблемы с обувью в решениях таких проблем. К счастью, сообщество фантастическое и разработало множество решений. Попробуйте найти способы комбинирования модулей commonJS и модулей AMD, или, ищите альтернативы, совместимые с AMD, в зависимости от того, какие модули вы хотите использовать в качестве зависимостей.

+0

Спасибо за ваш ответ. –

Смежные вопросы