Scripting in NG client

Hi

I’m currently trying out to load scripts in the NG client.
I have made following test files:

html:

<html>
<head>
<script type="text/javascript" src='/scripting/scripting/originalscript/scriptje.js'></script>
<head>
<body>
  <p>Before the script...</p>
  <script type="text/javascript">test()</script>
  <p>...After the script.</p>
</body>
</html>

custom js file with script:

function test(){
	alert( 'works');
}

component js file:

angular.module('scriptingScripting',['servoy']).directive('scriptingScripting', function() {  
    return {
      restrict: 'E',
      scope: {
    	  model: '=svyModel'
      },
      controller: function($scope, $element, $attrs) {
      },
      templateUrl: 'scripting/scripting/originalscript/scriptings.html'
    };
  })

spec file:

{
	"name": "scripting-scripting",
	"displayName": "scripting",
	"version": 1,
	"definition": "scripting/scripting/scripting.js",
	"libraries": [],
	"model":
	{
		"yourName" : {"type": "string", "default":"World"}
	}
}

When I run the NG client, it runs.
I see the alert button and the html paragraphs, so you would think that there is no problem.
But there is…
What should happen is that it first loads paragraph: Before the script…, then the alert and when you press ok it has to load the last paragraph: …After the script.
Not all together.

I also have an warning Synchronous XMLHttpRequest on my head thread, but I don’t think that’s causing the problem.

Does someone know how to load the script before the last paragraph instead of all together?

Thanks,
Walter

Hi Walter,

if your web component needs to load js/css scripts the proper way to do it is via the ‘libraries’ definition in the .spec file.

"libraries": [{"name":"moment", "version":"2.11.1", "url": "bootstrapcomponents/calendar/bootstrap-datetimepicker/js/moment-with-locales.min.js", "mimetype":"text/javascript"},{"name":"moment-jdateformatparser", "version":"0.1.1", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/js/moment-jdateformatparser.js", "mimetype":"text/javascript"},{"name":"bootstrap-datetimepicker", "version":"4.7.14", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js", "mimetype":"text/javascript"},{"name":"bootstrap-datetimepicker", "version":"4.7.14", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css", "mimetype":"text/css"},
	{"name":"bootstrap-datetimepicker-servoy-extension", "version":"1.0", "url":"bootstrapcomponents/calendar/bootstrap-datetimepicker/css/bootstrap-datetimepicker-servoy-extension.css", "mimetype":"text/css"},
	{"name":"bootstrapcomponents-calendar-css", "version":"1.0", "url":"bootstrapcomponents/calendar/calendar.css", "mimetype":"text/css"}
	]

Such approach still doesn’t allow you to load the script after a certain element is rendered; however i believe there are more suited NG pattern to achieve what you are trying to do instead of loading the script before a specific paragraph. What are you trying to achieve with that ? Do you want to make sure that the element on top is already rendered or what ?
Keep in mind that the NGClient is a single page web app.

Regards,
Paolo