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

问题描述：

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

我想弄清楚为什么铬控制台返回我，它无法找到我的“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>）。

谢谢！

答

它会显示您使用快递服务您的应用程序。 Express是一个服务器端框架，而角是一个客户端框架。你不应该混合2个代码库。你在角中使用的所有东西都应该作为静态资源。您很可能会将您的公用文件夹作为静态路由。所以，最有可能你需要修改你的结构，像这样（我将如何构建它）：

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

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

Hi @Vadim，谢谢你的回答，你破了我6小时的连续调试。我按照流行的https://thinkster.io/angulartutorial/mean-stack-tutorial/课程的指示进行操作，然后我就陷入了困境。他们仅以实例形式提供内联模板，对于像我这样的初学者来说，这对于尝试使用分离的模板文件而不是内联模板时会很有戏剧性，因为结构似乎不同。再次感谢你，你救了我:) – Webdesigner 2014-11-25 06:55:31

答

MVC默认保护的视图文件夹。

采用了棱角分明的路由时HTMLHandler行添加到的意见\ 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>

也看到这个link了解有关ViewHandlers更多信息。

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

相关推荐