如何使用 Angular 模块'ui-route'在指令中查找模板 URL，而不会在 MVC .NET 上收到错误

Question

如何使用角度模块'ui-route'在指令中查找templateUrl，而不会在MVC .NET上得到错误"NetworkError： 403 Forbidden - http://www.myapp.com/~/App/XV-Directives/form-input-text-template.vbhtml"

1 个解决方案：这是一个答案，没有使用角度的"ui-rout"，使用 MVC 项目 ClickHere 的网络配置;此解决方案允许任何人查看您的应用程序文件

var xvFormCreator = function () {
    //pass the template name and the data source of the template
    return {
        restrict: 'EA',
        scope: {                                                                                    
            sourceData: '=',
        },
        templateUrl: '~/App/XV-Directives/form-input-text-template.vbhtml'
    };
};
// html template string form  
/*  '  <div  class="form-group">' +
                              '<div class="col-md-6">' +
                                        '<label class="text-info">{{ sourceData.Qestion }} :</label>' +
                                 '</div>' +
                               '<div class="col-md-6">' +
                                                '<textarea' +
                                                '	  name="{{ sourceData.Qestion }} "' +
                                                '	  class="form-control"' +
                                                '     rows="1"'+
                                                '	  placeholder="{{sourceData.TemplateType }}"' +
                                                '	  value="{{ sourceData.Answer }}"></textarea>' +
                                '</div>' +
                      ' </div>'        
html template 
<div class="form-group">
    <div class="col-md-6">
        <label class="text-info">{{ sourceData.Qestion }} :</label>
    </div>
    <div class="col-md-6">
        <input name="{{ sourceData.Qestion }} "
               class="form-control"
               type="text"
               placeholder="{{sourceData.TemplateType }}"
               value="{{ sourceData.Answer }}" />
    </div>
</div>*/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 1

MVC 有自己的路由方法，您遇到的主要问题是您将原始视图用作模板，这在遵循 MVC 的范式后不是最佳的，asp.net。

对我来说，解决方案非常简单，坚持在服务器端使用 MVC 方法，并根据要渲染的视图为您的模板定义路由。

换句话说，与其使用 ~/App/XV-Directives/form-input-text-template.vbhtml，不如使用控制器创建一个路由，该控制器将返回模板所需的视图，如果视图只是没有模型的简单 html 视图并不重要，重要的是您将拥有像"/home"这样的路由， "/home/action"、"/home/template1"或任何你想在那里使用的名称。

定义该路由后，将其用作客户端模板中的 URL，如下所示：

var xvFormCreator = function () {
    //pass the template name and the data source of the template
    return {
        restrict: 'EA',
        scope: {                                                                                    
            sourceData: '=',
        },
        templateUrl: '/home/template1'
    };
};

顺便说一下，符号 ~ 在客户端不起作用（因为仅适用于 MVC 服务器端上下文）尝试将应用的相对完整路径用于您拥有的任何其他资源。

试试吧，希望对您有所帮助！

Answer 2

到目前为止，这是我发现编辑 web.config 文件的最佳答案，允许从应用程序访问图像和页面。

 <system.webServer>  
<handlers>
  <add name="JavaScriptHandler" path="*.js" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <add name="HtmlScriptHandler" path="*.html" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <add name="SVGScriptHandler" path="*.svg" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <add name="PNGScriptHandler" path="*.png" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <add name="JPEGScriptHandler" path="*.jpeg" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
 </handlers>