DEVHIDE
Login Or Sign up

How to refresh or reload assets after route in angularjs?

3.1k Views Asked by At

I have a website with animations effects. When I load the page for the first time, everything works. But, if I navigate by routes, "/", "/about", this animations dosnt start. Here an example with screenshots:

First load "home.html": Everything works https://i.stack.imgur.com/ailBr.png

If i click "home" button to route to "/", slider and effects on contact and gallery items stop working:

https://i.stack.imgur.com/AwIfx.png

And the same happens on about page. When I use routes is like assets dosnt load. But if I press F5 all assets and page loads perfectly. (only in current page and route)

Here 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 here 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>

theme.init.js file

// Commom Plugins
(function($) {

    'use strict';

    // Scroll to Top Button.
    if (typeof theme.PluginScrollToTop !== 'undefined') {
        theme.PluginScrollToTop.initialize();
    }

    // Tooltips
    if ($.isFunction($.fn['tooltip'])) {
        $('[data-tooltip]:not(.manual), [data-plugin-tooltip]:not(.manual)').tooltip();
    }

    // Popover
    if ($.isFunction($.fn['popover'])) {
        $(function() {
            $('[data-plugin-popover]:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.popover(opts);
            });
        });
    }

    // Validations
    if (typeof theme.PluginValidation !== 'undefined') {
        theme.PluginValidation.initialize();
    }

    // Parallax
    if (typeof theme.PluginParallax !== 'undefined') {
        theme.PluginParallax.initialize();
    }

    // Match Height
    if ($.isFunction($.fn['matchHeight'])) {

        $('.match-height').matchHeight();

        // Featured Boxes
        $('.featured-boxes .featured-box').matchHeight();

        // Featured Box Full
        $('.featured-box-full').matchHeight();

    }

}).apply(this, [jQuery]);

// Animate
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginAnimate'])) {

        $(function() {
            $('[data-plugin-animate], [data-appear-animation]').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginAnimate(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Carousel
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginCarousel'])) {

        $(function() {
            $('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginCarousel(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Chart.Circular
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginChartCircular'])) {

        $(function() {
            $('[data-plugin-chart-circular]:not(.manual), .circular-bar-chart:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginChartCircular(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Counter
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginCounter'])) {

        $(function() {
            $('[data-plugin-counter]:not(.manual), .counters [data-to]').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginCounter(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Flickr
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginFlickr'])) {

        $(function() {
            $('[data-plugin-flickr]:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginFlickr(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Lazy Load
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginLazyLoad'])) {

        $(function() {
            $('[data-plugin-lazyload]:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginLazyLoad(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Lightbox
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginLightbox'])) {

        $(function() {
            $('[data-plugin-lightbox]:not(.manual), .lightbox:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginLightbox(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Masonry
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginMasonry'])) {

        $(function() {
            $('[data-plugin-masonry]:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginMasonry(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Match Height
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginMatchHeight'])) {

        $(function() {
            $('[data-plugin-match-height]:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginMatchHeight(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Progress Bar
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginProgressBar'])) {

        $(function() {
            $('[data-plugin-progress-bar]:not(.manual), [data-appear-progress-animation]').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginProgressBar(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Revolution Slider
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginRevolutionSlider'])) {

        $(function() {
            $('[data-plugin-revolution-slider]:not(.manual), .slider-container .slider:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginRevolutionSlider(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Sort
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginSort'])) {

        $(function() {
            $('[data-plugin-sort]:not(.manual), .sort-source:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginSort(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Sticky
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginSticky'])) {

        $(function() {
            $('[data-plugin-sticky]:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginSticky(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Toggle
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginToggle'])) {

        $(function() {
            $('[data-plugin-toggle]:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginToggle(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Tweets
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginTweets'])) {

        $(function() {
            $('[data-plugin-tweets]:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginTweets(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Video Background
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginVideoBackground'])) {

        $(function() {
            $('[data-plugin-video-background]:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginVideoBackground(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Word Rotate
(function($) {

    'use strict';

    if ($.isFunction($.fn['themePluginWordRotate'])) {

        $(function() {
            $('[data-plugin-word-rotate]:not(.manual), .word-rotate:not(.manual)').each(function() {
                var $this = $(this),
                    opts;

                var pluginOptions = $this.data('plugin-options');
                if (pluginOptions)
                    opts = pluginOptions;

                $this.themePluginWordRotate(opts);
            });
        });

    }

}).apply(this, [jQuery]);

// Commom Partials
(function($) {

    'use strict';

    // Sticky Header
    if (typeof theme.StickyHeader !== 'undefined') {
        theme.StickyHeader.initialize();
    }

    // Nav Menu
    if (typeof theme.Nav !== 'undefined') {
        theme.Nav.initialize();
    }

    // Search
    if (typeof theme.Search !== 'undefined') {
        theme.Search.initialize();
    }

    // Newsletter
    if (typeof theme.Newsletter !== 'undefined') {
        theme.Newsletter.initialize();
    }

    // Account
    if (typeof theme.Account !== 'undefined') {
        theme.Account.initialize();
    }

}).apply(this, [jQuery]);

Thanks a lot. Best Regards

angularjs routes ngroute angularjs-ng-route
Original Q&A
1

There are 1 best solutions below

1
On

Use $state.reload(); or use $state.go('stateName');

For more information about please visit the following page

https://github.com/angular-ui/ui-router/wiki

Related Questions in ANGULARJS

Related Questions in ROUTES

Related Questions in NGROUTE

Related Questions in ANGULARJS-NG-ROUTE

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.