I have a site with animations. When I load the page for the first time everything works. But if I browse through the pages "/", "/ company" the animations stop working. I leave the example with screenshots:
First upload "home.html":
If I click on home to go to "/", the slider, contact form and image gallery stops working:
And the same thing happens on the "company" page. When I use the navigation menu it's as if the assets do not load. But if I press F5 all the assets load on the page perfectly (only on the page I give f5)
With assets I mean JS files, CSS etc.
This is my app.js :
var cadgiorApp = angular.module('cadgiorApp', ['ngRoute']);
cadgiorApp.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'js/views/home.html',
controller: 'mainController'
})
.when('/empresa', {
templateUrl: 'js/views/empresa.html',
controller: 'empresaController'
})
.when('/productos', {
templateUrl: 'js/views/productos.html',
controller: 'productosController'
})
.when('/contacto', {
templateUrl: 'js/views/contacto.html',
controller: 'contactoController'
})
.when('/cotizar-online', {
templateUrl: 'js/views/cotizador.html',
controller: 'cotizadorController'
});
//locationProvider
$locationProvider.html5Mode(true);
});
// Crear controlador e insertar $scope
cadgiorApp.controller('mainController', function($scope){
$scope.message = "Pantalla principal, mainController"
});
cadgiorApp.controller('empresaController', function($scope){
$scope.message = 'Pantalla empresa, empresaController'
});
cadgiorApp.controller('productosController', function($scope){
$scope.message = 'Pantalla productos, productosController'
});
cadgiorApp.controller('contactoController', function($scope){
$scope.message = 'Pantalla contacto, contactoController'
});
cadgiorApp.controller('cotizadorController', function($scope){
$scope.message = 'Cotizador online, cotizadorCOntroller'
});
And this is my index.html :
<!DOCTYPE html>
<html class="boxed dark" ng-app="cadgiorApp">
<head>
<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cadenas Giordanino S.R.L - Fabrica de cadenas pantaneras</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Porto - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-blog.css">
<link rel="stylesheet" href="css/theme-shop.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page CSS -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/layers.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/navigation.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/default.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>
<!-- App Libs -->
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/app.js"></script>
<base href="/">
</head>
<body ng-controller="mainController">
<div class="body">
<header id="header" data-plugin-options='{"stickyEnabled": true, "stickyEnableOnBoxed": true, "stickyEnableOnMobile": true, "stickyStartAt": 57, "stickySetTop": "-57px", "stickyChangeLogo": true}'>
<div class="header-body">
<div class="header-container container">
<div class="header-row">
<div class="header-column">
<div class="header-logo">
<a href="/">
<img alt="Cadenas Giordanino S.R.L" width="200" height="auto" data-sticky-width="200" data-sticky-height="auto" data-sticky-top="40" src="img/logo-dark.png">
</a>
</div>
</div>
<div class="header-column">
<div class="header-row">
<div class="header-search hidden-xs">
<form id="searchForm" action="page-search-results.html" method="get">
<div class="input-group">
<input type="text" class="form-control" name="q" id="q" placeholder="Buscar..." required>
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
</div>
<nav class="header-nav-top">
<ul class="nav nav-pills">
<li class="hidden-xs">
<a href="/faq"><i class="fa fa-angle-right"></i> Preguntas frecuentes</a>
</li>
<li class="hidden-xs">
<a href="/sitemap"><i class="fa fa-angle-right"></i> Mapa del sitio</a>
</li>
<li>
<span class="hidden-xs"><i class="fa fa-phone"></i> (0353) 4930-170</span>
</li>
</ul>
</nav>
</div>
<div class="header-row">
<div class="header-nav">
<button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main" data-sticky-top="40">
<i class="fa fa-bars"></i>
</button>
<ul class="header-social-icons social-icons hidden-xs">
<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>
</ul>
<div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1 collapse">
<nav class="center">
<ul class="nav nav-pills" id="mainNav">
<li><a href="/">Inicio</a></li>
<li><a href="/empresa">Empresa</a></li>
<li><a href="/productos">Productos</a></li>
<li><a href="/contacto">Contacto</a></li>
<li class="active"><a href="/cotizar-online">Cotizador online</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div ng-view>
</div>
<footer id="footer">
<div style="background: #0e0e0e;" class="container">
<div class="row">
<div class="col-xs-12 col-sm-7 col-md-7 col-lg-7">
<a href="index.html" class="logo">
<img style="width: 250px; height: auto;" alt="Porto Website Template" class="img-responsive" src="img/logo-footer.png">
</a>
</div>
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
<p>© Cadenas Giordanino S.R.L 2014 - 2017. Derechos reservados.</p>
</div>
</div>
</div>
</footer>
</div>
<!-- Vendor -->
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/jquery.appear/jquery.appear.js"></script>
<script src="vendor/jquery.easing/jquery.easing.js"></script>
<script src="vendor/jquery-cookie/jquery-cookie.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script src="vendor/common/common.js"></script>
<script src="vendor/jquery.validation/jquery.validation.js"></script>
<script src="vendor/jquery.stellar/jquery.stellar.js"></script>
<script src="vendor/jquery.easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="vendor/jquery.gmap/jquery.gmap.js"></script>
<script src="vendor/jquery.lazyload/jquery.lazyload.js"></script>
<script src="vendor/isotope/jquery.isotope.js"></script>
<script src="vendor/owl.carousel/owl.carousel.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.js"></script>
<script src="vendor/vide/vide.js"></script>
<!-- Theme Base, Components and Settings -->
<script src="js/theme.js"></script>
<!-- Current Page Vendor and Views -->
<script src="vendor/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script src="vendor/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script src="vendor/circle-flip-slideshow/js/jquery.flipshow.js"></script>
<script src="js/views/view.home.js"></script>
<!-- Current Page Vendor and Views -->
<script src="js/views/view.contact.js"></script>
<!-- Theme Custom -->
<script src="js/custom.js"></script>
<!-- Theme Initialization Files -->
<script ng-src="js/theme.init.js"></script>
</body>
</html>
The file responsible for the initialization of all others is: js / theme.init.js
Thank you very much, best regards.