AngularJs $routeProvider is not working with MVC

Question

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.

I am not sure that you should use the APS.NET MVC views with AngularJS as AngularJS is meant to handle all the UI work. You should probbably use only MVC as the backend to retrieve your data as an API. And if it is available to you, I suggest that you have a look at AngularJS + ASP.NET Web API. — jpmorin
I would like to handle only UI stuffs. I have created the partial view which I would like to call using angularJS. As I belive that the code given by me will check the URL and on basis of that it call templateUrl. But currently it only works with static html files. Is it only support html static files ? — pixelbyaj

Brandon Brandon · Accepted Answer · 2013-11-27T14:35:53

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.

AngularJs $routeProvider is not working with MVC

3 Answers