javascript – 如何在角度使用npm模块?

栏目: 编程语言 · AngularJS · 发布时间: 6年前

内容简介:翻译自:https://stackoverflow.com/questions/34329517/how-to-use-npm-module-in-angular
我正在尝试使用带有AngularJS的 braintree-web

npm模块,因为当我尝试将其包含在模板中时出现错误:

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

这些是我得到的错误:

javascript – 如何在角度使用npm模块?

看起来像braintree脚本没有加载(?)

谢谢您的帮助

你是否使用这个网址的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库之后.

翻译自:https://stackoverflow.com/questions/34329517/how-to-use-npm-module-in-angular


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

剑指Offer

剑指Offer

何海涛 / 电子工业出版社 / 2014-6-1 / CNY 55.00

《剑指Offer——名企面试官精讲典型编程题(纪念版)》是为纪念本书英文版全球发行而推出的特殊版本,在原版基础上新增大量本书英文版中的精选题目,系统整理基础知识、代码质量、解题思路、优化效率和综合能力这5个面试要点。全书分为8章,主要包括面试流程:讨论面试每一环节需要注意的问题;面试需要的基础知识:从编程语言、数据结构及算法三方面总结程序员面试知识点;高质量代码:讨论影响代码质量的3个要素(规范性......一起来看看 《剑指Offer》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试