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

Question

I'm creating an angularJs application in MVC 5. I've created a directive as given below.

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

I have .cshtml file named ClusterButtonTemplate.cshtml and I created a partial view method in the controller class to return this view. So the angular js directive is binding the template.

I need to remove the method in mvc controller class and need to refer the template file directly. I don't want to use a cshtml file. I need a html file for template. I have created a ClusterButtonTemplate.html file. But while setting the template as below the browser shows a 404 error.

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

I didn't use angular js routing in my project. Everything is managed using the MVC routing. How can I fix this issue. Do I need to use Angular routing and MVC routing?

Can you directly load the html file by putting the path on the URL? Also you may use fiddler and check what is the actual path being loaded for the html file. — Bon Macalindong
– Bon Macalindong, Commented Dec 14, 2015 at 6:55

Will Ray · Accepted Answer · 2016-07-06 04:50:46Z

4

You'll need to put in in a place where MVC will not try to map the URL to a controller. By default, the /Content folder is ignored, so you could create a folder under it called "Templates" and use that for the URL.

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

answered Jul 6, 2016 at 4:50

Will Ray

11k3 gold badges49 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mikael Puusaari Over a year ago

Thanks, saved me after trying a hundred other options given in other threads. Was close to making a new question for this :)

Bon Macalindong · Accepted Answer · 2015-12-14 07:01:10Z

0

You may try to use a leading slash since it's loaded using a relative path.

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

answered Dec 14, 2015 at 7:01

Bon Macalindong

1,32013 silver badges20 bronze badges

2 Comments

NOBLE M.O. Over a year ago

Thank you for your reply. It is not worked. I'm getting a 404 not found exception. The file is located in Views/Home/ClusterButtonTemplate.html. I tried all possible paths. But issue not fixed. I think the issue is due to Angular JS and MVC routing conflict. But I don't know how to fix this.

Bon Macalindong Over a year ago

Ahh. So that's why it is not working since it's located in Views/Home location. Change your url to '/Views/Home/ClusterButtonTemplate.html

Gianluca Conte · Accepted Answer · 2018-06-15 18:38:23Z

0

That's very simple! Just put an html file template (as content) in the folder that you prefer (ie. app/phone-list/ in project root) then assign

templateUrl: '/app/phone-list/phone-list.template.html'

to controller templateUrl property. Avoid the views, model or controller folders...

answered Jun 15, 2018 at 18:38

Gianluca Conte

5004 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related