Angular 不需要的主页刷新，其他页面不会发生答案

【问题标题】：Unwanted homepage refresh with Angular, does not happen with other pagesAngular 不需要的主页刷新，其他页面不会发生
【发布时间】：2016-03-09 19:25:51
【问题描述】：

当我通过“主页”链接导航到主页/索引页面时，SPA 样式的页面最初会正确切换内容，但半秒后页面会刷新。当我通过同一个导航栏导航到“第二”页时，不会发生这种情况，只有从第二页导航到主页时才会发生这种情况。

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

【问题讨论】：

您的主页链接是指向 /index.html 的标准链接。你试过#/或#/index.html吗？
@Marie Holy 抽烟。我在尝试调试时从“/”更改为“/index.html”，但“#/”修复了它。如果您想将其作为答案提交，我会将其标记为已解决。谢谢！
没问题 :) 我认为它不值得回答，但我会继续发布它。

标签： javascript angularjs

【解决方案1】：

您的主页链接是指向 /index.html 的标准链接。使用 angular-route 的链接应以哈希 (#) 开头，以防止浏览器导航离开页面。这种情况下的解决方案是使用#/而不是/index.html

【讨论】：