angularjs - 在 AngularJS 应用程序中使用 node_modules

Question

我刚刚使用 Yeoman 项目生成器工具生成了一个 Angular 应用程序。生成的项目有一个目录“node_modules”。在这个模块中可能有很多用于 array-diff 等的“预定义函数”，并且只有在可能的情况下，我才想在我的 angularJS 应用程序( Controller 、指令)中使用这些函数。

不幸的是，每次我遇到一些错误时，我都尝试使用 RequireJS 和 Node-Browserfy 来使用这些 node_modules ，但没有成功。示例“过滤器不防御等...”。是否有任何分步教程可以将此模块集成到 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]);

这是我的 Controller

'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 规范的替代方案来替代您想要作为依赖项的模块。