在mvc 5项目中使用角度指令模板url中的html文件

我正在MVC 5中创建angularJs应用程序.我已经创建了一个指令,如下所示.

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

我有.cshtml文件命名ClusterButtonTemplate.cshtml,我在控制器类中创建了一个部分视图方法来返回此视图.因此该angular js指令绑定了模板.

我需要删除mvc控制器类中的方法,需要直接引用模板文件.我不想使用cshtml文件.我需要一个html模板文件.我创建了一个ClusterButtonTemplate.html文件.但是,当设置模板如下面的浏览器显示一个404 error.

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

我没有angular js在我的项目中使用路由.一切都是用MVC routing.来管理的.我该如何解决这个问题.我需要使用Angular routing和MVC routing？