gpt4 book ai didi

javascript - 使用 Angular 进行不必要的主页刷新,而其他页面则不会发生这种情况

转载 作者:行者123 更新时间:2023-12-03 07:28:26 32 4
gpt4 key购买 nike

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

ma​​in.html

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

第二个.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 的标准链接。使用 Angular-route 的链接应以井号 (#) 开头,以防止浏览器离开页面。这种情况的解决方案是使用 #/ 而不是 /index.html

关于javascript - 使用 Angular 进行不必要的主页刷新,而其他页面则不会发生这种情况,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35900816/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com