Angular JS 1 路由 404 问题答案

【问题标题】：Angular JS 1 routing 404 issueAngular JS 1 路由 404 问题
【发布时间】：2017-01-15 13:24:24
【问题描述】：

我在 Angular Js 中有一个基本的单页应用程序。我已应用路由并将“Html5Mode”设置为 true。

我的 URL 已被清理，但现在在尝试访问该 URL 时会导致 404。

现在这是一个前端 Web 应用程序，所以我在 IIS 上没有任何配置，我可以使用它来设置重写规则。

谁能指出我正确的方向来设置 URL 以防止 404 错误。

以下是我的路线：

(function () {
"use strict";

angular.
    module("app", [
        "ngRoute",
        "app.home",
        "app.products",
        "app.contact"
    ])

.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/",
        {
            controller: "HomeController",
            templateUrl: "app/components/home/home.html"
        })
        .when("/products",
        {
            controller: "ProductsController",
            templateUrl: "app/components/products/products.html"
        })
        .when("/contact",
        {
            controller: "ContactController",
            templateUrl: "app/components/contact/contact.html"
        })
        .otherwise("",
        {
            controller: "HomeController",
            templateUrl: "app/components/home/home.html"         
        });


        $locationProvider.html5Mode(true);

    });

})();

索引.html：

 <!DOCTYPE html>
 <html ng-app="app" lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Newtown Gates & Welding</title>

<link href="assets/css/site.css" rel="stylesheet" />
<link href="app/components/home/home.css" rel="stylesheet" />
<link href="app/components/contact/css.css" rel="stylesheet" />
<link href="app/components/products/products.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />

<script src="assets/libs/angularjs/1.6.1/angular.js"></script>
<script src="assets/libs/angularjs/1.6.1/angular-route.js"></script>

<script src="app/app.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/products/productsController.js"></script>
<script src="app/components/contact/contactController.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>


<base href="/"/> <!--Required when using location provider-->

<div>
    Navbar here

    <li>
        <a href="/">home</a>
        <a href="/contact">contact</a>
        <a href="/products">products</a>
    </li>

</div>

<div class="container-fluid">

    <div class="row" style="border: 1px solid black;">
        HELLO
    </div>

    <div ng-view></div>

  </div>
 </body>
 </html>

【问题讨论】：

它显示的路径是什么？
它没有显示任何错误
您可以从主页访问/products。尝试访问此页面或刷新页面。 @Sajeetharan
我做了同样的事情，它被路由到产品，我看到了内容，因为我没有看到任何 dahm 产品！
好的，试试访问josephaspey.com/products

标签： angularjs routing

【解决方案1】：

请将<base href="/" /> 添加到您的<head>

请看这里：

link

编辑

在我的情况下，您需要设置当前文件夹是

【讨论】：

嗨，我有这个。我将编辑我的答案以显示这一点。
嗨，编辑我对你的编辑的回答，请告诉我它是否适合你@ClarkySmiverz77
index.html 是我项目的根目录，所以 '/' 是正确的。
好的，所以 index.html 在项目的路径上。其余页面如下“app/components/x/x.html”