Я изучал и делал примеры с угловыми и Asp.Net MVC. Я столкнулся с проблемой с уловом по всему маршруту. После добавления уловов всех маршрутов мой браузер продолжал сбой. Если я удаляю catch все, то URL-адрес работает отлично, за исключением обновления страницы с сообщением об ошибке 404. Что я сделал здесь неправильно?
My App and Controller:
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(['$routeProvider','$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/AddNewOrder', {
templateUrl: 'templates/AddOrder',
controller: 'AddOrderController'
}).when('/ShowOrders', {
templateUrl: 'templates/ShowOrders',
controller: 'ShowOrdersController'
}).otherwise({
redirectTo: '/ShowOrders'
});
$locationProvider.hashPrefix('!').html5Mode(true);
}
]);
myApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is the add new order controller screen';
});
myApp.controller('ShowOrdersController', function ($scope) {
$scope.message = 'This is the show orders controller';
});
это конфигурация маршрута, которую я создал.
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "AddNewOrder",
url: "templates/Add_Order",
defaults: new { controller = "Templates", action = "AddOrder" });
routes.MapRoute(
name: "ShowOrders",
url: "templates/show_orders",
defaults: new { controller = "Templates", action = "ShowOrders", donuts = UrlParameter.Optional });
routes.MapRoute(
name: "Default",
url: "{*url}",
defaults: new { controller = "Home", action = "Index" });
}
}
//Индексная страница
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="myApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<class="nav">
<><href="/AddNewOrder"> Add New Order </a></li>
<><href="/ShowOrders"> Show Order </a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
@*<script src="app.js"></script>*@
<script src="~/Scripts/myApp.js"></script>
</body>
</html>
Основная проблема заключалась в использовании ['ui.router'] вместо ['ngRoute']. Я изменил его [ngRoute], и я по-прежнему получал такое же поведение. Однако после очистки кеша и перезагрузки моего браузера я вижу ожидаемое поведение.
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-strict-di>
<head>
<title>AngularJS Routing example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li><a href="/NewOrder"> Add New Order </a></li>
<li><a href="/ShowOrders/123"> Show Order </a></li>
<div ng-controller="CalculatorController">
<li><a href="/Calculator">Calculator</a></li>
</div>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
@* <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>*@
@*<script src="app.js"></script>*@
<script src="~/Scripts/myApp.js"></script>
</body>
//the new module using ngRoute.
var myApp = angular.module('myApp', ['ngRoute']);