angularjs – 加载相对templateUrl

我一直在试图找到最好的方式来创建一个模块化,可扩展的角度应用程序。我真的很喜欢像 angular-boilerplateangular-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设置的一个很好的例子。

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...