将 3rd-party Javascript 库包含到 AngularJS 应用程序中

Posted

技术标签:

【中文标题】将 3rd-party Javascript 库包含到 AngularJS 应用程序中【英文标题】：Include 3rd-party Javascript Libraries into an AngularJS app 【发布时间】：2014-02-28 19:32:15 【问题描述】：

我正在尝试在我的 AngularJS 应用程序中包含一个 javascript 库（实际上是一把）。到目前为止，我正在构建这个应用程序的精简版本，没有设计。目前只关注功能和数据处理。

这是我尝试添加到我的 AngularJS 应用程序中的第一个 javascript 库：https://github.com/LarryBattle/Ratio.js

起初，我尝试使用 script src 标记将它简单地包含到我的 html 文件中，但是当我尝试在我的控制器中使用它时，我收到此错误：ReferenceError: require is not defined

我读过最好将 javascript 库转换为服务或指令，甚至是使用 AngularJS 时的过滤器。任何人都可以提供有关执行此操作的最佳方法的任何见解吗？或者一些相关的教程？我一直无法找到一个足够简单的来满足我的需求。任何人都可以帮助或提供一些指导吗？到目前为止，这是我的代码：

<html ng-app="myApp">
<head>
    <title>PercentCalc App</title>
</head>
<body ng-controller="MainCtrl">

Amount: <input type="number" ng-init="amountone=28" ng-model="amountone"> Value: <input type="number" ng-init="valueone=300" ng-model="valueone">
<br />
Amount: <input type="number" ng-init="amounttwo=3.5" ng-model="amounttwo"> Value: <input type="number" ng-init="valuetwo=50" ng-model="valuetwo">
<br /><br />
=========================
<br /><br />
Test ratio:  amountone / amounttwo =  ratioone()  OR  ratioonestring <br />
Test ratio:  amounttwo / amountone =  ratiotwo() <br />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script type="text/javascript" src="js/ratio.js"></script>
<script type="text/javascript" src="js/percentcalc-ng-one.js"></script>

</body>
</html>

===

//percentcalc-ng-one.js
'use strict';

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) 
    console.log($scope);
    var Ratio = require("lb-ratio"); // <--- this is where the error is thrown
    $scope.ratioone = function ()  return $scope.amountone / $scope.amounttwo; 
    $scope.ratiotwo = function ()  return $scope.amounttwo / $scope.amountone; 

    $scope.ratioonestring = Ratio.parse( $scope.ratioone() ).simplify().toString();

);

如果有人能帮助指导我如何将 3rd-party javascript 库包含到我的 AngularJS 应用程序中，我将不胜感激。我希望能够将它作为依赖项添加到某些应用程序中，这样我就可以在其他应用程序中重用此功能。提前致谢！

【问题讨论】：

【参考方案1】：

注释掉var Ratio = require("lb-ratio")，它应该可以工作。

当您包含脚本时，Ratio 已经在您的全局范围内（窗口范围内，而不是您的控制器范围内）。

【讨论】：

好的，太好了！这绝对有帮助！我不再收到该错误，但是，该库似乎无法解析 AngularJS 变量数据。我收到来自比率库“NaN”的输出，意思是“不是数字”。我应该将 Ratio 函数包含在我的控制器范围中吗？我该怎么做？ 您是否正在为 $scope.amountone 和 $scope.amounttwo 设置值？我猜这些变量中的一个或两个都是未定义的。只是为了测试 Ratio，尝试在其中硬编码一些值，然后通过浏览器的开发工具运行它。 var testRatio = Ratio.parse(2.34563).simplify().toString();如果这是问题所在，我建议花一两天时间浏览 Angular 的网站。他们的“教程”对学习Angular很有帮助docs.angularjs.org/tutorial 是的，正如您在我的代码中看到的那样，我正在使用 ng-init 来初始化这些值，并且其他计算工作正常，只是不是应该打印到js lib Ratio 功能的屏幕。 对不起。我的初始化值读取失败。尝试删除 ng-init 并在控制器中设置初始值。此外，它可能只是一个复制和粘贴错误，但关闭您的输入标签“/>” 听起来你走在正确的道路上。祝你好运。您是否介意将答案标记为正确，因为它通过 require() 行抛出错误解决了您的原始问题。谢谢。【参考方案2】：

我创建了一个工具，它可以自动将支持 RequireJS/Almond 的库转换为 Angular 可注射剂。它被称为角度全局注入器，可在 github 上找到。这是链接：https://github.com/btesser/angular-global-injector

这是标准用法的样子。

1) 包含您的 js 源代码

<!-- jQuery is optional, but if included must be first -->
<script src="jquery.js"></script>

<!-- The next 2 scripts must be loaded in this order -->
<script src="angular.js"></script>
<script src="angular-global-injector.js"></script>

<!-- Include all of your other dependencies here -->
<script src="lodash.js"></script>
<script src="d3.js"></script>

2) 注入依赖

angular
  .module('app', ['globals'])
  .controller('DiController', function DiController($q, _, d3) 
    // The following 2 lines work as expected
    _.map([1,2,3],function (num)  console.log(num); );
    d3.selectAll("p");
  );
console.log(window.d3); // undefined... Accessible only as an angular injectable
console.log(window._); // undefined

请参阅此处获取 plnkr：http://plnkr.co/edit/0hWvNbrHpLO1l7rpvJkZ?

【讨论】：

【参考方案3】： 
var Ratio = require("lb-ratio");

仅 node.js 服务器文件需要此指令。 angularjs 文件驻留在浏览器中，因此您可以直接使用。

Ratio.parse( 12.12121212121212 ).simplify().toString();

正如 VtoCorleone 在你这样做时已经提到的那样

<script type="text/javascript" src="js/ratio.js"></script>

变量 Ratio 已绑定到您的全局范围，您无需执行任何特殊操作即可使用它。

【讨论】：

感谢您的洞察力！我不再收到该错误，但是，该库似乎无法解析 AngularJS 变量数据。我收到来自比率库“NaN”的输出，意思是“不是数字”。我应该将 Ratio 函数包含在我的控制器范围中吗？我该怎么做？ 我认为 $scope.amountone 或 $scope.amounttwo 都是字符串或未定义的。你可以试试 console.log($scope.amountone+$scope.amounttwo);在你的比率函数中 感谢您的建议。当我添加您推荐的行时，控制台会吐出“NaN”。我不确定为什么它是一个字符串，我不确定为什么 Angular 仍然可以处理它，如果它是一个字符串。我猜它会自动更改变量类型？我怎样才能改变它？ 试试 parseInt($scope.amountone) / parseInt($scope.amounttwo)

以上是关于将 3rd-party Javascript 库包含到 AngularJS 应用程序中的主要内容，如果未能解决你的问题，请参考以下文章

如何配置 3rd-party 应用程序？

如何处理使用 3rd-party 的 restful store api 和 js mvc 框架的安全性？

类库包：sl5 目标问题

如何在不使用 3rd-party API 的情况下用 C# 压缩文件？

如何隔离仅允许创建为单例的不良行为 3rd-party c-lib？

ace2 lib整合库包