AngularJs $ routeProvider不适用于MVC
当我使用$routeProvider与MVC.Net它不工作。
我正在为MVC.Net使用Write up Backend示例。 以下是我正在使用的路线
config(function($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'home/listitem' }).
when('/home', { controller: ListCtrl, templateUrl: 'home/listitem' }).
when('/edit/:projectId', { controller: EditCtrl, templateUrl: '/home/detail' }).
when('/new', { controller: CreateCtrl, templateUrl: '/home/detail' }).
otherwise({redirectTo:'/'});
});
但不幸的是，它不会调用listitem或细节 。
这工作正常。 如下设置您的RouteConfig.cs：
// Will handle partial page view requests
routes.MapRoute(
name: "Partials",
url: "partials/{controller}",
defaults: new { controller="Home", action = "Index" }
);
// Will handle all other requests by sending it to the main controller
routes.MapRoute(
name: "Application",
url: "{*url}",
defaults: new { controller = "Main", action = "Index" }
);
然后你的角度配置为这样的路由：
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/partials/home',
controller: 'HomeController'
})
.when('/home', {
templateUrl: '/partials/home',
controller: 'HomeController'
})
.when('/gallery', {
templateUrl: '/partials/gallery',
controller: 'GalleryController'
});
.when('/services', {
templateUrl: '/Services',
controller: 'ServicesController'
});
// NOTE: This part is very important
$locationProvider.html5Mode(true);
}
]);
而你的MVC控制器：
public class MainController : Controller
{
public ActionResult Index()
{
return View();
}
}
public class HomeController : Controller
{
public ActionResult Index()
{
return PartialView("_Home");
}
}
public class GalleryController : Controller
{
public ActionResult Index()
{
return PartialView("_Gallery");
}
}
将你的部分视图放在共享文件夹中。
现在，在幕后，您可以像使用MVC控制器和视图一样完成所有操作，包括剃须刀等等。
在配置文件中尝试此解决方案之前，我也遇到了这个问题。
配置文件
myapp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
// Specify the three simple routes ('/', '/About', and '/Contact')
$routeProvider.when('/', {
templateUrl: '/Home/Home',
controller: 'homeCtrl',
});
$routeProvider.when('/Login', {
templateUrl: '/account/Index',
controller: 'loginCtrl',
});
$routeProvider.when('/About', {
templateUrl: '/Home/About',
controller: 'aboutCtrl',
});
$routeProvider.when('/Contact', {
templateUrl: '/Home/Contact',
controller: 'contactCtrl'
});
$routeProvider.when('/First', {
templateUrl: '/account/First',
controller: 'firstCtrl'
});
$routeProvider.when('/Fullpage', {
templateUrl: '/Home/Fullpage',
controller: 'fullpageCtrl'
});
$routeProvider.otherwise({
redirectTo: '/'
});
// Specify HTML5 mode (using the History APIs) or HashBang syntax.
//$locationProvider.html5Mode({ enabled: true, requireBase: false });
$locationProvider.html5Mode(false);}]);
index.cshtml文件
<a class="brand" href="#/">Simple Routing</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#/">Home</a></li>
<li><a href="/#/About">About</a></li>
<li><a href="/#/Contact">Contact</a></li>
<li><a href="/#/Login">Login</a></li>
<li><a href="/#/First">first</a></li>
<li><a href="/#/Fullpage">fullpage</a></li>
</ul>
</div><!--/.nav-collapse -->
正如@jpmorin所建议的，除非出于某种原因，您需要以AngularJS无法做到的方式动态生成视图，否则MVC视图是多余的。 你只需要静态文件来提供服务，并为它们提供一些数据绑定。 看看BreezeJS是一个解决方案。
如果这不能满足您的需求，您需要展示您的MVC代码以获得更好的答案。 我个人建议以前的解决方案。
链接地址: http://www.djcxy.com/p/13591.html