gpt4 book ai didi

javascript - ngRoute- 直接 url 不显示模板

转载 作者:可可西里 更新时间:2023-11-01 13:30:27 26 4
gpt4 key购买 nike

我是 Angular 的新手,所以如果这真的很明显,我很抱歉!我正在制作一个 super 基本的应用程序,现在我想要的只是当用户直接进入一个页面时,它应该始终显示布局和内容。我正在使用 Angular 的 ng-route

截至目前,如果我转到 localhost:8080/,它会显示布局 (index.html) 和内容 (view/home.html)。如果我点击“关于”链接,它会转到 localhost:8080/about 并显示布局 (index.html) 和正确的内容 (view/about.html)。现在,如果我在地址栏中键入 localhost:8080/about,按回车键,我会从服务器日志中收到 404 错误。我不确定我错过了什么。任何意见表示赞赏!

应用程序.js

  angular
.module('TestProject', ['ngRoute']);

路由.js

angular.module('TestProject')
.config(function($routeProvider, $locationProvider) {

$routeProvider
.when('/', {
templateUrl : 'views/home.html'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/contact', {
templateUrl: 'views/contact.html'
})
.otherwise({
redirectTo: "/"
});

$locationProvider.html5Mode(true);

});

index.html

<!DOCTYPE html>
<html lang="en" ng-app="TestProject">
<head>
<meta charset="utf-8">
<title>Test!</title>

<base href="/">
<link rel="stylesheet" href="assets/styles/app.css">
</head>
<body>
<header><h1>Logo</h1></header>
<nav>
<ul class="main">
<li>
<div class="navBorder">
<a href="about">About</a>
</div>
</li>
<li>
<div class="navBorder">
<a href="contact">Contact</a>
</div>
</li>
</ul>
</nav>

<div ng-view></div>

<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="routes.js"></script>
</body>
</html>

我知道我还没有任何 Controller ,我刚刚开始这个项目,但目前还没有任何 Controller 。

以下是我的文件的组织方式:

我的文件结构如下:

/index.html
/app.js
/routes.js

/views/home.html
/views/about.html
/views/contact.html

最佳答案

如果使用 AngularJS 1.3+,你需要包含一个 <base href="" /> 的概念.您可以在 <head> 中执行此操作标记为这样

<head>
<base href="/">
...

来自docs

Before Angular 1.3 we didn't have this hard requirement and it was easy to write apps that worked when deployed in the root context but were broken when moved to a sub-context because in the sub-context all absolute urls would resolve to the root context of the app. To prevent this, use relative URLs throughout your app:

另外,没有这个 <base />标签,你可以声明.html5Mode()因此...您需要采用这两种方法中的一种。

$locationProvider.html5Mode({
enabled: true,
requireBase: false
});

关于javascript - ngRoute- 直接 url 不显示模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30791810/

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