个人中心
gpt4 book ai didi

javascript - 使用 HTML5 模式的 AngularJS 路由 404 错误

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:12:06 25 4
gpt4 key购买 nike

我刚开始使用 angular js，我尝试了路由并且工作得很好。问题是当我刷新页面时它显示 404 错误，因为它正在检查我的实际目录而不是检查路由。

完整代码如下

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp">

  <base href="/" />

  <a href="blue">blue</a>

  <a href="green">green</a> //blue.html and green.html are in same directory as index.html

  <p>Click on the links to load blue or green.</p>

  <div ng-view></div>

  <script>
    var app = angular.module("myApp", ["ngRoute"]);

    app.config(function($routeProvider, $locationProvider) {
      $routeProvider
        .when("/blue/:name?", {
          templateUrl: "blue.html",
          controller: "blue_control"
        })

        .when("/green", {
          templateUrl: "green.html",
          controller: "green_control"
        })

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

    });
    app.controller("blue_control", function($scope) {
      $scope.msg = "this is blue";
    });
    app.controller("green_control", function($scope) {
      $scope.msg = "this is green";
    });
  </script>


</body>

</html>

这是浏览器的输出

output

这是我刷新的时候

error

请提供一些解决方案。

最佳答案

HTML5 模式需要 URL 重写。

来自文档:

HTML5 Mode

Server side

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a <base> tag is also important for this case, as it allows AngularJS to differentiate between the part of the url that is the application base and the path that should be handled by the application.

— AngularJS Developer Guide - Using $location (HTML5 Mode Server Side)

对于 NodeJS 和 ExpressJS

var express = require('express');
var path = require('path');
var router = express.Router();

// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));

// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
    res.sendFile(path.resolve('app/index.html'));
});

module.exports = router;

对于 Windows 上的 IIS

<rewrite>
  <rules>
    <rule name="AngularJS" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

参见，How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

对于 Apache 

RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^

参见，How to rewrite url in apache htaccess for angularjs app

了解更多信息

文章:AngularJS - Enable HTML5 Mode Page Refresh Without 404 Errors in NodeJS and IIS .

关于javascript - 使用 HTML5 模式的 AngularJS 路由 404 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44271461/

25 4 0
文章推荐： c# - 没有使用 Parse Push 和 Xamarin IOS 注册的设备
文章推荐： 安卓防止apk
文章推荐： ios - 未调用 Objective-C UIKit UIAlertViewDelegate
文章推荐： android - android中的单选选择对话框
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com