Captain Awesome вещает: BrowserSync Angular Template

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

Новое оружие против сил зла ждёт проверки Советом. Оружие — 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’еры.
• Работа ещё не тестировалась с прокси, возможны потенциальные проблемы в процессе инъекций.

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

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

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

ссылка на оригинал статьи http://habrahabr.ru/post/270281/