How to load templates from views folder with AngularJS and asp.net MVC 4

It took me a while to figure out how to get angularjs working with asp.net mvc -- this isn't 100% the way you did things, but you might want to reconsider to this approach (it's not that much different anyway)

var AccountApp = angular.module("AccountApp", ['$strap.directives', 'ngResource', 'ngGrid', 'filePickers']).config(function ($routeProvider) {    $routeProvider.        when('/', { controller: ListCtrl, templateUrl: 'Templates/Account/List' }).        when('/', { controller: EditCtrl, templateUrl: 'Templates/Account/Edit' }).        otherwise({ redirectTo: '/' });});

Ok, notice I am calling Templates/Account/List.

In my RouteConfig.cs

        routes.MapRoute(            name: "Templates",            url: "Templates/{controller}/{template}",            defaults: new { action = "Template" }        );

Now in each controller, I have this corresponding action that directs the call to the appropriate partial view:

    public ActionResult Template(string template)    {        switch (template.ToLower())        {            case "list":                return PartialView("~/Views/Account/Partials/List.cshtml");            case "create":                return PartialView("~/Views/Account/Partials/Create.cshtml");            case "edit":                return PartialView("~/Views/Account/Partials/Edit.cshtml");            case "detail":                return PartialView("~/Views/Account/Partials/Detail.cshtml");            default:                throw new Exception("template not known");        }    }

It all starts off with the Index() action in the controller though.

    public ActionResult Index()    {        return View();    }

Putting it all together, my directory structure looks like this.

/Views    /Account        /Partials             List.cshtml             Create.cshtml             Edit.cshtml             Detail.cshtml        Index.cshtml

I'm biased, since this is my approach, but I think it makes things super simple and organized nicely. Index.cshtml contains the ng-view and all of the other parts of the application are nicely contained in partial views that are loaded through that Template action. Hope this helps.

I'm facing the same problem,and I got the solution.

Sounds like you wanna let the 'Home.cshtml' to be the base and load in the 'search.html' by the AngularJS's routing,right?(Just like the MVC-way a little be:The '_Layout.cshtml' is the base,let us can load in different views we navigate.)

To reach that,just add the ng-view tag into the Home.cshtml!The AngularJS routing will work for you.

MAKE SURE the views loaded do not put in the Views folder!(Or you must access the views by firing requests to the controllers to obtain them.)

Here is the example.

We have a Server Side (ASP.NET MVC) Controller :

HomeController with three actions.

public class HomeController : Controller{    // GET: Home    public ActionResult Index()    {        return View();    }    public ActionResult GetPartial1()    {        return View();    }    public ActionResult GetPartial2()    {        return View();    }}

And in your angular code(app.js) just set the URL of the ng-view to these action to obtain the views.

angular.module('myApp', [    'myApp.controllers',    'ngRoute']);angular.module('myApp').config(function ($routeProvider, $locationProvider) {    $routeProvider.when('/view1', {        controller: 'HomeController',        templateUrl:'Home/GetPartial1'    }).when('/view2', {        controller: 'HomeController',        templateUrl:'Home/GetPartial2'    }).otherwise({redirectTo:'/view1'});    $locationProvider.html5Mode({        enabled: true,        requireBase: false    });});