如何在 Angular 中使用 npm 模块？

Question

我正在尝试将braintree-web npm模块与AngularJS一起使用，因为当我尝试将其包含在模板中时出现错误：

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

我有一个名为 billing 的状态，我用它通过控制器“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>

请帮忙。 我怎样才能做到这一点？

编辑：

目前，这是放置在我的底部

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

这些是我得到的错误：

在我看来，braintree 脚本没有加载（？）

谢谢您的帮助

Answer 1

你使用这个网址braintree-web吗？ 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 2

我认为你最好的希望是browserify。 我自己从未尝试过，但我认为它背后的想法是将 NodeJS 代码转换为浏览器可以理解的格式。

npm i braintree
npm i browserify

也许尝试一个小测试，看看它是否有效？

Answer 3

为了扩展@danday74，我们在工作中使用了这样的browserify。

简而言之，这就是我们使用它的方式。

所以Browserify如果你不知道它是一个 nodejs CLI，它允许你使用require风格的客户端代码。 它允许您编写结构良好的模块化客户端代码并将其构建到单个文件中以包含到您的页面中。 另一个好处是每个文件都只限于该单个文件。 所以没有更多的意外全局（如果你不使用严格模式）。 从文件中公开的唯一内容是您明确导出的内容。

因为它是一个 CLI，所以您必须全局安装它，以便您可以在命令行上使用它。

npm install -g browserify

然后简单地从命令行运行它

browserify main.js > output.js

并将其包含在您的页面上

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

我们个人在package.json中为它起别名，就像我们做 linting 和 sass 之类的其他事情一样。 这是一个例子

{
  "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 的大型应用程序，但现在我使用这样的构建工具来编写模块化代码，我永远不会去 bacl。

Answer 4

在控制台中执行： npm install braintree --save

然后在你的javascript require('braintree')中，现在你将拥有braintree函数