web-dev-qa-db-ja.com

npmモジュールをAngularで使用するにはどうすればよいですか？

braintree-web npmモジュールをAngularJSで使用しようとしています。これは、次のコマンドを使用してテンプレートに含めるとエラーが発生するためです。

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>

コントローラー「BillingController」を使用してテンプレートにルーティングするために使用するbillingという状態があります。 braintree-webとmyscript.jsを挿入できるようにしたい：

<script>
  braintree.setup(
          // Replace this with a client token from your server
          clientToken,
          "dropin", {
            container: "payment-form",
            form: "checkout",
          });
</script>

助けてください。これどうやってするの？

[〜＃〜]編集[〜＃〜]：

現在、これは私の一番下に配置されています

<!-- braintree sdk -->
    <script src="https://js.braintreegateway.com/v2/braintree.js"></script>

    <!-- braintree setup -->
    <script>
      var clientToken = removed;
      braintree.setup(
          // Replace this with a client token from your server
          clientToken,
          "dropin", {
            container: "payment-form",
            form: "checkout",
          });
    </script>

これらは私が得ているエラーです：

enter image description here

ブレーンツリースクリプトがロードされていないように見えます（？）

助けてくれてありがとう

javascriptangularjsnode.jsbraintree
8
c0de

このURLからbraintree-webを使用しますか？ https://github.com/jeffcarp/braintree-angular

これはAngular専用のモジュールです。次に、app.jsのようなファイルを作成し、次のコードを貼り付ける必要があります。

var yourApp = angular
  .module('yourApp', ['braintree-angular'])
  .constant('clientTokenPath', '/path-or-url-to-your-client-token');

例えば：

(function () {
    'use strict';

    var app = angular.module('yourModuleName', [
        'braintree-angular'
    ]);

    app.constant('clientTokenPath', '/path-or-url-to-your-client-token');

    app.config(['$interpolateProvider', function ($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    }]);


}());

Controller.jsは次のようになります。

(function() {
    'use strict';

    angular
            .module('yourModuleName')
            .controller('DashboardCtrl', DashboardCtrl);

    DashboardCtrl.$inject = ['$scope', '$braintree'];

    function DashboardCtrl($scope, $braintree) {

        var client;
        $scope.creditCard = {
            number: '',
            expirationDate: ''
        };

        var startup = function() {
            $braintree.getClientToken().success(function(token) {
                client = new $braintree.api.Client({
                    clientToken: token
                });
            });
        };

        $scope.payButtonClicked = function() {

            // - Validate $scope.creditCard
            // - Make sure client is ready to use

            client.tokenizeCard({
                number: $scope.creditCard.number,
                expirationDate: $scope.creditCard.expirationDate
            }, function (err, nonce) {

                // - Send nonce to your server (e.g. to make a transaction)

            });
        };

        startup();

    }


}());

app.jsは、残りのコントローラー、ファクトリ、サービスの前、angular.jsおよびbraintree.jsライブラリの後に含める必要があることに注意してください。

1
ssuperczynski

@ danday74を拡張するために、このようなbrowserifyを使用しています。

一言で言えば、これは私たちがそれを使用する方法です。

したがって、 Browserify クライアントコードにNodeJsスタイルrequireを使用できるnodejsCLIを認識していない場合。これにより、適切に構造化されたモジュラークライアントコードを記述し、それを単一のファイルに組み込んでページに含めることができます。もう1つの利点は、すべてのファイルがその単一のファイルにスコープされることです。したがって、偶発的なグローバルはもうありません（厳密モードを使用していない場合）。ファイルから公開されるのは、明示的にエクスポートするものだけです。

CLIであるため、コマンドラインで使用できるようにグローバルにインストールする必要があります。

npm install -g browserify

次に、コマンドラインから簡単に実行するには、

browserify main.js > output.js

あなたのページにそれを含めてください

<script src="output.js"></script>

リンティングやサスのような他のことをするのと同じように、私たちはpackage.jsonでそれを個人的にエイリアスします。ここに例があります

{
  "name": "some app",
  "scripts": {
    "build:js": "browserify src/index.js > dist/built.js",
    "build:css": "node-sass sass/main.scss dist/built.css",
    "build": "npm run build:js && npm run build:css"
  }
}

npm run buildを実行するだけで、sassとjsが構築されます。

Browserifyが行うことは、ファイルを再帰的にトラバースしてrequire呼び出しを探し、次にそのファイルに移動して繰り返します。検索パスの一部として、node_modulesフォルダーを検索します。これが、npmを介してインストールされたモジュールを含めることができる理由です。

これが小さな例です

//In a file called data.js located in same folder as main.js
module.exports = [1, 2, 2, 3, 4, 5, 5, 6];


//in a file called main.js
var unique = require('uniq'),
    data = require('./data');

console.log(unique(data)); //[1, 2, 3, 4, 5, 6]

これが行うことは、最初にNPMを介してインストールされたuniqと呼ばれるモジュールを探すことです（相対パスまたは絶対パスがないため）。次に、同じフォルダにあるdata.jsという独自のファイルを探します。

いつこれをbrowserify main.js > out.jsで構築しますか

これがbrowserifyとは何か、そしてクライアントにNPMモジュールを含めたいときに構造を管理することがどのように役立つかを説明するのに役立つことを願っています。特にbrowserifyを使用しない大規模なアプリケーションがある場合、これがすべてに適しているわけではないことは承知していますが、今ではこのようなビルドツールを使用してモジュラーコードを記述しています。

0
ste2425

私はあなたの最高の希望はbrowserifyだと思います。自分で試したことはありませんが、その背後にある考え方は、NodeJSコードをブラウザーが理解できる形式に変換することだと思います。

npm i braintree
npm i browserify

たぶん小さなテストを試して、それが機能するかどうかを確認しますか？

0
danday74