CODEWITHSUNDEEP
angularjsasp.net-mvcrazor
NOBLE M.O.
NOBLE M.O.

Reputation: 194

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

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?

Upvotes: 5

Views: 3355

Answers (3)

Gianluca Conte
Gianluca Conte

Reputation: 500

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...

Upvotes: 0

Will Ray
Will Ray

Reputation: 10889

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';

Upvotes: 4

Bon Macalindong
Bon Macalindong

Reputation: 1320

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

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

Upvotes: 0

Related Questions