Using html file in angular directive template template in mvc 5 project

Question

I am creating an angularJs application in MVC 5. I created a directive as shown below.

app.directive('clusterButton', function () { return { restrict: 'E', scope: { clusterInfo: '=info' }, templateUrl: function(elem, attr){ return 'ClusterButtonTemplate'; } }; }); 

I have a .cshtml file called ClusterButtonTemplate.cshtml and I created a partial view method in the controller class to return this view. Therefore, the angular js directive binds the template.

I need to remove this method in the mvc controller class, and you need to reference the template file directly. I do not want to use the cshtml file. I need an html file for the template. I created the ClusterButtonTemplate.html file. But when setting up the template below, the browser shows 404 error .

 app.directive('clusterButton', function () { return { restrict: 'E', scope: { clusterInfo: '=info' }, templateUrl: function(elem, attr){ return 'ClusterButtonTemplate.html'; } }; }); 

I have not used angular js routing in my project. Everything is managed using MVC routing . How can I fix this problem. Do I need to use Angular routing and MVC routing ?

Answer 1

You will need to enter a place where MVC will not try to map the controller URL. By default, the /Content folder is ignored, so you can create a folder below it called "Templates" and use it for the URL.

 templateUrl: function(elem, attr){ return '/Content/Templates/ClusterButtonTemplate.html'; 

Answer 2

You can try using a leading slash as it loads using a relative path.

  templateUrl: function(elem, attr){ return '/ClusterButtonTemplate.html'; }