Display a loading icon until the page loads completely AngularJS

Question

I am trying to show a preloader until that all website content load but i cant get it.

Any of this options works.

$(document).ready(function(){ //content load });

$(window).load(function() { //content load });

I want some method with AngularJS for quit the preloader when all the images and videos are loaded.

Answer 1

You can do this in your main controller or the controller of your view, Make sure to wrap your view content around the ng-view directive

<div ng-view ></div>

You can use the above directive as a class or an element as well.

$viewContentLoaded : Emitted every time the ngView content is reloaded.

$scope.$on('$viewContentLoaded', function(){
  //Here you can hide your pre-loader
});

This event is fired after your view is reloaded.