Question

我在我的asp.net应用程序中执行angularjs路由。我有一个文件夹名称模板，包含3个html页面Home，About，Error。这是我的app.js文件

 var app = angular.module('myApp', ['ngRoute','ngAnimate']);

app.controller('HomeController', function ($scope) {
    $scope.Message = "We are in home page";
});
app.controller('AboutController', function ($scope) {
    $scope.Message = "We are in about page";
});
app.controller('ErrorController', function ($scope) {
    $scope.Message = "404 page not found";
});

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.
         when('/', {
             redirectTo: function () {
                 return '/home';
             }
         }).
        when('/home', {
            templateUrl: '/template/Home.html',
            controller: 'HomeController'
        }).
        when('/about', {
            templateUrl: '/template/About.html',
            controller: 'AboutController'
        }).
         when('/error', {
             templateUrl: '/template/Error.html',
             controller: 'ErrorController'
         }).
    otherwise({
        redirectTo: '/error'
    });
    $locationProvider.html5Mode(true);
}]);

Home.html包含

<div ng-controller="HomeController">
<h1>Home Page</h1>
<h3>{{Message}}</h3>

等等。

在我的Layout.cshtml文件中，我已经包含了模块myApp和base属性。

   <!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <base href="/" />

Body定义了一些链接

<body>
<div>
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/erro">Invalid Url</a></li>
    </ul>
</div>
<div class="container">
    <div data-ng-view="" id="ng-view" class="slide-animation"></div>
</div>

当我从家里导航到其他人时，路由工作正常。但是当我刷新页面时它会给资源找不到错误。为此，我还在我的web.config文件中包含了这样的服务器端重写。

   <rewrite>
        <rules> 
          <rule name="Main Rule" 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>

enter image description here

问题仍然需要帮助解决它。感谢。

Answer 1

我通过在Route.Config文件中进行更改来解决它

  routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );

将其替换为

 routes.MapRoute(
       name: "Application",
       url: "{*url}",
       defaults: new { controller = "Home", action = "Index" });

Answer 2

您必须重定向到您的基本网址（Angular App可以启动的位置），而不是url="/home"，而是url="/"

Angularjs html5Mode页面刷新打破了asp.net mvc中的路由

2 个答案: