ASP.NET with angularJS fails to load template (Blank page with no error)

Question

I have problem with routing inside ASP.NET application. When I move my angularJS outside of ASP.NET MVC it's working fine (on XAMPP) but when I run it inside Visual Studio 2013 my Index page is blank. I really don't know where's the problem... Does someone knows where's the problem?

Here is code that I am using:

angularJS routing script:

var app = angular.module('contactsManager', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when('/contacts',
            {
                controller: 'ContactsController',
                templateUrl: 'templates/contacts.html'
            })
        .when('/add-contact',
            {
                controller: 'ContactAddController',
                templateUrl: 'templates/addContact.html'
            })
        .when('/edit-contact/:contactId',
            {
                controller: 'ContactEditController',
                templateUrl: 'templates/editContact.html'
            })
        .when('/display-contact/:contactId',
            {
                controller: 'ContactDetailsController',
                templateUrl: 'templates/displayContact.html'
            })
        .otherwise({ redirectTo: 'templates/contacts' });
});

ASP.NET Home Controller:

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Templates()
        {
            return PartialView();

        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }

ASP.NET Route Config:

public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute("templates", "templates/{action}/{name}",
             new { controller = "Home", action = "Templates", name = "" }
            );
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }

How do you deploy your application? Do you run it from IIS Express? What URL does it have? Also you need to sync routing configuration in angular and ASP .Net. — oryol
– oryol, Commented Dec 23, 2014 at 17:21
I run it on default IIS server that comes with ASP.NET Visual Studio 2013. I don't know where's the problem. How do I sync routing configuration with angular and asp.net ? @oryol — jureispro
– jureispro, Commented Dec 23, 2014 at 17:29

GvM · Accepted Answer · 2014-12-23 18:16:36Z

2

On the client side you load templates from urls like templates/{something}.html. But on the server side your routing is configured as templates/{action}/{name}. As you see it doesn't have .html suffix and has one more part: {name}. Also you don't have name parameter in your actions. Do you really need it? I suggest you try templates/{action}.html routing template on the server side.

edited Dec 23, 2014 at 18:16

GvM

1,73314 silver badges15 bronze badges

answered Dec 23, 2014 at 17:46

oryol

5,2582 gold badges25 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jureispro Over a year ago

your suggestion worked well for me. Thank you for help

Collectives™ on Stack Overflow

ASP.NET with angularJS fails to load template (Blank page with no error)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related