Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Stay updated on what is happening on the PTC Community by subscribing to PTC Community Announcements. X

How to import external Javascript file


How to import external Javascript file

my home.js file is getting very large, about 1500 lines of code. It contains many functions that are called within the same file, for example:


//		questa funzione rende trasparente tutto il modello e suddivide con un codice colori le classifiche ricambi
//		lancia inoltre l'apertura di un pannello laterale
$scope.showSpareParts=function(button, parameter){
  if(button == "spareParts"){
  	if(parameter == "pressed"){ // => pulsante premuto
    	$['gridLayout-12']['visible'] = true;
   		//tml3dRenderer.setProperties($ , {hidden : true});
      //tml3dRenderer.setProperties ($,{phantom:true, opacity:0.5})
  		tml3dRenderer.setProperties ($, {opacity: 0.20}); // => rende trasparente TUTTO il modello, comprese le parti di ricambio
    	for(i=0; i<$; i++){
      	//tml3dRenderer.setProperties($[i].idPath, {hidden : false});
      	tml3dRenderer.setProperties($[i].idPath, {opacity : 1}); // => serve per togliere la trasparenza
      	if($[i].CLASSIFICA_RICAMBI == '01'){ // MECCANICI => NERO
        	console.log("case 01")
        	tml3dRenderer.setColor($[i].idPath, "rgba(0,0,0,255)");
      		}else if($[i].CLASSIFICA_RICAMBI == '02'){ // PNEUMATICI => ARANCIONE
        			console.log("case 02")
    				tml3dRenderer.setColor($[i].idPath, "rgba(255,165,0,255)");
      				}else if($[i].CLASSIFICA_RICAMBI == '03'){ // ELETTRICI/ELETTRONICI => VERDE
        						console.log("case 03")
    							tml3dRenderer.setColor($[i].idPath, "rgba(60,179,113,255)");
      							}else if($[i].CLASSIFICA_RICAMBI == '04'){ // MATERIALI DI CONSUMO => VIOLA
        									console.log("case 04")
    										tml3dRenderer.setColor($[i].idPath, "rgba(106,90,205,255)");
      										}else if($[i].CLASSIFICA_RICAMBI == '05'){ // CRITICI => ROSSO
        												console.log("case 05")
    													tml3dRenderer.setColor($[i].idPath, "rgba(255,0,0,255)");
      													}else if($[i].CLASSIFICA_RICAMBI == null){
      																console.log("campo null")
    }else if(parameter == "unpressed"){
    		console.log("entro nell'if 2")
    		$['gridLayout-12']['visible'] = false; //nasconde il pannello laterale
    		tml3dRenderer.setProperties($ ,{opacity : 1});
      		//devo aggiungere l'opzione per togliere il colore ai ricambi, una sorta di reset 
    //$['buttonUnhide']['visible'] = false; //nascondo pulsante per reimpostare tutti i componenti 
    //$['buttonUndo']['visible'] = false; //nasconde pulsante per l'undo
    //$[]; //toglie tutti gli id da nascondere
  }else if(button == "buttonHideModel"){
    		//gestione dei pulsanti, il primo if controlla che il parametro button sia corretto



My idea is to create an additional function.js file where save all this function and save the file into a folder on my pc, which one could be accessed by all my experience. In this way all my project will become much smart. 


I try the procedure posted here: but when I try to call for example $scope.showSpareParts the console tell me that this is not a function. 


p.s. for the moment I put function.js into "app/...Upload/function.js".


Anyone could help me? 


@LS_9776545 ,


If you are trying to call a function defined in the external js file than yes, you can only call it inside the onload handler.

ok, is there any chance to define function (or classes, I'm a bit confused) on external file and call it in Home.js?


@LS_9776545 , not sure how do you call your external JS code, something like this:


var head = document.getElementsByTagName('head')[0];
var myscript = document.createElement('script');

myscript.onload = function(){
      //more js code
     // call external JS code

I use often the following function (see defintion) and will load 


//functon for loading of javascript and css
$scope.loadjscssfile= function(filename, filetype){
  console.log("loading "+filename+":: type="+filetype)
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("src", filename)
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    if (typeof fileref!="undefined")

// Enter the View
$scope.$on('$ionicView.afterEnter', function()  {
  $scope.loadjscssfile("app/resources/Uploaded/picker/lib/simplepicker.css", "css")
  $scope.loadjscssfile("app/resources/Uploaded/picker/dist/simplepicker.js", "js")


Acctualy it is in generally the same principle as mentioned by @Jimwang  but it does also additionally implment the loading of css.  Here in the example if I want to use the simplepicker it requires both css and js -so I will call it one time for the css and one time for the js loading

Here I copied the simplepicker.js and css to the upload prject folder

I tried these, but it is not working. What I've done wrong?


Vuforia Studio home.js

$scope.loadjscssfile= function(filename, filetype){
  console.log("loading "+filename+":: type="+filetype)
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("src", filename)

$scope.$on('$ionicView.afterEnter', function()  { 
  $scope.loadjscssfile("app/resources/Uploaded/js/externalJS.js", "js")



$scope.cnslTxt = val => console.log(val);


Widget Event Click JS

cnslTxt('external javascript')


Even I change the function to app.cnslTxt, not working still.

Here is a sample project which is working fine  and  where I loaded css and js -  e.g. the simplepicker lib to the project – so for  this was working fine. I have no idea why this is not working in your case  - I will check today or tomorrow your project to see if I have any ideas why this is not working in your case. I believe - may be some additional references are required ... but as mentioned need to check this first if there are some hints printed as error in the console window

I do not think that $scope is known in your js external library - so that you need to init it first.


function foo( val) {  //will define foo as function
function setMyScope(scope) { //will define  foo in scope;//sets foo in scope
console.log("----loaded library externalJS.js----");


I also check and improved the load lib to async call where the call back fucntion will fire  for both js and css. Only one argument is used  and it will check the extension so the usage:


 //---------------Loading the API----------------------- 
$scope.loadScriptEventCallback = function (fname) {
  var ext =/^.+\.([^.]+)$/.exec(fname); 
                 if(ext == null) {console.error("error checking extension!");return;}
  return new Promise((resolve, reject) => {
     {"lib:"+ext[0]+" is javascript");
       var head = document.head || document.getElementsByTagName('head')[0],
       script = document.createElement('script');
       script.async = true; script.onload = resolve;
       script.onerror = reject; script.type = 'text/javascript';
       script.src=fname;  head.appendChild(script); } 
    else if(ext[1]=='css'){"lib:"+ext[0]+" is style CSS");
        var head = document.head || document.getElementsByTagName('head')[0],
       link = document.createElement('link');
       link.async = true; link.onload = resolve;
       link.onerror = reject; link.type = 'text/css';link.rel = 'stylesheet';
       link.href = fname;                  = 'all';
$scope.myModuleLoad= function() {
// try to load js
      function() { console.log("eloadScriptEventCallback loaded js lib successfully") ; 
             setMyScope($scope); }, //resolved
     function() { console.log("error for when loading the js lib module");} ); //reject
  //try to load css
      function() { console.log("eloadScriptEventCallback loaded css lib successfully");}, //resolved
     function() { console.log("error for when loading the css lib module");} ); //reject
$scope.myModuleLoad(); //LOAD here externalJS.js and test.css form upload/js folde


so when I test it :


so here we can see the callback function in then block when loading was complete

Another approach could be to use $watch construct where we can check if the definiton is already available and then call a function - some thing like this :


$scope.$watch('foo', function (newValue, oldValue, scope) {

if(newValue!=null) foo("now is ext module loaded and foo is defined");


 I will attach here the modified project 

Hi, @LS_9776545 


This could be an easier approach.


For any function declared like this, could be called from any other View in the same Project.

$ = function(){}

Therefore, it is possible to create some Views to separate codes.





Top Tags