CODEWITHSUNDEEP
javascripthtmlangularjs
FlyingCat
FlyingCat

Reputation: 14250

How to load JS file dynamically in my app?

I am trying to load an external JS file based dynamically in my JS.

I have created a service to do it 

angular.module('myApp').service('testService', function($http) {
        var prefix;
        //codes to determine what prefix is.
        // It could be http://partnerapp.com/test or http://linkapp.com/test/libs/...etc
        var url = prefix + '/js/test.js';
        return $http({
                method: 'GET',
                url: url
        }); //load JS file
});

in my main controller

angular.module('myApp').controller('myController', function($scope, testService){
    //I am not sure how to load those js here. 
})

Is there anyway I can load them in my case? Thanks a lot!

Upvotes: 0

Views: 96

Answers (2)

Mihail Alexe
Mihail Alexe

Reputation: 340

I don't have much experience with angular.js, but except eval() I see only one other solution an it requires jQuery (if you haven't done this already). I'm referring to jQuery.getScript(url, callback).

This means you'll have to do something like this:

var url = prefix + '/js/test.js';
$.getScript(url); //load JS file and execute script

Callback is optional and it's executed after the script is loaded and interpreted.

This is something I've used and I can guarantee will work. another solution is to create a script tag with src= and append it to the bottom of the page. I haven't tested it yet so i'm not 100% sure of its success.

Upvotes: 1

Boris Charpentier
Boris Charpentier

Reputation: 3545

Something like : 

angular.module('myApp').controller('myController', function($scope, testService){
    testService.then(function(data){
        //you can console.log(data) and after maybe eval it ?
        eval(data);//eval can be harmfull
    }, function(error){

   });
});

Upvotes: 0

Related Questions