Search code examples
javascriptangularjsbraintree

How to include external javascript in angular template?

I have a page called index.html with a form that relies on an external javascript:

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
var clientToken = removed
braintree.setup(
          // Replace this with a client token from your server
          clientToken,
          "dropin", {
            container: "payment-form",
            form: "checkout",
          });
</script>

Before integrating this page with angular, I tested to see that it works, but now that I have integrated this page as an angular state: $stateProvider

 .state('billing', {
        url: '/billing',
        views: {
            'main': {
                controller: 'BillingController as billingCtrl',
                templateUrl: '/billing/index.html'
            }
        }
    });

I receive these errors when routing to said page:

enter image description here

I would like to avoid relying on 3rd party libraries like braintree-angular. It seems to me that angular template does not recognize tags since they are used to bind the controllers to the html.

Solution

  • There was an index.html being generated in the build process that includes all the assets including js/controller files. The answer to include external js file was just to insert my script tag into the index.html file that includes all the dependencies.