Get the Angular script that supports dynamic src downloading by utilizing the unique features

Question

Get the Angular script that supports dynamic src downloading by utilizing the unique features

In Angular, there are methods available to dynamically load templates with variable names using ng-include. It's possible to include inline JS and CSS in the partial without any issues, but when it comes to downloading scripts with dynamic URLs, things get a bit tricky. Our requirement was to download scripts relative to the path of the .html partial that called them (for example, having a directory with the necessary files to include, and wanting the .html file to specify its required scripts).

Unlike the scenario discussed in AngularJS: How to make angular load script inside ng-include?, where a static source script is loaded in a dynamically included partial, I am looking to dynamically create the source for a script within a dynamically included partial, either through interpolation or by executing it using an Angular function.

For instance, if I'm loading a partial into my application dynamically from a directory that contains additional resources the partial depends on, instead of downloading each file separately, I want that logic to reside within the partial itself. Knowing that the browser cannot handle this task, I'll utilize ng-src and let Angular handle the heavy lifting. Instead of manually parsing every script src tag in relation to the partial, I'll define a function to generate the URLs as follows:

<script type="application/javascript" ng-src="prefixUrl('myUrl.js')"></script>

So how can I accomplish this effectively?

javascript angularjs lazy-loading

Answer 1

Answer №1

Click here for the gist

Keep in mind that this will replace the default script directive in angular, which searches for templates in your script tags. You have the option to rename the directive, but we opted not to do so (since we were injecting these services/directives into a newly bootstrapped app on the page).

This method assumes you have a way to download scripts dynamically. We are using $script, but jquery or any other similar tool would also suffice, just make sure to update the service accordingly.

Instead of the current setup, which involves employing a function prefixUrl, you can easily modify the script directive to directly prefix the URL itself (using attrs.ngSrc) without depending on the function.

An event called 'WidgetContentLoaded' (easily customizable) has been included to trigger after all the scripts have finished downloading.

Javascript

angular.module('myApp')
.run(function ($rootScope) {
    $rootScope.mixin = function(urls) {

        if (angular.isUndefined(urls) || urls == '') {
            return $q.when('no mixin url');
        }

        var deferred = $q.defer();

        //timeout our requests at 5 seconds
        var timeoutPromise = $timeout(function() { deferred.reject(null) }, 5000);

        //assuming that $script or some other downloading mechanism is available
        $script(urls, function() {
            $timeout.cancel(timeoutPromise);
            $rootScope.$safeApply(deferred.resolve(urls));
        });

        return deferred.promise;
    };

    $document.on('WidgetContentLoaded', function () {
        //add more interesting logic here...this is like $(document).ready() but for your included partial
        console.log('yay we loaded your scripts');
    });

})
.service('lazyScripts', ['$q', '$timeout', '$document', function ($q, $timeout, $document) {

    var promises = [];

    this.register = function (url) {
        promises.push($clotho.extensions.mixin(url));
    };

    $timeout(function() {
        $q.all(promises).then(function() {
            //broadcast event
            $document.triggerHandler('WidgetContentLoaded');
        })
    });
}])
.directive('script', function($parse, $rootScope) {
    return {
        restrict: 'E',
        terminal: true,
        compile: function(element, attr) {
            if (attr.ngSrc) {
                var scriptUrl = $parse(attr.ngSrc)($rootScope);
                 lazyScripts.register(scriptUrl);
            }
        }
    };
});

Your HTML

<script type="application/javascript" ng-src="prefixUrl('inlineCalledScript.js')"></script>

<style type="text/css">
    .greenListItem {
        color: #44bb44;
    }
</style>

<ul>
    <li>This is a dynamically loaded template.</li>
    <li>Kindly note that Angular must already be bootstrapped with the new script directive mentioned above. This will not function properly in your index.html file</li>
    <li class="greenListItem">Inline CSS is effective!</li>
</ul>

<!-- this should work seamlessly -->
<div ng-include="prefixUrl('anotherPartial.html')"></div>

Answer 2

Click here for the gist

Keep in mind that this will replace the default script directive in angular, which searches for templates in your script tags. You have the option to rename the directive, but we opted not to do so (since we were injecting these services/directives into a newly bootstrapped app on the page).

This method assumes you have a way to download scripts dynamically. We are using $script, but jquery or any other similar tool would also suffice, just make sure to update the service accordingly.

Instead of the current setup, which involves employing a function prefixUrl, you can easily modify the script directive to directly prefix the URL itself (using attrs.ngSrc) without depending on the function.

An event called 'WidgetContentLoaded' (easily customizable) has been included to trigger after all the scripts have finished downloading.

Javascript

angular.module('myApp')
.run(function ($rootScope) {
    $rootScope.mixin = function(urls) {

        if (angular.isUndefined(urls) || urls == '') {
            return $q.when('no mixin url');
        }

        var deferred = $q.defer();

        //timeout our requests at 5 seconds
        var timeoutPromise = $timeout(function() { deferred.reject(null) }, 5000);

        //assuming that $script or some other downloading mechanism is available
        $script(urls, function() {
            $timeout.cancel(timeoutPromise);
            $rootScope.$safeApply(deferred.resolve(urls));
        });

        return deferred.promise;
    };

    $document.on('WidgetContentLoaded', function () {
        //add more interesting logic here...this is like $(document).ready() but for your included partial
        console.log('yay we loaded your scripts');
    });

})
.service('lazyScripts', ['$q', '$timeout', '$document', function ($q, $timeout, $document) {

    var promises = [];

    this.register = function (url) {
        promises.push($clotho.extensions.mixin(url));
    };

    $timeout(function() {
        $q.all(promises).then(function() {
            //broadcast event
            $document.triggerHandler('WidgetContentLoaded');
        })
    });
}])
.directive('script', function($parse, $rootScope) {
    return {
        restrict: 'E',
        terminal: true,
        compile: function(element, attr) {
            if (attr.ngSrc) {
                var scriptUrl = $parse(attr.ngSrc)($rootScope);
                 lazyScripts.register(scriptUrl);
            }
        }
    };
});

Your HTML

<script type="application/javascript" ng-src="prefixUrl('inlineCalledScript.js')"></script>

<style type="text/css">
    .greenListItem {
        color: #44bb44;
    }
</style>

<ul>
    <li>This is a dynamically loaded template.</li>
    <li>Kindly note that Angular must already be bootstrapped with the new script directive mentioned above. This will not function properly in your index.html file</li>
    <li class="greenListItem">Inline CSS is effective!</li>
</ul>

<!-- this should work seamlessly -->
<div ng-include="prefixUrl('anotherPartial.html')"></div>

Get the Angular script that supports dynamic src downloading by utilizing the unique features

Answer №1

Similar questions

Sending asynchronous data to a child component in Angular 2

Obtaining JSON Data Using WinJS.xhr():

How to deactivate the mobile hardware back button functionality in Ionic 2

I'm having trouble executing the straightforward code I discovered on GitHub

Regularly check in with the server via ajax calls

What is the reason for me encountering an error message stating "Access-Control-Allow-Origin" does not allow this origin?

Creating a JavaScript script to implement a CAPTCHA feature on Google Forms

Looking for a different option to Prototype's Event.observe?

Issue with loading dynamic content on a webpage using HTML and JavaScript through AJAX

Headers cannot be set once they have already been sent in an express js application

Using Google App Script for Slides to center-align text within a text box

Unable to retrieve req.files using multer from the req object

Checking if the view should be shown based on the outcome of an ajax request when the route changes in AngularJS

Is there a way to properly access and interpret a .log extension file within a React component?

"Retrieve a variable from the code-behind file and use it in the ASPX

Implementing image max-width and maintaining aspect ratios for responsiveness

Unlocking the potential of resizable bootstrap table columns in React

Discovering common elements in various arrays of objects

Adjusting the Camera in three.js

Tips for activating and setting up Bootstrap popovers