AngularJs $routeProvider is not working with MVC
When I am using $routeProvider with MVC.Net its not working.
I am using Write up Backend example for MVC.Net. Following is the route I am using
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:'/'});
});
but unfortunately it is not calling listitem or details .
This works fine. Setup your RouteConfig.cs as follows:
// 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" }
);
Then your angular config for routing like this:
.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);
}
]);
And your MVC controllers:
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");
}
}
Put your partial views in the shared folder.
Now, behind the scenes you can do everything like you normally would with an MVC controller and view, including razor and all that.
I have also this problem before I try this solution in config file.
config file
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 file
<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 -->
As @jpmorin suggested, unless for some reason you need to dynamically generate views in a way that AngularJS can't do, the MVC views are superfluous. You just need static files to serve, and some data-binding for them. Look at BreezeJS as a solution to that.
If this doesn't satisfy you, you would need to present your MVC code for a better answer. I personally suggest the former solution.
链接地址: http://www.djcxy.com/p/13592.html