在AngularJS应用程序中使用node_modules

Question

我刚刚使用Yeoman项目生成器工具生成了一个angular应用程序。生成的工程有一个node_modules目录。在这个模块中有许多用于数组比较等的“预定义函数”，我只想在可能的情况下在angularJS应用程序中使用这些函数(控制器、指令)。

我尝试过使用RequireJS和Node-Browserfy来使用这些node_modules，但每次遇到错误都没有成功。示例"filter is not defiend etc...“。有什么循序渐进的教程可以将这个模块集成到AngularJS应用程序中吗？

我的项目结构是：

​

这是node-browswerfy生成的bundle.js

    (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

Answer 1

文档总是一个很好的起点，requirejs有很好的文档记录，他们的页面引用了node和node_modules的用法，准确地描述了您需要做的事情。

r.js为你正在使用的所有代码创建了一个可部署的包，你把它放在哪个文件夹中并不重要。r.js会将你的所有代码捆绑到一个文件中，你只需将它包含在你的页面中，它就会执行包含你所需的所有依赖项。

Angular在模块定义方面做了一个糟糕的选择，它在当时并不是一个糟糕的选择，只是一个短视的选择，所以你不得不在解决像这样的问题时坚持脚踏实地。幸运的是，这个社区非常棒，并提出了多种解决方案。尝试寻找组合commonJS模块和AMD模块的方法，或者，寻找与AMD兼容的替代模块作为您想要的依赖模块。