Angular에 타사 Javascript 라이브러리 포함JS 앱
javascript 라이브러리(실제로 핸드풀)를 Angular에 포함시키려고 합니다.JS앱입니다.지금까지 저는 디자인 없이 이 앱을 정리한 버전을 만들고 있습니다.현시점에서는 기능과 데이터 처리가 중요합니다.
이것은 나의 Angular에 추가하려는 첫 번째 javascript 라이브러리입니다.JS 앱: https://github.com/LarryBattle/Ratio.js
처음에는 스크립트 src 태그를 사용하여 HTML 파일에 포함하려고 했지만 컨트롤러 내에서 사용하려고 하면 ReferenceError: require is not defined라는 오류가 나타납니다.
저는 AngularJs를 사용할 때 Javascript 라이브러리를 서비스나 디렉티브로 변환하거나 필터로 변환하는 것이 가장 좋다고 읽었습니다.이를 위한 가장 좋은 방법에 대한 통찰력을 제공할 수 있는 사람이 있습니까?아니면 관련 튜토리얼이 있을까요?제 요구에 맞는 간단한 것을 찾을 수 없었습니다.누가 도와주거나 어떤 방향을 제시해 줄 수 있나요?지금까지의 코드는 다음과 같습니다.
<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 라이브러리를 Angular에 포함시키는 방법을 알려주시면 감사하겠습니다.JS 앱입니다. 특정 앱에 종속된 기능을 추가하여 다른 앱에서 이 기능을 재사용할 수 있도록 하고 싶습니다.잘 부탁드립니다!
코멘트 아웃var Ratio = require("lb-ratio")효과가 있을 거야
스크립트를 포함할 경우 비율은 이미 (컨트롤러가 아닌 창의) 글로벌 스코프에 있습니다.
Require를 지원하는 라이브러리를 자동으로 변환하는 도구를 만들었습니다.JS/Amond를 각도 주입 장치로 변환합니다.각구 주사기라고 불리며 기허브에서 사용할 수 있습니다.다음 링크입니다.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 를 참조해 주세요.
var Ratio = require("lb-ratio");
이 명령어는 node.displus 서버 파일에만 필요합니다.angularjs 파일은 브라우저에 상주하므로 직접 사용할 수 있습니다.
Ratio.parse( 12.12121212121212 ).simplify().toString();
VtoColleone이 이미 언급했듯이
<script type="text/javascript" src="js/ratio.js"></script>
[ Variable Ratio ]는 글로벌 스코프에 바인드 되어 있기 때문에 특별한 조작을 하지 않아도 사용할 수 있습니다.
언급URL : https://stackoverflow.com/questions/21559123/include-3rd-party-javascript-libraries-into-an-angularjs-app
'programing' 카테고리의 다른 글
| AngularJs에서 CORS를 활성화하는 방법 (0) | 2023.02.11 |
|---|---|
| 테마 활성화 시 '주요 메뉴' 위치 메뉴 자동 설정 (0) | 2023.02.11 |
| 중첩된 개체에 대한 Javax 유효성 검사 - 작동하지 않음 (0) | 2023.02.11 |
| Wordpress에서 발췌한 태그 제거가 작동하지 않음 (0) | 2023.02.07 |
| 패브릭 JS _ updateObjectsCoords 대체 ? (1.7.9로의 이행 문제) (0) | 2023.02.07 |