Question

这是我的问题：

我的项目主要包含在index.html中，ui-router将各个页面放在<div ui-view></div>部分。

在我的其他页面中，我们将其称为page1，我在同一子目录中有一个ng-include部分。但是，当我尝试使用

包含此部分时

<div ng-include="'page1Partial.html'"</div>

我收到了一个控制台错误

GET http://localhost/myProj/v3/myproj/app/index/page1Partial.html 404

这显然是因为ui-router将我的页面移动到index.html，并且它正在根据该目录查找ng-include。

我真的不想将部分文件移到index文件夹，因为从结构上说这对我的项目毫无意义。我也不想输入到同一目录的整个硬编码路径（将来可能会发生变化）。我希望能够以相对，简单和安全的方式引用这个部分。

有效且快速地管理此问题的最佳方法是什么？

我已经包含了我的文件结构：

myproj
|-- app
|    |-- index
|    |     |-- index.html
|    |     |-- index.js
|    |-- page1
|    |     |-- page1.html
|    |     |-- page1.js
|    |     |-- page1Partial.html
|    |-- page2
|-- common
|    |-- resources
|    |     |-- page1resources.js
|    |     |-- page2resources.js

Answer 1

如果您的项目实际上是一个单页应用（用户打开index.html而所有其他页面都是使用ui-router动态包含的），那么只需简单地点一下就可以省去很多麻烦访问权限（index.html）在应用程序的根文件夹中。然后，所有相对路径都将根文件夹作为上下文。

创建此类单页面应用程序时，在构建期间自动创建index.html非常常见（请参阅ngBoilerplate中index中的Gruntfile.js任务）。

如果您不能（或不想）将index.html放在根文件夹中，则可以重写URL（在您的服务器中）以使其显示在那里。在Apache中，您可以使用mod_rewrite：

RewriteEngine on
RewriteRule ^/$ /app/index/index.html [QSA]

（然后您将在http://localhost/myproj/访问您的应用。）

如何在基于ui-router的项目中管理ng-includes

1 个答案: