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