Angularjs html5Mode 页面刷新中断了asp.net mvc 中的路由 [英] Angularjs html5Mode page refresh breaks the routing in asp.net mvc
问题描述
我正在我的 asp.net 应用程序中执行 angularjs 路由.我有一个文件夹名称模板，其中包含 3 个 html 页面 Home、About、Error.这是我的 app.js 文件
var app = angular.module('myApp', ['ngRoute','ngAnimate']);app.controller('HomeController', function ($scope) {$scope.Message = "我们在首页";});app.controller('AboutController', function ($scope) {$scope.Message = "我们在关于页面";});app.controller('ErrorController', function ($scope) {$scope.Message = "404 页面未找到";});app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {$routeProvider.什么时候('/'， {重定向到:函数(){回家';}}).当('/家'，{templateUrl: '/template/Home.html',控制器:'家庭控制器'}).当('/关于'，{templateUrl: '/template/About.html',控制器:'关于控制器'}).当('/错误'，{templateUrl: '/template/Error.html',控制器:'错误控制器'}).除此以外({重定向到:'/错误'});$locationProvider.html5Mode(true);}]);Home.html 包含
<h1>主页</h1><h3>{{消息}}</h3>等等.
在我的 Layout.cshtml 文件中，我包含了模块 myApp 和 base 属性.
<html ng-app="myApp"><头><meta charset="utf-8"/><meta name="viewport" content="width=device-width"/><base href="/"/>
正文定义了一些链接
<div><ul><li><a href="/home">首页</a></li><li><a href="/about">关于</a></li><li><a href="/erro">网址无效</a></li>
<div class="容器"><div data-ng-view="" id="ng-view" class="slide-animation"></div>
当我从家导航到其他人时，路由工作正常.但是当我刷新页面时，它给出了找不到资源的错误.为此，我还在我的 web.config 文件中包含了这样的服务器端重写.
<规则><规则名称="主规则" stopProcessing="true"><match url=".*"/><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/></条件><action type="重写" url="/"/></规则></规则></rewrite> 问题仍然需要帮助解决.谢谢.
我已经通过更改 Route.Config 文件解决了这个问题
routes.MapRoute(名称:默认"，url: "{controller}/{action}/{id}",默认值:new { controller = "Home", action = "Index", id = UrlParameter.Optional });将其替换为
routes.MapRoute(name: "应用程序",网址:{*网址}"，默认值:new { controller = "Home", action = "Index" });I am performing angularjs routing in my asp.net application.I have a folder name template which consist of 3 html pages Home,About,Error. Here is my app.js file
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 consist of
<div ng-controller="HomeController">
<h1>Home Page</h1>
<h3>{{Message}}</h3>
and so on.
In my Layout.cshtml file I have included the module myApp and base attribute.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<base href="/" />
Body has define some links
<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>
Routing working fine when I navigate from home to others . But when I refreshes about page it gives resource not found error.For this I have also included server side rewrite like this in my web.config file.
<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>
Still the problem remains need helping in solving it . Thanks.
I have solved it by making changes in Route.Config file
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
by replacing this with
routes.MapRoute(
name: "Application",
url: "{*url}",
defaults: new { controller = "Home", action = "Index" });
这篇关于Angularjs html5Mode 页面刷新中断了asp.net mvc 中的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
