Làm thế nào để sử dụng mô-đun npm trong góc?

Question

Tôi cố gắng để sử dụng braintree-web mô-đun NPM với AngularJS kể từ khi tôi nhận được lỗi khi tôi cố gắng và bao gồm nó trong mẫu với:

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

Tôi có một tình trạng gọi là thanh toán mà tôi sử dụng để định tuyến để mẫu của tôi với điều khiển, 'BillingController'. Tôi muốn có thể tiêm braintree-web và myscript.js:

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

Xin vui lòng trợ giúp. tôi có thể làm cái này như thế nào?

EDIT:

Hiện nay, điều này được đặt phía dưới của

<!-- 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> 

của tôi Đây là những lỗi tôi nhận được:

Trông với tôi giống như tập lệnh braintree không tải (?)

Thanks for the help

Answer 1

Trong giao diện điều khiển làm: NPM cài đặt braintree --save

sau đó trong javascript của bạn yêu cầu ('braintree'), bây giờ bạn sẽ có các chức năng braintree sẵn

Answer 2

Bạn có sử dụng braintree-web từ url này? https://github.com/jeffcarp/braintree-angular

Đây là mô-đun đặc biệt cho góc cạnh. Sau đó, bạn nên tạo tập tin như app.js và dán đoạn mã này:

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

Ví dụ:

(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 của bạn có thể là như thế này:

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

    } 


}()); 

ý rằng app.js nên bao gồm trước khi phần còn lại của bộ điều khiển, nhà máy và dịch vụ của bạn, và sau khi bạn thư viện angular.js và braintree.js.

Answer 3

Tôi nghĩ rằng hy vọng tốt nhất của bạn là trình duyệt. Tôi chưa bao giờ thử nó nhưng tôi nghĩ ý tưởng đằng sau nó là chuyển đổi mã NodeJS thành một định dạng mà trình duyệt có thể hiểu được.

npm i braintree 
npm i browserify 

Có thể thử một thử nghiệm nhỏ và xem thử nghiệm có hoạt động không?

Answer 4

Để mở rộng vào @ danday74, chúng tôi sử dụng browserify như thế này tại nơi làm việc.

Tóm lại, đây là cách chúng tôi sử dụng nó.

Vì vậy, Browserify nếu bạn không biết nút CLI của nút này cho phép bạn sử dụng kiểu NodeJs require cho mã máy khách. Nó cho phép bạn viết mã khách hàng có cấu trúc và mô đun tốt và xây dựng nó thành một tệp duy nhất để đưa vào trang của bạn. Một lợi ích khác là mỗi tập tin được dàn xếp vào tập tin đó.Vì vậy, không có nhiều tình cờ của toàn cầu (nếu bạn không sử dụng chế độ nghiêm ngặt). Những điều duy nhất được hiển thị từ tệp của bạn là những thứ bạn xuất một cách rõ ràng.

Vì CLI của nó, bạn phải cài đặt nó trên toàn cầu để bạn có thể sử dụng nó trên dòng lệnh.

npm install -g browserify 

Sau đó, để chạy nó chỉ đơn giản là từ dòng lệnh làm

browserify main.js > output.js 

và bao gồm mà trên trang của bạn

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

Chúng tôi đích thân bí danh trong package.json như chúng ta làm những việc khác của chúng tôi như linting và sass. đây là một ví dụ

{ 
    "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" 
    } 
} 

Bây giờ chúng tôi chỉ chạy npm run build và nó sẽ xây dựng sass và js.

Thao tác duyệt sẽ thực hiện là đệ quy truyền tệp của bạn tìm kiếm các cuộc gọi require, sau đó nó sẽ chuyển vào tệp đó và lặp lại. Là một phần của đường dẫn tìm kiếm của nó, nó sẽ tìm trong thư mục node_modules của bạn. Đây là lý do tại sao bạn có thể bao gồm các mô-đun được cài đặt thông qua npm.

Dưới đây là một ví dụ nhỏ

//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] 

Điều này sẽ làm cái nhìn đầu tiên cho một module gọi là uniq cài đặt thông qua NPM là (như không có đường dẫn tương đối hoặc tuyệt đối). Sau đó, nó sẽ tìm kiếm tệp riêng của chúng tôi có tên là data.js nằm trong cùng một thư mục.

Khi sẽ xây dựng này với browserify main.js > out.js

Tôi hy vọng điều này giúp giải thích những gì browserify là gì và làm thế nào nó có thể hữu ích để quản lý bạn cấu trúc khi bạn muốn bao gồm NPM module trong ứng dụng. Tôi biết điều này sẽ không phù hợp cho tất cả đặc biệt là nếu bạn có một ứng dụng lớn mà không sử dụng trình duyệt nhưng bây giờ tôi sử dụng một công cụ xây dựng như thế này để viết mã mô-đun tôi sẽ không bao giờ đi bacl.