Question

当我通过＆＃34; Home＆＃34;导航到主页/索引页面时链接，SPA样式的页面最初正确切换内容，但随后页面刷新半秒钟。当我导航到我的＆＃34; Second＆＃34;页面通过相同的导航栏，仅在从我的第二页导航到家中时。

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

Answer 1

您的主页链接是/index.html的标准链接。使用angular-route的链接应该以井号（＃）开头，以防止浏览器离开页面。在这种情况下，解决方案是使用#/而不是/index.html

使用Angular进行不需要的主页刷新，其他页面不会发生

1 个答案: