Как использовать модуль npm в угловом?

Question

Я пытаюсь использовать braintree-web НПМ модуль с AngularJS, так как я получаю ошибки, когда я пытаюсь и включить его в шаблон с:

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

У меня есть состояние называется биллинг, который я использую, чтобы направить в шаблон с контроллер, «BillingController». Я хочу, чтобы иметь возможность вводить braintree-web и myscript.js:

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

Пожалуйста, помогите. как я могу это сделать?

EDIT:

В настоящее время это помещается в нижней части моего

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

Эти ошибки я получаю:

кажется мне например, сценарий не загружается (?)

Спасибо за помощь

Answer 1

В консоли сделать: НПМ установить Брэйнтри --save

то в ваших JavaScript требуется («Брэйнтри»), теперь вы будете иметь функции Брэйнтри доступные

Answer 2

Используете ли вы braintree-web от этого url? https://github.com/jeffcarp/braintree-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.

Answer 3

Я думаю, что ваша лучшая надежда - это обозреватель. Я никогда не пробовал это сам, но я думаю, что идея заключается в преобразовании кода NodeJS в формат, который может понять браузер.

npm i braintree 
npm i browserify 

Возможно, попробуйте небольшой тест и посмотрите, работает ли он?

Answer 4

Чтобы расширить на @ danday74, мы используем для этого прокрутку как на работе.

Вкратце это то, как мы его используем.

So Browserify, если вы не знаете его CLI nodejs, который позволяет использовать код NodeJs require для кода клиента. Он позволяет писать хорошо структурированный, модульный клиентский код и встраивать его в один файл для включения в вашу страницу. Другим преимуществом является то, что каждый файл привязан к этому одиночному файлу.Таким образом, нет более случайных глобальных (если вы не используете строгий режим). Единственными вещами, открытыми из ваших файлов, являются вещи, которые вы явно экспортируете.

Потому что его 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 и он будет строить из дерзости и JS.

Какой браузер будет выполнять рекурсивно проходить ваш файл в поисках 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] 

Что это будет сделать, это первый взгляд на модуль под названием uniq установлен через НПМ (так как нет никакого относительного или абсолютного пути). Затем он ищет наш собственный файл под названием data.js, расположенный в той же папке.

Когда будет строить это с browserify main.js > out.js

Я надеюсь, что это помогает объяснить, что browserify и как это может быть полезно для управления структурировать, когда вы хотите включить NPM модули клиента. Я знаю, что это не подходит для всех, особенно если у вас есть большое приложение, которое не использует браузер, но теперь я использую инструмент построения, подобный этому, для написания модульного кода, я бы никогда не пошел на bacl.