Angular不需要刷新主页，其他页面不会出现这种情况

Unwanted homepage refresh with Angular, does not happen with other pages

本文关键字：情况 刷新 不需要 主页 其他 Angular      更新时间：2023-09-26

当我通过"主页"链接导航到主页/索引页面时，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

相关文章：