Menu
I'm trying to include a javascript libraries (actually, a handfull) into my AngularJS app. So far, I am building a stripped down version of this app, with no design. It's just all about functionality and data processing at this point.
This is the first javascript library I'm attempting to add into my AngularJS app: https://github.com/LarryBattle/Ratio.js
At first, I tried to simply include it into my HTML file using script src tag, but when I try to use it inside my controller, I receive this error: ReferenceError: require is not defined
I've read that it's best to convert javascript libraries into services or directives or even filters when using AngularJS. Can anyone provide any insight on the best way to do this? Or perhaps some relevant tutorials? I have not been able to find one that is simple enough to apply to my needs. Can anyone help or provide some direction with this? Here's my code so far:
<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(); }); I would really be appreciative if anyone could help direct me on how to include 3rd-party javascript libraries into my AngularJS app. I'd like to be able to add it as a dependency into certain apps, that way I could reuse this feature in other apps. Thanks in advance!
866
To use the JavaScript library in an Angular project, install the library via npm and check for its type declaration file. Install the type declaration file from @types/<library-name>, if it is not a part of the source code. import the library in your component and start using it.
You need to execute a separate java-script function. For an angular application it is not a proper way to run javascript out of scope of angular. It will ensure that the external function exist before starting app. It will add more flexibility and control over the java script function in angular.
Third-party JavaScript applications are self-contained components, typically small scripts or widgets, that add functionality to websites. As the name implies, they're offered by independent organizations, with code and asset files served from a remote web address.
write directives in AngularJS and in the link section of those directives you can include jQuery for DOM manipulation. Keep in mind that AngularJS uses jQuery lite so a lot of what jQuery does is already built into Angular.
Comment out var Ratio = require("lb-ratio") and it should work.
When you include the script, Ratio is already on your global scope (of the window, not your controller).
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
