Question

我在Angular Js中有一个基本的单页面应用程序。我已经应用了路由并设置了Html5Mode＆＃39;为真。

我的网址已被清理，但现在他们在尝试访问网址时会产生404。

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

任何人都可以指出我正确的方向来设置网址以防止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);

    });

})();

的index.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>

Answer 1

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

请看这里：

link

修改

你需要在我的情况下设置当前文件夹

Angular JS 1路由404问题

1 个答案: