Лига! Сегодня наш мир может стать чуточку спокойнее.

Новое оружие против сил зла ждёт проверки Советом. Оружие — BrowserSync Angular Template (bsAt) призвано ускорить каждого из нас, конечно не до скорости Флеша, но кто откажется быть хоть на секунду быстрее врага?

История изобретения

Я ввязался в неравный бой с полчищами подручных доктора Govno Code. Ох, это было нудно, каждый из них забился в свой угол, а у меня даже не было маршрутов к ним. Каждый мой удар, изменяющий их внешний вид, уничтожал реальность, после чего было необходимо проходить весь маршрут до поля боя заново. И тут ко мне пришла мысль, а почему бы не заставить их изменяться без необходимости пересоздания мира? Я решил их связать с конкретной точкой пространства времени. Победив всех, спася мир и ту абсолютно случайную и мне не знакомую smm’щицу, я уединился в своей башне раздумий. Так прошло несколько дней…

Технические данные

И вот, первый релиз готов! Забираем его с нашего тайного склада:

npm i --save-dev browser-sync-angular-template

BsAt представляет собой плагин для BrowserSync. Для начала использования просто подключим его:

// ~Gulpfile.js
var browserSync = require('browser-sync');
var browserSyncAngularTemplate = require('browser-sync-angular-template');

browserSync.use(
  browserSyncAngularTemplate({
    templates: '/app/**/*.html',
    indexJs: 'index.module.js',
    moduleName: 'example'
  })
);

...

browserSync.init(...);

Лично я предпочитаю использовать вместе с генератором инструментов generator-gulp-angular, он помог мне выиграть множество битв!

Более точный пример можно увидеть в example/gulp/server.js.

Конечно, вы можете настроить bsAt под контекст вашего сражения.

С templates думаю всё понятно, это просто minimatch паттерн для координатов шаблонов, они и только они будут связаны посредствам bsAt.

Тут есть один важный момент. Содержимое шаблона должно быть обязательно обёрнуто в один таг, то есть:

Верный вариант:

<!-- app/some/some.html -->
<div class="points">
  <div class="form-group">
      ...
  </div>
  <ul>
      <li ng-repeat="point in points.items">...</li>
  </ul>
  <div ng-if="!points.items.length">
      <h4 class="text-center">...</h4>
  </div>
</div>

Ошибочное использование:

<!-- app/some/some.html -->
<div class="form-group">
    ...
</div>
<ul>
    <li ng-repeat="point in points.items">...</li>
</ul>
<div ng-if="!points.items.length">
    <h4 class="text-center">...</h4>
</div>

indexJs — так же minimatch паттерн до индексного файла поля боя. BsAt в этот файл сделает инъекцию нужного для работы кода.

moduleName — тесно связан с предыдущем параметром. Аналогично необходим для инъекции кода плагина. Встроенный урезанный клон Брениака сам определит его из bower.json или package.json, именно в этом порядке.

И это всё, задав координаты поля боя и точек синхронизаций мира вы получите пространство временной туннель, который будет транслировать новое состояние места сражения.

Проблематика

Хм, есть несколько моментов которые меня не очень устраивают в текущем решении. Учтите это при принятии решения, возможно в чём-то сможете помочь?

• Во-первых, написание плагина под BrowserSync ещё та радость, документации, как таковой, я не нашёл. Делал по аналогии с имеющимся кодом. Если кто-то из вас обладает супер способностью “прямы глаза” и “поиск информации в google”, то буду рад ссылке.
• Во-вторых, не очень мне понравилась архитектура с инъекцией в индексный файл. Нужно более глубоко погрузиться в исходники и понять, как работать с angular.injector так, что бы полученный с помощью него модуль исполнялся в контексте приложения.
• В-третьих, прямо сейчас плагин течёт… Необходимо добавить логики, которая будет очищать ненужные $watch’еры.
• Работа ещё не тестировалась с прокси, возможны потенциальные проблемы в процессе инъекций.

Это то, что гложит меня. Возможно вы, уважаемый Совет, увидите и другие проблемы.

Уважаемый Совет и лига!

Единственный способ дальнейшего развития проекта, это отклик от вас. Посетите мою секцию тайного склада, устанавливайте, пробуйте, делитесь своими впечатлениями!