The script loads before ng-view has loaded (AngularJS)

Question

The script loads before ng-view has loaded (AngularJS)

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I'm having trouble with the following situation: I have a ng-view on my page, but I need two scripts that I implement at the bottom of the page wait for my ng-view load so they interact with the element classes within my ng-view. These are the " scrollreveal.js " and " magnific-popup.min.js " Code below

<ng-view></ng-view>



<!--Core JS-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<!--AngularJS-->
<script src="app/AngularJS/angular.min.js"></script>
<script src="app/AngularJS/angular-route.min.js"></script>

<!--App-->
<script src="app/app.js"></script>

<!--Routes-->
<script src="app/routes.js"></script>

<!--Directives-->
<!--<script src="app/directives/frameworks-directive.js"></script>-->

<!--Controllers-->

<!--Frameworks JS-->
<script src="js/scrollreveal.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/creative.js"></script>

angularjs front-end

asked by anonymous 30.07.2016 / 02:06

2 answers

1

If you do not define the dependencies of a module in its creation or configuration blocks, Angular will load the scripts asynchronously, not guaranteed that the desired sequence is followed.

See this link to understand how this works and deploy on your code.

30.07.2016 / 02:11

Calculate date with JavaScript or otherwise, even in excel? [closed] Check if GPS is enabled on all versions of Android?

score 1 · Accepted Answer

After specifying your controller in $routeProvider , use the controller to load the scripts. In this case, remove them from body :

app.controller('yourCtrl', function ($scope) {
   $scope.load = function() {
       var script1 = document.createElement('script');
       var script2 = document.createElement('script');
       script1.type = 'text/javascript';
       script2.type = 'text/javascript';
       script1.src = "js/jquery.magnific-popup.min.js";
       script2.src = "js/scrollreveal.js";
       document.body.appendChild(script1);
       document.body.appendChild(script2);
   };
   $scope.load();
});