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

Question

Apparently, I'm very new to angularJS and asp.net MVC4. here's the scenario:

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

angular Module: (Located in Scripts 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 clear for you. any help would be appreciated! Thanks..

Answer 1

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.

Answer 2

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