web-dev-qa-db-ja.com

サードパーティのJavascriptライブラリをAngularJSアプリに含める

私はAngularJSアプリにjavascriptライブラリ（実際にはハンドフル）を含めようとしています。これまでのところ、私はこのアプリのシンプルなバージョンをデザインなしで構築しています。この時点での機能とデータ処理だけです。

これは、AngularJSアプリに追加しようとしている最初のjavascriptライブラリです。 https://github.com/LarryBattle/Ratio.js

最初は、スクリプトsrcタグを使用して単純にHTMLファイルにインクルードしようとしましたが、コントローラー内で使用しようとすると、次のエラーが表示されます：ReferenceError：require is notdefined

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ライブラリを含める方法を教えてくれたら本当に感謝しています。特定のアプリに依存関係として追加できるようにしたいので、他のアプリでこの機能を再利用できます。前もって感謝します！

angularjsangularjs-service
32
Armin

var Ratio = require("lb-ratio")をコメントアウトすると、動作するはずです。

スクリプトを含めると、Ratioは既に（コントローラーではなくウィンドウの）グローバルスコープにあります。

9
VtoCorleone

RequireJS/AlmondをサポートするライブラリをAngularインジェクタブルに自動的に変換するツールを作成しました。 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 ？

4
btesser
var Ratio = require("lb-ratio");

この指示は、node.jsサーバーファイルにのみ必要です。 anglejsファイルはブラウザ上にあるため、直接使用できます。

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

VtoCorleoneが既に言及したように

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

変数Ratioはグローバルスコープにバインドされており、それを使用するために特別なことをする必要はありません。

3
himangshuj