Satyadev Satyadev - 2 months ago 8
AngularJS Question

Why isn't my page loading when I use css?

I have my page at this site: www.rootscope.in

When I use css, particularly this one below:

.loader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: url(assets/img/icons/loader.svg) no-repeat center center #fe9d68;
background-size: 60px;
}


HTML:

<div>
<div id="content" class="container">
<!--main content-->
<div id="wrap">
<div ui-view="content" id="content"></div>
</div>
</div>
</div>


Angular routing:

angular.module('myApp').config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {

// For any unmatched url, redirect to /login
$urlRouterProvider.otherwise("home");

$stateProvider
.state('home', {
url: "/home",
views: {
content: {
templateUrl: 'views/home.html',
controller: function ($scope) {
}
},
}
});


Some of the script used in this template:

<script src="assets/js/jquery.countdown.min.js"></script>
<script src="assets/js/jquery.easydropdown.min.js"></script>
<script src="assets/js/jquery.flexslider-min.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/jquery.viewportchecker.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>


I have this line in the script tag:

$('.loader').fadeOut('slow'); // End Loader


The page keep showing the loading svg icon animation. When I inspect the page in chrome and remove the
.loader
class, the page loads but with some styles missing. I could have checked for errors but I purchased this html/css template from a site and I applied angular to it. I don't understand what is problem with
.loader class


The actual is supposed to look like this: www.rootscopeit.in but this one with out angular

Answer

A common issue is to load scripts after DOM is loaded, but before AngularJS runs script to load the template page.

You should only hide ".loader" after Angular. Simplest solution (but not scalable) is just to put it in the angular controller:

function controller($scope){
   $('.loader').fadeOut('slow');
}
Comments