Execute .js file after angularjs file function

Question

I have two .js files. I want to "read" the second file after the function of the first .js file ends. How do i do that?

html file:

<div class="row connectedSortable" id="sortable1" ng-app="graficosApp" ng-controller="graficosAppCtrl">
    <button ng-click="loadElements()">Load Elements</button>
</div>

first javascript file (angularjs):

var app = angular.module('graficosApp', []);
    app.controller('graficosAppCtrl', function ($scope, $http) {

        $scope.CarregarGraficos = function () {

            var myEl = angular.element(document.querySelector('#sortable1'));        
            myEl.prepend(content);

        }
    });

and then i have my second javascript file, that will add some functionalities to buttons added on the angularjs file. i want to load the second file after the first file.

Thank you.

Why do you want to "read" a JavaScript file? You should really provide more specific details on what your problem is here. Also try including code samples. Also, how is this specifically related to AngularJS? — Ben
– Ben, Commented Jun 28, 2017 at 20:06
the first file will add some divs in the html via angularjs. the second file will make some buttons in those added divs work — Júlio César
– Júlio César, Commented Jun 28, 2017 at 20:10
Have you tried anything? Like, say, putting the first file before the second file in the HTML file? — Heretic Monkey
– Heretic Monkey, Commented Jun 28, 2017 at 20:18
yes, i'd try that. but the browser loads the second file when i load the html page, and the content is added after that, so it doesn't work — Júlio César
– Júlio César, Commented Jun 28, 2017 at 20:19
After read some ideas about it i'd quit and added the second file content inside the loadElements function. Thank you all for the effort — Júlio César
– Júlio César, Commented Jun 28, 2017 at 20:30

Artem Arkhipov · Accepted Answer · 2017-06-28 20:22:43Z

1

I am not sure that adding additional functionality in such approach is good, but anyway here is answer to your question. To load some scripts when you need - you can run this code when everything is done in first file.

// ... everything necessary is done before
var scriptEl = document.createElement('script');
scriptEl.setAttribute('src', '/path_to_js_file.js');
document.body.appendChild(scriptEl);

Anyway, I suggest you to think once more about your code structure and functionality and try to avoid situations when you need to use such 'hacks'.

answered Jun 28, 2017 at 20:22

Artem Arkhipov

7,5256 gold badges34 silver badges56 bronze badges

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

Comments

Pop-A-Stash · Accepted Answer · 2017-06-28 20:24:07Z

0

If you are using jQuery, you can getScripts quite easily:

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

Or use ajax:

$.ajax({
  url: "http://myscript/path.js",
  dataType: "script",
  success: function() {
    console.log("script loaded");
  }
});

answered Jun 28, 2017 at 20:24

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

Comments

Parag Diwan · Accepted Answer · 2017-06-28 20:28:26Z

0

You can try loading the FIRST file in HEAD tag; So this will ensure that it will block the execution. And the SECOND file you can 'defer' its execution.

<script src='FIRST_FILE'></script>
<script defer src='source/SECOND_FILE'></script>

I am not sure about the expected behaviour what you want to achieve; As you could simply load "Functions" that are required after primary functions are executed.

answered Jun 28, 2017 at 20:28

Parag Diwan

4,1362 gold badges24 silver badges38 bronze badges

2 Comments

Artem Arkhipov Over a year ago

It should work only if everything in first file is synchronous. In any other case there is no guarantee that script will be loaded and executed after everything in first script was done.

Parag Diwan Over a year ago

exactly! Thats a assumption

Collectives™ on Stack Overflow

Execute .js file after angularjs file function

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related