web-dev-qa-db-fra.com

Inclure des bibliothèques Javascript tierces dans une application AngularJS

J'essaie d'inclure une bibliothèque javascript (en fait, une poignée) dans mon application AngularJS. Jusqu'à présent, je construis une version allégée de cette application, sans design. À ce stade, tout tourne autour des fonctionnalités et du traitement des données.

Ceci est la première bibliothèque javascript que j'essaie d'ajouter à mon application AngularJS: https://github.com/LarryBattle/Ratio.js

Au début, j'ai essayé de l'inclure simplement dans mon fichier HTML à l'aide de la balise script src, mais lorsque j'essaie de l'utiliser dans mon contrôleur, je reçois cette erreur: ReferenceError: require n'est pas défini

J'ai lu qu'il est préférable de convertir les bibliothèques javascript en services ou directives ou même en filtres lors de l'utilisation d'AngularJS. Quelqu'un peut-il nous donner une idée de la meilleure façon de procéder? Ou peut-être quelques tutoriels pertinents? Je n'ai pas pu en trouver un qui soit assez simple pour s'appliquer à mes besoins. Quelqu'un peut-il aider ou donner des indications à ce sujet? Voici mon code jusqu'à présent:

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

});

Je serais vraiment reconnaissant si quelqu'un pouvait m'aider à indiquer comment inclure des bibliothèques javascript tierces dans mon application AngularJS. J'aimerais pouvoir l'ajouter comme dépendance dans certaines applications, de cette façon je pourrais réutiliser cette fonctionnalité dans d'autres applications. Merci d'avance!

angularjsangularjs-service
32
Armin

Mettez en commentaire var Ratio = require("lb-ratio") et cela devrait fonctionner.

Lorsque vous incluez le script, Ratio est déjà sur votre portée globale (de la fenêtre, pas de votre contrôleur).

9
VtoCorleone

J'ai créé un outil qui convertit automatiquement les bibliothèques qui prennent en charge RequireJS/Almond en Angular injectables. Il s'appelle angular injector global et disponible sur github. Voici le lien : https://github.com/btesser/angular-global-injector

Voici à quoi ressemblerait une utilisation standard.

1) Incluez vos sources 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) Injecter des dépendances

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

Voir ici pour plnkr: http://plnkr.co/edit/0hWvNbrHpLO1l7rpvJkZ ?

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

cette instruction n'est requise que pour les fichiers du serveur node.js. Les fichiers angularjs résident sur le navigateur, vous pouvez donc les utiliser directement.

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

Comme VtoCorleone l'avait déjà mentionné lorsque vous l'avez fait

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

la variable Ratio s'est liée à votre portée globale et vous n'avez rien à faire de spécial pour l'utiliser.

3
himangshuj