Загрузка относительного templateUrl

Я думаю, вы в конечном итоге обнаружите, что поддерживать пути относительно файла js будет сложнее, если вообще возможно. Когда придет время отправлять, вы, скорее всего, захотите объединить все ваши файлы javascript в один файл, и в этом случае вы захотите, чтобы шаблоны были связаны с baseUrl. Кроме того, если вы извлекаете шаблоны через ajax, что Angular делает по умолчанию, если вы не упаковываете их предварительно в $templateCache, вы определенно захотите, чтобы они относились к baseUrl, поэтому сервер знает, где их найти после того, как ваш js файл уже отправлен в браузер.

Возможно, причина, по которой вам не нравится иметь их относительно baseUrl в разработке, заключается в том, что вы не используете сервер локально? Если это так, я бы изменил это. Это сильно облегчит вам жизнь, особенно если вы собираетесь работать с маршрутами. Я бы проверил Grunt, у него есть очень простой сервер, который вы можете запустить локально, чтобы имитировать рабочую настройку, называемую Grunt Connect. Вы также можете проверить такой проект, как Yeoman, который предоставляет предварительно упакованную среду разработки интерфейса с использованием Grunt, поэтому вам не нужно не нужно тратить много времени на настройку. Проект Angular Seed также является хорошим примером настройки Grunt для локальной разработки.

Лучший способ сделать это сейчас — использовать загрузчик модулей, такой как browserify, webpack или typescript. Есть и множество других. Поскольку требования могут быть сделаны из относительного местоположения файла, а дополнительный бонус в виде возможности импортировать шаблоны с помощью преобразований или загрузчиков, таких как частичное, вам даже не нужно больше использовать URL-адреса шаблонов. Просто вставьте шаблон через require.

Мой старый ответ все еще доступен ниже:

Я написал пост именно на эту тему и рассказал об этом на нашем местном Angular Meetup. Большинство из нас сейчас используют его в производстве.

Это довольно просто, если ваша файловая структура эффективно представлена ​​в ваших модулях. Вот краткий предварительный просмотр решения. Полная ссылка на статью следует.

var module = angular.module('myApp.things', []);

var all = angular.module('myApp.things.all', [
    'myApp.things',
    'things.someThing',
    'things.someOtherThing',
    'things.someOtherOtherThing',
]);

module.paths = {
    root: '/path/to/this/thing/',
    partials: '/path/to/this/thing/partials/',
    sub: '/path/to/this/thing/sub/',
};

module.constant('THINGS_ROOT', module.paths.root);
module.constant('THINGS_PARTIALS', module.paths.partials);
module.constant('THINGS_SUB', module.paths.sub);

module.config(function(stateHelperProvider, THINGS_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things',
        url: '/things',
        templateUrl: THINGS_PARTIALS + 'things.html',
    });
});

И тогда любые подмодули или «относительные» модули выглядят так:

var module = angular.module('things.someThing', ['myApp.things']);
var parent = angular.module('myApp.things');

module.paths = {
    root: parent.paths.sub + '/someThing/',
    sub: parent.paths.sub + '/someThing/sub/',
    partials: parent.paths.sub + '/someThing/module/partials/',
};

module.constant('SOMETHING_ROOT', module.paths.root);
module.constant('SOMETHING_PARTIALS', module.paths.partials);
module.constant('SOMETHING_SUB', module.paths.sub);

module.config(function(stateHelperProvider, SOMETHING_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things.someThing',
        url: "/someThing",
        templateUrl: SOMETHING_PARTIALS + 'someThing.html',
    });
});

Надеюсь это поможет!

Полная статья: Относительные модули AngularJS

Ваше здоровье!

Я уже какое-то время разбираюсь в этом вопросе. Я использую gulp для упаковки своих шаблонов для производства, но я изо всех сил пытался найти решение, которое меня устраивало для разработки.

Вот где я оказался. Фрагмент ниже позволяет переназначить любой URL по своему усмотрению.

angular.module('rm').config(function($httpProvider) {

  //this map can be defined however you like
  //one option is to loop through script tags and create it automatically
  var templateMap = {
    "relative.tpl.html":"/full/path/to/relative.tpl.html",
    etc...
  };

  //register an http interceptor to transform your template urls
  $httpProvider.interceptors.push(function () {
    return {
      'request': function (config) {
        var url = config.url;
        config.url = templateMap[url] || url;
        return config;
      }
    };
  });
});

В настоящее время можно делать то, что вы хотите, используя загрузчик модулей systemJs.

import usersTemplate from './users.tpl';

var directive = {
   templateUrl: usersTemplate.name
}

Вы можете посмотреть хороший пример здесь https://github.com/swimlane-contrib/angular1-systemjs-seed

Я использовал templateUrl: './templateFile.tpl.html, но что-то обновил, и оно сломалось. Так что я бросил это туда.

Я использовал это в своем объекте Gruntfile.js html2js:

html2js: {
  /**
   * These are the templates from `src/app`.
   */
  app: {
    options: {
      base: '<%= conf.app %>',
      rename: function( templateName ) {
        return templateName.substr( templateName.lastIndexOf('/') );
      }
    },
    src: [ '<%= conf.app %>/**/{,*/}<%= conf.templatePattern %>' ],
    dest: '.tmp/templates/templates-app.js'
  }
}

Я знаю, что это может привести к конфликтам, но для меня это меньшая проблема, чем необходимость редактировать /path/to/modules/widgets/wigdetName/widgetTemplate.tpl.html в каждом файле каждый раз, когда я включаю его в другой проект.