使用Angular不需要的首頁刷新，不會與其他頁面發生

當我通過「主頁」鏈接導航到首頁/索引頁面時，SPA風格的頁面會正確切換內容，但會在半秒稍後頁面刷新。當我通過相同的導航欄導航到我的「第二個」頁面時，僅當從我的第二頁導航到主頁時纔會發生這種情況。使用Angular不需要的首頁刷新，不會與其他頁面發生

我是Angular的新手，所以如果我錯過了明顯的東西，我很抱歉。我也包括我想知道如果這可能是問題的根源，我的本地服務器代碼...

的index.html

<!DOCTYPE html> 
<html lang="en-us" ng-app="myApp"> 
<head> 
    <title>Intro to Angular</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 

    <script src="https://code.angularjs.org/1.3.0/angular-route.min.js"></script> 
    <script src="app.js"></script> 
    <style> 
    html, body, input, select, textarea 
    { 
     font-size: 1.05em !important; 
    } 
    </style> 

</head> 

<body> 
    <header> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="/">jQuery</a> 
     </div> 

     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="/index.html"><i></i> Home</a></li> 
      <li><a href="#/second"><i></i> Second</a></li> 
     </ul> 
     </div> 
    </nav> 
    </header> 

    <div class="container"> 

    <div ng-view> 

    </div> 

    </div> 

</body> 
</html>

main.html中

<h1>This is main.</h1> 
<h3>Scope value: {{ name }}</h3>

second.html

<h1>This is second.</h1> 
<h3>Scope route value (on second page): {{ num }}</h3>

app.js

var myApp = angular.module('myApp', ['ngRoute']); 

myApp.config(function($routeProvider){ 

    $routeProvider 

    .when('/', { 
    templateUrl: 'pages/main.html', 
    controller: 'mainController' 
    }) 

    .when('/second/', { 
    templateUrl: 'pages/second.html', 
    controller: 'secondController' 
    }) 

    .when('/second/:num', { 
    templateUrl: 'pages/second.html', 
    controller: 'secondController' 
    }) 

}); 

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) { 

    $scope.name = "Main"; 

}]); 


myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) { 

    $scope.num = $routeParams.num || 1; 


}]);

server.js

var connect = require('connect'); 
var serveStatic = require('serve-static'); 
connect().use(serveStatic(__dirname)).listen(8080, function(){ 
    console.log('Server running on 8080...'); 
});

來源

2016-03-09 Dan Klos

您的主頁鏈接是到/index.html的標準鏈接。你有沒有試過＃/或＃/ index.html？ – Marie

@瑪麗神聖煙。嘗試調試時，我從「/」更改爲「/index.html」，但「＃/」修復了它。如果您想將其作爲答案提交，我會將其標記爲已解決。謝謝！ –

沒問題:)我不認爲它值得回答，但我會繼續發佈。 – Marie

你的首頁鏈接是/index.html一個標準的鏈接。使用角度路由的鏈接應以散列（＃）開頭，以防止瀏覽器從頁面導航。在這種情況下，解決方案是使用而不是/index.html

來源

2016-03-09 19:34:41 Marie

使用Angular不需要的首頁刷新，不會與其他頁面發生

回答

相關問題