How to use npm module in angular?

Question

I am trying to use the nint braintree-web module with AngularJS since I get errors when I try to include it in the template using

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

I have a state called billing, which I use to route to my template using the "BillingController" controller. I want to be able to enter braintree-web and myscript.js:

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

Please, help. How can i do this?

EDIT

This is currently placed at the bottom of my

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

These are the errors I get:

It seems to me that the braintree script is not loading (?)

thanks for the help

Answer 1

Are you using braintree-web from this url? https://github.com/jeffcarp/braintree-angular

This is a special module for angular. Then you must create a file like app.js and paste this code:

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

For instance:

 (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(']]'); }]); }()); 

Your controller.js might look like this:

 (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 (eg to make a transaction) }); }; startup(); } }()); 

Note that app.js must be enabled in front of the rest of your controllers, factories and services, and after you angular.js and the braintree.js library.

Answer 2

I think your best hope is a browser. I have never tried this myself, but I think the idea is to convert the NodeJS code into a format that the browser can understand.

 npm i braintree npm i browserify 

Perhaps try a little test and see if it works?

Answer 3

To deploy to @ danday74, we use this browser to work.

In short, this is how we use it.

So Browserify if you don’t know its nodejs CLI, which allows you to use the NodeJs require style for client code. It allows you to write well-structured, modular client code and embed it in a single file for inclusion in your page. Another advantage is that each file is attached to this single file. So no more random global (unless you use strict mode). The only thing that appears in your files is things that you explicitly export.

Since this is a CLI, you need to install it globally so you can use it on the command line.

 npm install -g browserify 

Then to run just from the do command line

 browserify main.js > output.js 

and indicate what is on your page

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

We personally mean that in our package.json , we do other things like linting and sass. here is an example

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

Now we just run npm run build and build sass and js.

What the browser will do is traverse your file recursively, looking for calls to require , then it will move to that file and repeat. As part of the search path, it will look in your node_modules folder. This is why you can include modules installed through npm .

Here is a small example.

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

To do this, first find the module named uniq installed via NPM (since there is no relative or absolute path). He will then search for our own file called data.js , located in the same folder.

When will this be built using browserify main.js > out.js

I hope this helps explain what a browser is, and how it can be useful for managing the structure when you want to enable npm modules in the client. I know this is not suitable for everyone, especially if you have a large application that does not use a browser, but now I use such a building tool to write modular code, I would never go to bacl.

Answer 4

In the console, run: npm install braintree --save

then in your javascript require ('braintree'), now you will have the braintree functions available