Загрузка относительного шаблонаUrl

Ответ 1

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

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

Ответ 2

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

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

Я написал сообщение именно на эту тему и рассказал об этом в нашем местном 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

Ура!

Ответ 3

Я уже много раз переваривал эту проблему. Я использую 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;
      }
    };
  });
});

Ответ 4

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

import usersTemplate from './users.tpl';

var directive = {
   templateUrl: usersTemplate.name
}

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

Ответ 5

Я использовал 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 в каждом файле, каждый раз включаю его в другой проект.