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.
