Angular ui路由和Asp.net路由不起作用
Angular ui-routing and Asp.net Route not Working
我对Angular还很陌生,我正在尝试用一个参数做一个例子。没有参数的链接工作正常,但有参数的链接不工作。我在这里做错了什么?
应用程序和控制器:
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(['$routeProvider','$locationProvider', '$httpProvider',
function ($routeProvider, $locationProvider, $httpProvider) {
$locationProvider.hashPrefix('!').html5Mode(true);
$routeProvider
.when('/NewOrder', {
templateUrl: 'templates/NewOrder',
controller: 'AddOrderController'
}).when('/ShowOrders/:orderID', {
templateUrl: function (params) {return '/templates/ShowOrders?orderID=' + params.orderID; },
controller: 'ShowOrdersController'
}).otherwise({
redirectTo: '/ShowOrders'
});
}
]);
myApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is the add new order controller screen';
});
myApp.controller('ShowOrdersController', function ($scope,$routeParams) {
$scope.message = 'This is the show orders controller';
$scope.order_id = $routeParams.orderID;
});
Route.config文件:
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "NewOrder",
url: "templates/NewOrder",
defaults: new { controller = "Templates", action = "AddOrder" });
routes.MapRoute(
name: "ShowOrders",
url: "templates/ShowOrders/{orderID}",
defaults: new { controller = "Templates", action = "ShowOrders", orderID = "" });
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
routes.MapRoute(
name: "Defaults",
url: "{*url}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
html文件:
<!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>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
@*<script src="app.js"></script>*@
<script src="~/Scripts/myApp.js"></script>
</body>
首先不应该混淆angular-router
&ui-router
,因为目前您使用的是angular-route
,因此您应该使用ngRoute
模块而不是ui-router
var myApp = angular.module('myApp', ['ngRoute'/*, otherDependencies */]);
在使用angular的1.0.7
版本时,templateUrl
函数中不能有params
,相反,您应该使用最新版本,该版本添加了对$routerProvider
templateUrl函数中$routeParmas
的支持(实际上angular从1.1+开始就添加了此支持(。
或者,如果出于某种原因,您想坚持使用旧版本,那么您可以在.config
函数中包含$routeParams
作为依赖项。
.when('/ShowOrders/:orderID', {
templateUrl: '/templates/ShowOrders?orderID=' + $routeParams.orderID,
controller: 'ShowOrdersController'
})
EDIT注意-根据Charlietfl下面的评论,这是错误的答案。根据堆栈溢出的偏好,我不会删除它,因为错误的内容有时也有助于引导用户找到答案。
你必须原谅,因为做angular+MVC4已经一年多了。。。我甚至不确定这是否应该成为评论的"答案">
但是
我对角度路由的记忆是,它们只会根据散列后发生的事情发生(除非有配置设置(
你能花点时间测试一下路线吗:
/ShowOrders/123#/ShowOrders/123
看看有没有什么变化?同时,我会浏览一些旧代码,看看我是否能回忆起角度路由的细节。
相关文章:
- ASP.NET MVC路由-动态加载.js脚本
- 在ASP.NET Web API 2项目中设置Angular路由
- Web API 应用程序中 asp.net 路由和路由前缀问题
- 带有 MVC asp.net 角度路由删除 URL 上的哈希 #
- 我可以在 angle js asp.net mvc 中调用控制器中的路由提供程序服务吗?
- ASP.NET MVC 4 路由问题
- Javascript 无法解析正确的图像路径,当使用 URL 路由在 ASP.Net 中请求页面时
- ASP.Net MVC Razor - Javascript 函数路由问题
- 角度路由html5mode ASP.NET
- ASP.NET 4.0 WebForms路由Javascript不起作用
- Angular路由模板url支持ASP.Net MVC 5项目中的*.cshtml文件吗
- 使用AngularJS的ASP.NET 5路由导航
- 使用.net MVC的Angular路由
- Angular ui路由和Asp.net路由不起作用
- . net路由的奇怪行为
- AngularJS . net核心路由$injector:modulerr
- 处理ASP.. NET MVC路由在外部JavaScript
- 对峙:ASP.NET mvc声明式、格式字符串式路由和node's命令式路由
- asp.net MVC路由- javascript url 404错误
- 具有ASP.NET MVC路由的Angular$locationProvider