Angular JS and external libraries

Question

I have a third party JavaScript library (not Angular) and I would like to use its methods/objects from Angular.

I know I can place a <script type="text/javascript"> into an angular HTML view and use those methods there but that's really ugly.

How else could this be done?

include the library in your index.html before the <script link to angular and it should be available — Cathal
– Cathal, Commented Nov 12, 2014 at 16:42
+1 Cathal. Besides, is that a public librairie? If it is, consider checking out if an Angular module is available. — Nicolas
– Nicolas, Commented Nov 12, 2014 at 16:44
It's Braintree library (braintreepayments.com/docs/javascript) and they hasn't an Angular module. I tried to put it before anything else but I don't know how to register it as Angular Module/Dependency and to use it on a controller for example. — michelem
– michelem, Commented Nov 12, 2014 at 16:50
Well, you could wrap it inside a angular module, but then it wouldn't really be global. As Cathal says, just include it before including Angular and you should be fine. — SoluableNonagon
– SoluableNonagon, Commented Nov 12, 2014 at 16:58

michelem · Accepted Answer · 2016-09-14 12:53:02Z

10

Oh well, I found it, just attach to the $window and you are done.

As written here: https://developers.braintreepayments.com/javascript+node/sdk/client/setup

"The SDK will appear as braintree on the global window object."

So from your controller (for example) you can simply use $window.braintree and you got everything you need from Braintree client library.

To load the Dropin you can simply use this:

angular.module('app').controller('YourController', ['$scope', '$window',
    function ($scope, $window) {

        $window.braintree.setup('CLIENTTOKEN', 'dropin', {
            container: 'dropin'
        });

    }
]);

edited Sep 14, 2016 at 12:53

answered Nov 13, 2014 at 8:57

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

igrossiter Over a year ago

the link provided changed

Community · Accepted Answer · 2017-05-23 12:18:20Z

5

Include it before Angular and you should be fine

<script type="text/javascript" src="braintree.js">
<script type="text/javascript" src="angular.js">

Using it with angular should not be a problem.

Can you create a Plunker or JSFiddle of a simple problem?

Sample answer of how to use the two together: Encrypting credit card details using AngularJS in Braintree

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Nov 12, 2014 at 17:00

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Collectives™ on Stack Overflow

Angular JS and external libraries

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related