Does Angular routing template url support *.cshtml

Question

I am working on a MVC 5 project. When I use a html page at my views, it load that page but when I use .cshtml page it is not loading the view. The Blank page appears.

$urlRouterProvider
    .otherwise('/app/dashboard');

$stateProvider            
    .state('app', {
        abstract: true,
        url: '/app',
        templateUrl: 'tpl/app.html'
    })
    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: 'tpl/app_dashboard.html'
    })

Please guide me how to use cshtml file or the best way to do it.

Answer 1

Yes, you can.

Adding a similar answer to Yasser's, but using ngRoute:

1) Instead of referencing your partial HTML, you need to reference a Controller/Action to your ASP.NET MVC app.

.when('/order', {
    templateUrl: '/Order/Create',
    controller: 'ngOrderController' // Angular Controller
})

2) Your ASP.NET MVC will return a .cshtml view:

public class OrderController : Controller
{
    public ActionResult Create()
    {
        var model = new MyModel();
        model.Test= "xyz";

        return View("MyView", model);
    }
}

3) Your MyView.cshtml will mix Razor and Angular. Attention: as its a partial for your Angular app, set the layout as null.

@model MyProject.MyModel

@{
   Layout = null;
}

<h1>{{ Test }}</h1> <!-- Angular -->
<h1>Model.Test</h1> <!-- Razor -->

Answer 2

You cannot.

You cannot use path to a .cshtml file in your template url of your angular route. Can you open the .cshtml file in your browser ? No right ? The same thing applies here.

Workaround :

.cshtml file contains server side code, to render it you need to use a controller and action. They will render that .cshtml file for you. So have a controller action return that view for you and use the url to the controller action in your angular route.

eg:

state('app.dashboard', {
        url: '/dashboard',
        templateUrl: '/dashboard/index'
     })

with

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

p.s: have tried and this worked for me

Answer 3

cshtml is essentially inline csharp code with razor syntax and is render to html on server site so you can't use in angular routing as browser is not recongnise c#

Answer 4

You can't mix angularJs and Razor views, razor is loaded in the server and angular runs in the client it uses javascript that runs in the browser for rendering the views, that's why people tend to use a rest api as a backend in your case since you are using .net it could be web API or service stack.

what you can do is to execute the razor view as the main "index page" but from there let angularjs handle the routing for the "internal" pages.

remember that angular has been built upon the idea of a single page application which is a different perspective of asp.net mvc architecture.