Включите сторонние библиотеки Javascript в приложение AngularJS

Я пытаюсь включить библиотеки javascript (фактически, handfull) в мое приложение AngularJS. Пока я создаю урезанную версию этого приложения без дизайна. Это всего лишь функциональность и обработка данных на этом этапе.

Это первая библиотека javascript, которую я пытаюсь добавить в мое приложение AngularJS: https://github.com/LarryBattle/Ratio.js

Сначала я попытался просто включить его в свой HTML файл с помощью тега script src, но когда я пытаюсь использовать его внутри своего контроллера, я получаю эту ошибку: 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();

});

Я действительно был бы признателен, если бы кто-нибудь мог помочь мне настроить, как включить сторонние библиотеки javascript в мое приложение AngularJS. Я хотел бы добавить его как зависимость в определенные приложения, таким образом, я мог бы повторно использовать эту функцию в других приложениях. Спасибо заранее!

Ответ 1

Комментарий var Ratio = require("lb-ratio") и он должен работать.

Когда вы включаете script, Ratio уже находится в вашей глобальной области (окна, а не вашего контроллера).

Ответ 2

Я создал инструмент, который автоматически конвертирует библиотеки, которые поддерживают 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?

Ответ 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 привязана к вашей глобальной области действия, и вам не нужно ничего делать, чтобы использовать ее.