Asp.Net MVC 5 Angular Routing Not Working

Question

It's showing error resource cannot found. it's work in MVC 4 project. MVC Version issue or i'm missing something here? Please check screenshot for error details. Please help me to solve this problem . Thanks !

var APIURLPath = "http://localhost:51141/";
var SystemData;
var controllerProvider = null;
var LoadedMemberCards = [];
var AlfaCommApp = angular.module("AlfaCommApp", ['ngRoute', 'ngAvatar', 
'angularFileUpload', 'angular-jquery-validate', 'ngDialog', 'ngSanitize', 
'ui.bootstrap', 'ui.select'], function ($controllerProvider) {
controllerProvider = $controllerProvider;
}).config(function ($routeProvider)
{

$routeProvider.when('/Home',
 {
     templateUrl: '/AlfaUser/Home/Index'
 }).when('/AlfaUser/Connections',
 {
     templateUrl: '/AlfaUser/Home/Connections'
 }).when('/AlfaUser/Test123',
 {
     templateUrl: '/AlfaUser/Home/Test123'
 }).when('/AlfaUser/TestD',
 {
     templateUrl: '/AlfaUser/TestD/IndexA'
 }).otherwise({ redirectTo: '/Home' })
})

Controller

public class TestDController : Controller
{ 
    public ActionResult IndexA()
    {
        return PartialView();
    }
}

RouteConfig

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Http;
using System.Web.Routing;


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

        routes.MapHttpRoute(
        name: "DefaultApiWithAction1",
        routeTemplate: "api/{controller}/{action}/{id}",
        defaults: new { id = RouteParameter.Optional }
        ).RouteHandler = new SessionStateRouteHandler();

        routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        ).RouteHandler = new SessionStateRouteHandler();

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

Answer 1

When you use AngularJS (version 1) with ASP MVC. Then Your angular Routing must as same as ASP MVC routing.

Example:

ASP MVC Controller:

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

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

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

            return View();
        }
    }

ASP MVC RouteConfig:

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 }
        );
    }
}

Angular App.js (I am Using ui-router for routing):

var myApp = angular.module('myApp', ['ngResource', 'ngSanitize', 'ngTouch', 'ui.router', 'ui.bootstrap']);

myApp.constant('appSettings', { serverPath: "http://localhost:13124" });

myApp.config([
    "$stateProvider", "$urlRouterProvider", "$locationProvider",
    function ($stateProvider, $urlRouterProvider, $locationProvider) {

        $stateProvider
            .state('/', {
                url: "/",
                templateUrl: "/Home/index"
                // ,controller: 'HomeController'
            })
            .state('/About', {
                url: "/Home/About",
                templateUrl: "/Home/About"
            })
            .state('/Contact', {
                url: "/Home/Contact",
                templateUrl: "/Home/Contact"
            })

        $urlRouterProvider.otherwise("/");
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    }
]);