How to load JS file dynamically in my app?

Question

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!

Mihail Alexe · Accepted Answer · 2015-01-15 21:15:36Z

1

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.

edited Jan 15, 2015 at 21:15

answered Jan 15, 2015 at 20:28

Mihail Alexe

3402 silver badges9 bronze badges

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

2 Comments

FlyingCat Over a year ago

I am getting 414 request-url too large error in the console. Anyway to fix it? +1

Mihail Alexe Over a year ago

Can you do a "console.log(url, url.length)" and see what are the values? Or in the network tab of the chrome inspector, can you check the URL? What programming language did you use for the server and what do you host it in?

Boris Charpentier · Accepted Answer · 2015-01-15 20:09:56Z

0

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){

   });
});

answered Jan 15, 2015 at 20:09

Boris Charpentier

3,55328 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to load JS file dynamically in my app?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related