将第三方Javascript库包括到AngularJS应用程序中_Angularjs_Angularjs Service

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

angularjs

将第三方Javascript库包括到AngularJS应用程序中,angularjs,angularjs-service,Angularjs,Angularjs Service,我正试图在我的AngularJS应用程序中包含一个javascript库（实际上是一个完整的javascript库）。到目前为止，我正在构建这个应用程序的精简版本，没有任何设计。这只是功能和数据处理在这一点上这是我试图添加到AngularJS应用程序中的第一个javascript库：起初，我尝试使用script src标记将其简单地包含到HTML文件中，但当我尝试在控制器中使用它时，我收到以下错误：ReferenceError:require未定义我曾经读到，在使用AngularJS时，最

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

这是我试图添加到AngularJS应用程序中的第一个javascript库：

起初，我尝试使用script 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>


百分比计算应用程序
金额：价值：


金额：价值：



=========================



测试比率：{{amountone}/{amounttwo}={{ratioone（）}}或{{ratioonestring}

测试比率：{{amounttwo}/{{amountone}}={{ratiotwo（）}}

===

//percentcalc-ng-one.js
"严格使用",；
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
console.log（$scope）；
var Ratio=require（“lb Ratio”）；//注释掉var Ratio=require（“lb Ratio”）
，它应该可以工作
包含脚本时，比率已在全局范围内（窗口的，而不是控制器的）
此指令仅适用于node.js服务器文件。angularjs文件位于浏览器上，因此您可以直接使用
Ratio.parse( 12.12121212121212 ).simplify().toString();

正如你所说的
<script type="text/javascript" src="js/ratio.js"></script>



可变比率已绑定到您的全局范围，您无需做任何特殊操作即可使用它。
我创建了一个工具，可以自动将支持RequireJS/Almond的库转换为角度注射器。该工具称为角度全局注射器，可在github上使用。链接如下：
下面是一个标准用法
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>

请参见此处获取plnkr:？好的！这肯定有帮助！我不再收到错误，但是，似乎库无法解析AngularJS变量数据。我正在接收来自比率库“NaN”的输出，表示“不是数字”。我应该将比率函数包含到我的控制器作用域中吗？我该怎么做？您是否正在为$scope.amountone和$scope.amounttwo设置值？我猜其中一个或两个变量都未定义。为了测试比率，请尝试在其中编码一些值，然后通过浏览器的开发工具运行它。var testRatio=Ratio.parse（2.34563）.simplify（）.toString（）；如果这是个问题，我建议花一两天时间浏览Angular的网站。他们的“教程”这对学习Angular很有帮助是的，正如您在我的代码中看到的，我正在使用ng init初始化这些值，其他计算工作正常，只是不是应该打印到屏幕上用于js lib Ratio功能的值。对不起，我用init值读取失败。请尝试删除ng init并设置t控制器中的初始值。此外，这可能只是一个复制和粘贴错误，但关闭输入标记“/>”听起来像是在正确的路径上。祝您好运。您介意将答案标记为正确，因为它解决了您最初的require（）问题吗行抛出错误。谢谢。感谢您的洞察力！我不再收到错误，但是，似乎库无法解析AngularJS变量数据。我正在接收来自比率库“NaN”的输出，表示“不是数字”。我应该将比率函数包含到我的控制器作用域中吗？我认为$scope.amountone或$scope.amounttwo都是字符串或未定义的。您可以尝试在比率函数中使用console.log（$scope.amountone+$scope.amounttwo）；谢谢您的建议。控制台会显示“NaN”当我添加您推荐的行时。我不确定为什么它是字符串，也不确定为什么Angular仍然可以处理它（如果它是字符串）。我猜它会自动更改变量类型？我如何更改它？请尝试parseInt（$scope.amountone）/parseInt（$scope.amounttwo）
<script type="text/javascript" src="js/ratio.js"></script>

<!-- 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>

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