Captain Awesome is broadcasting: BrowserSync Angular Template

League! Today our world can become a little calmer.

A new weapon against the forces of evil awaits verification by the Council. Weapons - BrowserSync Angular Template (bsAt) is designed to speed up each of us, of course not up to the speed of Flash, but who refuses to be at least a second faster than the enemy?

History of invention

I got involved in an unequal battle with the hordes of Dr. Govno Code's henchmen. Oh, it was tedious, each of them huddled in his own corner, and I did not even have routes to them. Each of my blows, changing their appearance, destroyed reality, after which it was necessary to go all the way to the battlefield again. And here the thought came to me, why not make them change without the need to re-create the world? I decided to link them to a specific point in the space of time. Having defeated everyone, I saved the world and that absolutely random smm and I did not know a friend, I retired in my tower of thoughts. So a few days passed ...
')

Technical details

And now, the first release is ready! We are taking it from our secret warehouse:

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

BsAt is a plugin for BrowserSync. To start using, just connect it:

 // ~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(...); 

Personally, I prefer to use the generator-gulp-angular with the tool generator , it helped me win many battles!

A more accurate example can be seen in example / gulp / server.js .

Of course, you can customize bsAt under the context of your battle.

With templates I think everything is clear, it's just a minimatch pattern for the coordinates of the templates, they and only they will be connected via bsAt.

There is one important point. The content of the template must be wrapped in one tag, that is:

The correct option:

 <!-- 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> 

Misuse:

 <!-- 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 is also a minimatch pattern to the battlefield index file. BsAt into this file will inject the necessary code for the work.

moduleName is closely related to the previous parameter. Similarly necessary for the injection code of the plugin. The built-in stripped-down Breniac clone itself will identify it from bower.json or package.json, in that order.

And this is all by specifying the coordinates of the battlefield and the points of synchronization of the world, you will get a temporary tunnel space that will broadcast the new state of the battlefield.

Problematics

Hmm, there are a few things that I’m not very happy with in the current decision. Consider this when making a decision, maybe you can help with something?

• First, the writing of the plug-in for BrowserSync is still the joy of documentation, as such, I have not found. Made by analogy with the existing code. If any of you have a super ability to "direct the eyes" and "search for information in google", then I will be glad to link.
• Secondly, I didn’t really like the architecture with the injection into the index file. It is necessary to dive deeper into the sources and understand how to work with angular.injector so that the module obtained with it will be executed in the context of the application.
• Thirdly, right now the plugin is flowing ... It is necessary to add logic that will clear unnecessary $ watch's.
• The work has not yet been tested with a proxy, there are potential problems during the injection process.

This is what gnaws at me. Perhaps you, dear Advice, will see other problems.

Dear Council and League!

The only way to further develop the project is to respond to you. Visit my section of the secret warehouse, install, try, share your impressions!