Captain Awesome Broadcasts: BrowserSync Angular Template

League! Today our world can be 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 Flash speed, but who refuses to be at least a second faster than the enemy?

History of invention

I got involved in an unequal battle with hordes of Dr. Govno Code's henchmen. Oh, that was boring, each of them hid in their own corner, and I didn’t even have routes to them. Each of my blows, changing their appearance, destroyed reality, after which it was necessary to go the entire route to the battlefield again. And then an idea came to me, why not make them change without the need to recreate the world? I decided to associate them with a specific point in time space. Having defeated everyone, saving the world, and that absolutely random and unfamiliar smm'shchitsa, I retired to my thoughts tower. So a few days passed ...

Technical details

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

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

BsAt is a plugin for BrowserSync. To get started, just plug it in:

// ~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 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 to the context of your battle.

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

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

True version:

      ...
  
...
...

Erroneous use:

    ...
...
...

indexJs - also minimatch the pattern to the battlefield index file. BsAt will inject the necessary code into this file.

moduleName - closely related to the previous parameter. Similarly needed for injecting plugin code. Breniac’s built-in truncated clone will determine it from bower.json or package.json himself, in that order.

And that’s all, by setting the coordinates of the battlefield and synchronization points of the world, you will get the space a temporary tunnel that will broadcast the new state of the battle site.

Issue

Hmm, there are a few points that do not really suit me in the current solution. Consider this when making a decision, maybe you can help in some way?

• Firstly, writing the plugin for BrowserSync is still such a joy, I did not find the documentation as such. Did by analogy with the existing code. If one of you has the super ability “straight eyes” and “search for information on google”, then I will be glad to link.
• Secondly, I didn’t really like the architecture with injection into the index file. You need to dive deeper into the source and understand how to work with angular.injector so that the module received with it is executed in the application context.
• Thirdly, right now the plugin is flowing ... It is necessary to add logic that will clear unnecessary $ watch'ers.
• The work has not yet been tested with a proxy, there may be potential problems during the injection process.

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

Dear Council and League!

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