Fatal编程技术网
  • angularjs/
  • 如何在angularjs中路由后刷新或重新加载资源？

如何在angularjs中路由后刷新或重新加载资源？

angularjs routes

如何在angularjs中路由后刷新或重新加载资源？,angularjs,routes,ngroute,angularjs-ng-route,Angularjs,Routes,Ngroute,Angularjs Ng Route,我有一个带有动画效果的网站。当我第一次加载页面时，一切正常。但是，如果我按路径“/”、“/about”导航，则动画不会启动。下面是一个屏幕截图示例： 第一次加载“home.html”： 一切正常 如果我单击“主页”按钮发送到“/”，则联系人和画廊项目上的滑块和效果将停止工作： 同样的情况也发生在第页。当我使用routes时，它就像是加载的资产。但如果我按F5，所有资源和页面都会完美加载。（仅在当前页面和路线中） 这是我的app.js： var cadgiorApp = angular.mod

我有一个带有动画效果的网站。当我第一次加载页面时，一切正常。但是，如果我按路径“/”、“/about”导航，则动画不会启动。下面是一个屏幕截图示例：

第一次加载“home.html”： 一切正常

如果我单击“主页”按钮发送到“/”，则联系人和画廊项目上的滑块和效果将停止工作：

同样的情况也发生在第页。当我使用routes时，它就像是加载的资产。但如果我按F5，所有资源和页面都会完美加载。（仅在当前页面和路线中）

这是我的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'
});

<!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>
这是我的index.html：

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'
});

<!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>
非常感谢。 致以最诚挚的问候

使用
$state.reload（）或使用
$state.go（'stateName'）

有关更多信息，请访问以下页面

使用
$state.reload（）或使用
$state.go（'stateName'）

有关更多信息，请访问以下页面


动画从何处触发？一切都从这里开始触发。您可以尝试一个
窗口。location.reload（）
，但请记住，这将再次进行所有服务器调用。没有更好的方法可以做到这一点？恐怕没有看到相关代码。动画从何处触发？一切都从这里开始触发。您可以尝试一个
窗口。location.reload（）
，但请记住，这将再次进行所有服务器调用。没有更好的方法可以这样做吗？恐怕没有看到相关代码。感谢您提供此代码片段，它可能会提供一些即时帮助。通过说明为什么这是一个很好的解决问题的方法，正确地解释它的教育价值，并将使它对未来有类似但不完全相同问题的读者更有用。请在回答中添加解释，并说明适用的限制和假设。特别是，您的两个建议是等效的，还是有差异可以帮助询问者选择“最佳”解决方案？感谢您提供的这段代码片段，它可能会提供一些即时帮助。通过说明为什么这是一个很好的解决问题的方法，正确地解释它的教育价值，并将使它对未来有类似但不完全相同问题的读者更有用。请在回答中添加解释，并说明适用的限制和假设。特别是，你的两个建议是等效的，还是有区别可以帮助提问者选择“最佳”解决方案？