Arm*_*min 32 angularjs angularjs-service
我正在尝试在我的AngularJS应用程序中包含一个javascript库(实际上是一个handfull).到目前为止,我正在构建这个应用程序的精简版本,没有任何设计.这就是功能和数据处理的全部内容.
这是我试图添加到我的AngularJS应用程序中的第一个javascript库:https://github.com/LarryBattle/Ratio.js
首先,我尝试使用脚本src标记将其简单地包含在我的HTML文件中,但是当我尝试在我的控制器中使用它时,我收到此错误:ReferenceError:require未定义
我已经读过,最好将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();
});
如果有人能帮我指导如何在我的AngularJS应用程序中包含第三方JavaScript库,我真的很感激.我希望能够将其作为依赖项添加到某些应用程序中,这样我就可以在其他应用程序中重用此功能.提前致谢!
我创建了一个工具，可以自动将支持 RequireJS/Almond 的库转换为 Angular 注入程序。它被称为 Angular Global Injector，可以在 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？
| 归档时间： |
|
| 查看次数： |
51415 次 |
| 最近记录： |