ASP.NET with angularJS fails to load template

Question

I moved my angularJS application from xampp to ASP.NET Visual Studio. When I load my application I got error message that template files could not be found.

I tried several method but none of them worked... Does someone knows where's the problem?

Screenshot of file hierarchy:

enter image description here

here is JS code that includes templates:

app.config(function ($routeProvider) {
    $routeProvider
        .when('/contacts',
            {
                controller: 'ContactsController',
                templateUrl: '"/home/contacts.html'
            })
        .when('/add-contact',
            {
                controller: 'ContactAddController',
                templateUrl: '/home/addContact.html'
            })
        .when('/edit-contact/:contactId',
            {
                controller: 'ContactEditController',
                templateUrl: '/home/editContact.html'
            })
        .when('/display-contact/:contactId',
            {
                controller: 'ContactDetailsController',
                templateUrl: '/home/displayContact.html'
            })
        .otherwise({ redirectTo: '/contacts' });
});

Here is RouteConfig.cs (I leave it as it was when I created new project)

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

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

What's your controller look like? At a guess I'd suggest that the .html isn't required. — Dave Walker
– Dave Walker, Commented Dec 22, 2014 at 22:44
@DaveWalker what controller you want to know? ASP.NET controller is empty and this is javascript controller for angularJS — jureispro
– jureispro, Commented Dec 22, 2014 at 22:49
So the .html are pure html? In this case Wayne is correct you aren't referencing them from the root of the site. If you wanted to get MVC to generate the controller then you would have actions in the HomeController (e.g. public void AddContact() { return View();} — Dave Walker
– Dave Walker, Commented Dec 22, 2014 at 23:55
templates are pure HTML @DaveWalker . Do I need to modify HomeControlers.js ? I leave it blank... — jureispro
– jureispro, Commented Dec 23, 2014 at 11:48

jingel · Accepted Answer · 2014-12-23 12:17:17Z

5

If you are using the default routing mechanism of ASP.NET (MVCx ?) and ask that app for a url like '/home/contacts.html' ASP.NET will look for a file called HomeController.cs in which it will look for an action called 'contacts.html'.

Because the default pattern is {controller}/{action}/{id}.

Show us your RouteConfig.cs. You may need a rule to bypass the routing of ASP and serve the views as static files to get it working for angular.

I think view folder has a special function in MVC and can not be used to serve static files. Would put the .html files in another kind of static directory and try it from there.

Edit:

If you want go the SPA way simply put your html views inside an seperate folder (e.g.: angularviews) in the ASP project root folder and adjust the RouteConfig.cs like this:

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

        //exclude template folder from routing
        routes.IgnoreRoute("angularviews/{*pathInfo}");

        //add routes for api calls and stuff you need mapped to an asp controller here
        /*
         ...
        */

        //always deliver the main template for all requests
        routes.MapRoute(
            name: "SPA",
            url: "{*catchall}",
            defaults: new { controller = "Home", action = "Index" }
        );

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

Then load your views like 'angularviews/view1.html'

edited Dec 23, 2014 at 12:17

answered Dec 22, 2014 at 23:57

jingel

2961 silver badge3 bronze badges

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

3 Comments

jureispro Over a year ago

Thank you for answer. I edited my post with çode that you requested.

jingel Over a year ago

Edited my answer with adjusted RouteConfig to get you started.

jureispro Over a year ago

I have addeed your code but problem is still there. Do I need to define routes.MapRoute() for each .html template?

Collectives™ on Stack Overflow

ASP.NET with angularJS fails to load template

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related