title: Loading relative templateUrl
body: <p>I've been trying to find the best way to create a modular, scalable angular application. I really like the structure of projects like <a href="https://github.com/ngbp/ngbp">angular-boilerplate</a>, <a href="https://github.com/angular-app/angular-app">angular-app</a>, where all the related files are grouped together by feature for partials and directives. </p>
  
  <pre class="lang-none prettyprint-override"><code>project
  |-- partial
  |   |-- partial.js
  |   |-- partial.html
  |   |-- partial.css
  |   |-- partial.spec.js
  </code></pre>
  
  <p>However, in all these examples, the template URL is loaded relative to the base url, not relative to the current file:</p>
  
  <pre><code>angular.module('account', [])
  .config(function($stateProvider) {
    $stateProvider.state('account', {
      url: '/account',
      templateUrl: 'main/account/account.tpl.html', // this is not very modular
      controller: 'AccountCtrl',
    });
  })
  </code></pre>
  
  <p>This is not very modular, and could become difficult to maintain in large projects. I would need to remember to change the <code>templateUrl</code> path every time I moved any of these modules. It would be nice if there was some way to load the template relative to the current file like:</p>
  
  <pre><code>templateUrl: './account.tpl.html'
  </code></pre>
  
  <p>Is there any way to do something like this in angular?</p>