How to set script src path dynamically using Angular.js and Javascript

Question

I need one help.I need to set js/css path name dynamically uaing Angular.js/Javascript/Jquery.I am explaining my code below.

<script src="/crm/controller/productController.js" type="text/javascript"></script>

Suppose i have the above script tag.Here my path is /crm/controller/productController.js.I need to set /crm/ in my config file and i will set this path name in every script tag.In php it is happening like below.

define("USER_SITE_URL", "http://www.absclasses.com/");
<script type="text/javascript" src="<?php echo SITE_URL;?>js/jquery-1.9.1.min.js"></script>

As i am not using PHP. How it can me made using Angular.js or Javascript/Jquery.

Possible duplicate of [How do I load a javascript file dynamically?](http://stackoverflow.com/questions/5235321/how-do-i-load-a-javascript-file-dynamically) — Khalid Hussain, Dec 21 '15 at 05:58
is that because you have different versions of these files in different folders ? can you give more details about why you want to do that ? — Omar.Alani, Dec 21 '15 at 06:05
I think you don't want to write every time so for that you can add tag in side your head tag of page and after it use — ranakrunal9, Dec 21 '15 at 06:09
@ranakrunal9 : I have already tested that if i am setting the `` then i have to add like this.that was the reason why i wanted to do it in config file because suppose the someday if the base href value is changed the i have to chahged in everywhere. — , Dec 21 '15 at 06:12
@Omar.Alani : Because i wanted to remove the `#` tag from angular.js.I have already explained above.Please see this. — , Dec 21 '15 at 06:14

Partha Sarathi Ghosh · Accepted Answer · 2015-12-21T06:42:46.263

1

You can use HTML base tag as follows.

<base href="http://www.absclasses.com/" />

If you want to do this with angular config block, you can use the following javascript code also with some modification.

document.write("<base href='http://" + document.location.host + "' />");

You can also define store document.location.host to a variable and use that.

edited Dec 21 '15 at 06:42

answered Dec 21 '15 at 06:38

Partha Sarathi Ghosh

10,936
20
59
84

Ok,I will check this and confirm you.so how can i set my script tag ? – Dec 21 '15 at 06:45
Same way without the common part, which you are setting on base. – Partha Sarathi Ghosh Dec 21 '15 at 06:47
Hi,its good solution but one problem is there,i have activated the html5 mode true and unable to open the link in new tab.Do you have any solution. – Dec 21 '15 at 08:31
I think that is a different problem. – Partha Sarathi Ghosh Dec 21 '15 at 12:20

score 0 · Answer 2 · answered Dec 21 '15 at 06:17

0

In the javascript, you can set global variable.

function globalSource() {
    jqueryUrl = "http://xxxxxxx",
    angularUrl = "http://xxxxxx"
}

when you want to use.

(function() {
  globalSource();
  //Get your dom and change attributes src link
  //ex: var xx = document.getElementsByTagName('script')[0].setAttribute("src", window.jqueryUrl );
})();

answered Dec 21 '15 at 06:17

Auli

74
7

@ user3762171 : In this way i have to load all file dynamically.But i need to set only some common part of the path. – Dec 21 '15 at 06:19
Ok,Can i call `globalSource` inside from script tag? – Dec 21 '15 at 06:26
Yes, you can. If you want to use it everywhere, you have to load this file when document readyState equal "complete". Or your server can dynamically to set. – Auli Dec 21 '15 at 06:37

Ashish Kumawat · Answer 3 · 2015-12-21T06:58:46.597

0

<xsl:variable name="Path" select="/crm/controller/"></xsl:variable> <!-- Global path variable. -->
<xsl:variable name="myScriptPath" select="concat($Path, 'productController.js')"></xsl:variable> <!-- Relative script path variable. -->
<script src="{$myScriptPath}"/> <!-- Attach script. -->

edited Dec 21 '15 at 06:58

answered Dec 21 '15 at 06:41

Ashish Kumawat

685
7
22

This will not work because HTML can not process your + (concat) operator. – Partha Sarathi Ghosh Dec 21 '15 at 06:45

How to set script src path dynamically using Angular.js and Javascript

3 Answers3