Лига! Сегодня наш мир может стать чуточку спокойнее.
Новое оружие против сил зла ждёт проверки Советом. Оружие — BrowserSync Angular Template (bsAt) призвано ускорить каждого из нас, конечно не до скорости Флеша, но кто откажется быть хоть на секунду быстрее врага?
Я ввязался в неравный бой с полчищами подручных доктора Govno Code. Ох, это было нудно, каждый из них забился в свой угол, а у меня даже не было маршрутов к ним. Каждый мой удар, изменяющий их внешний вид, уничтожал реальность, после чего было необходимо проходить весь маршрут до поля боя заново. И тут ко мне пришла мысль, а почему бы не заставить их изменяться без необходимости пересоздания мира? Я решил их связать с конкретной точкой пространства времени. Победив всех, спася мир и ту абсолютно случайную и мне не знакомую smm’щицу, я уединился в своей башне раздумий. Так прошло несколько дней…
И вот, первый релиз готов! Забираем его с нашего тайного склада:
BsAt представляет собой плагин для BrowserSync. Для начала использования просто подключим его:
Лично я предпочитаю использовать вместе с генератором инструментов generator-gulp-angular, он помог мне выиграть множество битв!
Более точный пример можно увидеть в example/gulp/server.js.
Конечно, вы можете настроить bsAt под контекст вашего сражения.
С templates думаю всё понятно, это просто minimatch паттерн для координатов шаблонов, они и только они будут связаны посредствам bsAt.
Тут есть один важный момент. Содержимое шаблона должно быть обязательно обёрнуто в один таг, то есть:
Верный вариант:
Ошибочное использование:
indexJs — так же minimatch паттерн до индексного файла поля боя. BsAt в этот файл сделает инъекцию нужного для работы кода.
moduleName — тесно связан с предыдущем параметром. Аналогично необходим для инъекции кода плагина. Встроенный урезанный клон Брениака сам определит его из bower.json или package.json, именно в этом порядке.
И это всё, задав координаты поля боя и точек синхронизаций мира вы получите пространство временной туннель, который будет транслировать новое состояние места сражения.
Хм, есть несколько моментов которые меня не очень устраивают в текущем решении. Учтите это при принятии решения, возможно в чём-то сможете помочь?
Это то, что гложит меня. Возможно вы, уважаемый Совет, увидите и другие проблемы.
Единственный способ дальнейшего развития проекта, это отклик от вас. Посетите мою секцию тайного склада, устанавливайте, пробуйте, делитесь своими впечатлениями!
Новое оружие против сил зла ждёт проверки Советом. Оружие — 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’еры.
- Работа ещё не тестировалась с прокси, возможны потенциальные проблемы в процессе инъекций.
Это то, что гложит меня. Возможно вы, уважаемый Совет, увидите и другие проблемы.
Уважаемый Совет и лига!
Единственный способ дальнейшего развития проекта, это отклик от вас. Посетите мою секцию тайного склада, устанавливайте, пробуйте, делитесь своими впечатлениями!
Ссылки
Untitiled hero author — www.characterdesignserved.com/gallery/Daily-Illustration/5553046.
Тайный склад — www.npmjs.com/package/browser-sync-angular-template
Тайный склад — www.npmjs.com/package/browser-sync-angular-template