Pertanyaan Sertakan Perpustakaan Javascript pihak ke-3 ke dalam aplikasi AngularJS


Saya mencoba memasukkan pustaka javascript (sebenarnya, handfull) ke dalam aplikasi AngularJS saya. Sejauh ini, saya sedang membangun versi dipreteli dari aplikasi ini, tanpa desain. Ini hanya tentang fungsi dan pemrosesan data pada titik ini.

Ini adalah perpustakaan javascript pertama yang saya coba tambahkan ke aplikasi AngularJS saya: https://github.com/LarryBattle/Ratio.js

Pada awalnya, saya mencoba untuk memasukkannya ke dalam file HTML saya menggunakan tag skrip src, tetapi ketika saya mencoba menggunakannya di dalam pengontrol saya, saya menerima kesalahan ini: ReferenceError: require tidak didefinisikan

Saya telah membaca bahwa yang terbaik adalah mengubah pustaka javascript menjadi layanan atau arahan atau bahkan filter ketika menggunakan AngularJS. Adakah yang bisa memberikan wawasan tentang cara terbaik untuk melakukan ini? Atau mungkin beberapa tutorial yang relevan? Saya belum dapat menemukan satu yang cukup sederhana untuk diterapkan pada kebutuhan saya. Adakah yang bisa membantu atau memberikan beberapa arahan dengan ini? Inilah kode saya sejauh ini:

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

});

Saya benar-benar akan menghargai jika ada yang bisa membantu mengarahkan saya tentang cara menyertakan perpustakaan javascript pihak ke-3 ke dalam aplikasi AngularJS saya. Saya ingin dapat menambahkannya sebagai ketergantungan pada aplikasi tertentu, sehingga saya dapat menggunakan kembali fitur ini di aplikasi lain. Terima kasih sebelumnya!


30
2018-02-04 17:19


asal


Jawaban:


Komentar keluar var Ratio = require("lb-ratio") dan seharusnya berhasil.

Saat Anda memasukkan skrip, Rasio sudah ada di lingkup global Anda (jendela, bukan pengontrol Anda).


8
2018-02-04 17:29



Saya telah membuat alat yang secara otomatis mengkonversi pustaka yang mendukung RequireJS / Almond ke injeksi sudut. Ini disebut injector global sudut dan tersedia di github. Berikut tautannya: https://github.com/btesser/angular-global-injector

Inilah yang akan terlihat seperti penggunaan standar.

1) Sertakan sumber js Anda

<!-- 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) Sisipkan dependensi

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

Lihat di sini untuk plnkr: http://plnkr.co/edit/0hWvNbrHpLO1l7rpvJkZ?


3
2017-11-26 09:13



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

instruksi ini diperlukan hanya untuk file server node.js. file angularjs berada di browser sehingga Anda dapat langsung menggunakannya.

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

Seperti VtoCorleone sudah sebutkan ketika Anda melakukannya

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

Rasio variabel terikat pada lingkup global Anda dan Anda tidak perlu melakukan sesuatu yang khusus untuk menggunakannya.


2
2018-02-04 17:36