que - Incluye bibliotecas de JavaScript de terceros en una aplicación AngularJS
ng-cloak que es (3)
Comentario out var Ratio = require("lb-ratio") y debería funcionar.
Cuando incluye el script, Ratio ya está en su ámbito global (de la ventana, no en su controlador).
Estoy tratando de incluir una biblioteca de JavaScript (en realidad, un puñado) en mi aplicación AngularJS. Hasta ahora, estoy construyendo una versión simplificada de esta aplicación, sin diseño. Se trata solo de funcionalidad y procesamiento de datos en este punto.
Esta es la primera biblioteca de JavaScript que intento agregar a mi aplicación AngularJS: https://github.com/LarryBattle/Ratio.js
Al principio, traté de simplemente incluirlo en mi archivo HTML utilizando script src tag, pero cuando trato de usarlo dentro de mi controlador, recibo este error: ReferenceError: require no está definido
He leído que es mejor convertir las bibliotecas de javascript en servicios o directivas o incluso filtros cuando se utiliza AngularJS. ¿Alguien puede proporcionar alguna información sobre la mejor manera de hacer esto? O tal vez algunos tutoriales relevantes? No he podido encontrar uno que sea lo suficientemente simple para aplicarlo a mis necesidades. ¿Alguien puede ayudar o proporcionar alguna dirección con esto? Aquí está mi código hasta ahora:
<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();
});
Realmente agradecería que alguien me ayudara a orientarme sobre cómo incluir bibliotecas javascript de terceros en mi aplicación AngularJS. Me gustaría poder agregarlo como una dependencia en ciertas aplicaciones, de esa manera podría reutilizar esta función en otras aplicaciones. ¡Gracias por adelantado!
He creado una herramienta que convierte automáticamente las bibliotecas que admiten RequireJS / Almond en inyectables angulares. Se llama inyector angular global y está disponible en github. Aquí está el enlace: https://github.com/btesser/angular-global-injector
Así es como se vería un uso estándar.
1) Incluye tus fuentes 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) Inyectar dependencias
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
Consulte aquí para plnkr: http://plnkr.co/edit/0hWvNbrHpLO1l7rpvJkZ ?
var Ratio = require("lb-ratio");
esta instrucción solo es necesaria para los archivos del servidor node.js. Los archivos angularjs residen en el navegador, por lo tanto, puedes usarlos directamente.
Ratio.parse( 12.12121212121212 ).simplify().toString();
Como VtoCorleone ya había mencionado cuando lo hizo
<script type="text/javascript" src="js/ratio.js"></script>
La relación de la variable quedó vinculada a su alcance global y no necesita hacer nada especial para usarla.