angularjs – 加载相对templateUrl

发布时间：2020-12-17 08:44:40 所属栏目：安全来源：网络整理

我一直在试图找到最好的方式来创建一个模块化，可扩展的角度应用程序。我真的很喜欢像 angular-boilerplate， angular-app这样的项目的结构，其中所有相关的文件被分组在一起的功能的局部和指令。

project
|-- partial
|   |-- partial.js
|   |-- partial.html
|   |-- partial.css
|   |-- partial.spec.js

但是，在所有这些示例中，模板URL相对于基本网址加载，而不是相对于当前文件：

angular.module('account',[])
.config(function($stateProvider) {
  $stateProvider.state('account',{
    url: '/account',templateUrl: 'main/account/account.tpl.html',// this is not very modular
    controller: 'AccountCtrl',});
})

这不是很模块化，并且可能变得难以在大型项目中维护。我需要记住改变templateUrl路径每次我移动任何这些模块。这将是很好，如果有一些方法加载相对于当前文件的模板，如：

templateUrl: './account.tpl.html'

有什么办法做这样的角度？

我想你最终会发现维护相对于js文件的路径将更难，如果甚至可能。当发货时间，你很可能想要将所有的javascript文件连接到一个文件，在这种情况下，你要的模板是相对于baseUrl。此外，如果你通过ajax抓取模板，Angular默认除非你预先将它们包装在$ templateCache，你肯定会想要他们相对于baseUrl，所以服务器知道在哪里找到他们一旦你的js文件已经发送到浏览器。

也许你不喜欢让它们相对于baseUrl在开发中的原因是因为你没有在本地运行服务器？如果是这样，我会改变。这将使你的生活更容易，特别是如果你要与路线工作。我会检出Grunt，它有一个非常简单的服务器，你可以在本地运行模仿一个生产设置称为Grunt Connect.你也可以检出一个像Yeoman项目，它提供了使用Grunt预包装前端开发环境，所以你don不得不花费大量的时间来设置。 Angular Seed项目是用于本地开发的Grunt设置的一个很好的例子。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!