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

Question

Apparently I'm very new to angularJS and asp.net MVC4. here is the script:

I have a simple MVC4 project that contains 1 controller and 1 view (i.e.: home.cshtml). Now I added an HTML file (ie: search.html) to a folder called "Templates", which is located in the main directory of the project (outside the views folder). I want to load "search.html" using angularJS so that I can include it in "home.cshtml", how can I do this? Here is what I have so far:

angular Module: (located in the script folder)

var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) { $routeProvider.when('/search', { templateURL: '/Templates/search.html', controller: 'SearchController' }); $routeProvider.otherwise({ redirectTo: '/search' }); }); bfapp.controller('SearchController', function () { }); 

Hope this is clear to you. Any help would be appreciated! Thanks..

Answer 1

It took me a while to figure out how to get angularjs to work with asp.net mvc - it's not 100% the way you did something, but you can rethink this approach (it is 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 that I call 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 a corresponding action that directs the call to the corresponding 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 with the action of Index () in the controller.

  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 am biased as this is my approach, but I think it makes things very simple and organized. Index.cshtml contains ng-view, and all other parts of the application are well contained in partial views loaded through this Template action. Hope this helps.

Answer 2

I ran into the same problem and I got a solution.

It looks like you want "Home.cshtml" to be the base and load in "search.html" using AngularJS routing, right? (Like the MVC path a bit: "_Layout.cshtml" is the base, we can load the different views that we move.)

To achieve this, simply add the ng-view tag to Home.cshtml! AngularJS routing will work for you.

MAKE SURE that the downloaded views do not fit into the Views folder! (Or you should access the views by requesting controllers to request them.)

---

Here is an example.

We have a server-side controller (ASP.NET MVC):

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 ng-view url for these actions to get 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 }); });