我应该如何在 Angular ui-router 中创建 templateUrl 属性的路径？

Posted 2023-03-07

【中文标题】我应该如何在 Angular ui-router 中创建 templateUrl 属性的路径？

【英文标题】：how should I create the path of templateUrl property in Angular ui-router?

【发布时间】：2015-01-22 08:00:32

【问题描述】：

请帮忙！

我试图弄清楚为什么 chrome 控制台返回我找不到我的“home.html”模板GET http://localhost:3000/home.html 404 (Not Found)。 恐怕我没有设置正确的“templateUrl”属性的路径。

这是我的文件夹结构：

app.js
bin/
node_modules/
package.json
public/
---------javascript/
-------------------angularApp.js
routes/
views/
----------index.ejs
----------home.html

这是我的配置代码（位于 angularApp.js 中）

angular.module('supervisor', ['ui.router'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) 
        $stateProvider
            .state('home', 
                url: '/home',
                templateUrl: '/home".html',
                controller: 'MainCtrl'
            );

        $urlRouterProvider.otherwise('/home');
    
])

我也尝试了不同的路径，例如“../../home.html”，但没有成功。如果我使用内联模板，它就可以工作（<script type="text/ng-template" id="/home.html">Hello!</script>）。

谢谢！

【参考方案1】：

您似乎正在使用 express 来为您的应用程序提供服务。 Express 是一个服务器端框架，而 Angular 是一个客户端框架。您不应该混合使用 2 个代码库。您在 Angular 中使用的所有内容都应作为静态资源。您很可能将公用文件夹作为静态路由提供服务。所以很可能你需要像这样修改你的结构（我将如何构建它）：

public
--app
----scripts
------angularApp.js
----views
------home.html

那么你的模板网址应该是'/app/views/home.html'

【讨论】：

嗨@Vadim，谢谢你的回答，你打破了我6小时的连续调试。我按照流行的thinkster.io/angulartutorial/mean-stack-tutorial 课程的说明进行操作，结果我掉进了坑里。他们只提供内联模板作为实例，这对于像我这样的初学者来说可能是戏剧性的，当他尝试使用分离的模板文件而不是内联模板时，因为结构似乎不同。再次感谢你，你救了我:)

【参考方案2】：

MVC 默认保护视图文件夹。

在使用角度路由时将 HTMLHandler 行添加到 views\web.config 并且您希望模板位于视图文件夹中：

 <system.webServer>
    <handlers>
      <remove name="BlockViewHandler"/>
      <add name="HTMLHandler" path="*.html" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
      <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    </handlers>
  </system.webServer>

有关 ViewHandlers 的更多信息，另请参阅link。