How to Load External JS Scripts Dynamically in AngularJS ? Last Updated : 01 Aug, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The task is to load a JS code either from a CDN or JS file stored in the system dynamically at runtime in AngularJS i.e. JavaScript code should be loaded dynamically. For example, on a button press or on some event.Whenever we want to load the script file we would have to create an element of type “script” using document.createElement. We would then specify its src attribute to be the location of the script either CDN or a local js file. Once that’s done, we will have to append the tag to an HTML element that’s already existing in the DOM. For example, the head element.Syntax:const node = document.createElement('script');node.src = 'SCRIPT_FILE_OR_URL_HERE'node.type = 'text/javascript';document.getElementsByTagName('head')[0].appendChild(node);Example 1: In this example, we are loading a load.js file from file system dynamically on component load. app.component.html <div style="text-align:center;"> <h1 style="color: green;"> GeeksForGeeks </h1> </div> app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Load script GFG'; constructor() { this.loadScripts(); } // Method to dynamically load JavaScript loadScripts() { // This array contains all the files/CDNs const dynamicScripts = [ 'assets/load.js' ]; for (let i = 0; i < dynamicScripts.length; i++) { const node = document.createElement('script'); node.src = dynamicScripts[i]; node.type = 'text/javascript'; node.async = false; document.getElementsByTagName('head')[0].appendChild(node); } } } load.js alert('load js has been loaded'); Output: As soon as the app.component loads, the script loads as well and displays the alert window. Example 2: In this example, we will load the load.js script on button click. app.component.html <div style="text-align:center;"> <h1 style="color: green;"> GeeksForGeeks </h1> <button (click)="loadScripts($event)"> Click me to load JS </button> </div> app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Load script GFG'; constructor() { } loadScripts($event) { const dynamicScripts = [ 'assets/load.js' ]; for (let i = 0; i < dynamicScripts.length; i++) { const node = document.createElement('script'); node.src = dynamicScripts[i]; node.type = 'text/javascript'; node.async = false; document.getElementsByTagName('head')[0].appendChild(node); } } } load.js alert('load js has been loaded'); Output: As the button is pressed, the JS file loads. Comment More infoAdvertise with us Next Article How to load CSS and JS files dynamically ? T thvardhan Follow Improve Article Tags : AngularJS HTML-Misc AngularJS-Misc Similar Reads How to load CSS and JS files dynamically ? Generally, the CSS and JS files are included statically with HTML code. It means they are written in the script or the link tag in the  HTML code. But this slows down the execution as a bulk of code is loaded unnecessarily. It may or may not use the functionality related to that DOM element. So dyna 5 min read How to Dynamically Load JS inside JS? In JavaScript, dynamically loading scripts allows the inclusion of external JavaScript files only when needed, improving performance and efficiency. Instead of using static imports, scripts can be loaded conditionally at runtime. ApproachES6 provides us with a construct import(), which provides the 2 min read How to create nested controllers in Angular.js ? A controller in AngularJS is a JavaScript object created with the help of a JavaScript object constructor. A controller can contain properties and functions. Controllers are used for controlling the application data of an AngularJS application. In this article, we will see the nested controllers in 4 min read How to Get Page Load Time in Angular? In web development, performance is the most important thing. Users expect fast and responsive web applications and even minor delays can impact user experience and satisfaction. Monitoring page load time is important for identifying performance bottlenecks and optimizing the user experience. In this 5 min read How to access the Scope from outside JS Function in AngularJS ? In the AngularJS application, we generally need to access the scope from the outside JS function. This can be done using the global scope object like $rootScope or the AngularJS services. Accessing the scope from the outside of JS functions is to enable the manipulation of data in the scope of the a 4 min read How to execute AngularJS controller function on page load ? In this article, we will see how to execute/call a JS function on page load using AngularJS. This function can be used to perform initialization. Calling a function or initializing a single value on page load in AngularJS is quite easy. AngularJS provides us with a dedicated directive for this speci 2 min read Like