Question

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

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

首先，我尝试使用脚本src标记将其简单地包含在我的HTML文件中，但是当我尝试在我的控制器中使用它时，我收到此错误： ReferenceError：require未定义

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

<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();

});

如果有人能帮我指导如何在我的AngularJS应用中加入第三方javascript库，我真的很感激。我希望能够将其作为依赖项添加到某些应用程序中，这样我就可以在其他应用程序中重用此功能。提前谢谢！

Answer 1

评论var Ratio = require("lb-ratio")，它应该有效。

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

Answer 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？

Answer 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已绑定到您的全局范围，您无需执行任何特殊操作即可。

将第三方Javascript库包含到AngularJS应用程序中

3 个答案: