Bs-injular NPM

Injular

Inject angular templates, controllers, directives and components with Browsersync

AngularJS 1.x hot reloading. This is a plugin for the awesome BrowserSync.

Install

$ npm install --save-dev bs-injular injular@legacy browser-sync

Try it

You can try a live demo of the client code by clicking here.

If you want to try it with the server code, run the following commands:

git clone https://github.com/tfoxy/bs-injular-demo.git
cd bs-injular-demo
npm install && bower install
gulp serve

Modify the *.html, *.controller.js and *.directive.js files inside src/app and watch the changes instantly.

Click here to watch GIF of demo

Setup

Minimal

var browserSync = require('browser-sync');
var bsInjular = require('bs-injular');

browserSync.use(bsInjular, {
  templates: '**/app/**/*.html',
});

browserSync({
  /* browserSync options */
});

This will inject all html files inside an app folder.

var browserSync = require('browser-sync');
var bsInjular = require('bs-injular');

browserSync.use(bsInjular, {
  templates: '**/app/**/*.html',
  controllers: '**/app/**/*.controller.js',
  directives: '**/app/**/*.+(directive|component).js',
  filters: '**/app/**/*.filter.js',
  angularFile: '/bower_components/angular/angular.js',
  moduleFile: '**/app/index.module.js'
});

browserSync({
  /* browserSync options */
});

This supports template, controller, directive, component and filter injection.

Configuration

If you want to inject controllers, you must provide the following properties:

{
  controllers: '**/app/**/*.controller.js',
  moduleFile: '**/app/index.module.js'
}

The module file is necessary to get the $controllerProvider in the config phase so that the controllers can be injected later.

If you want to inject directives and components, you must provide the following properties:

{
  directives: '**/app/**/*.+(directive|component).js',
  angularFile: '/bower_components/angular/angular.js',
  moduleFile: '**/app/index.module.js'
}

The module file is necessary to get the $compileProvider in the config phase so that the directives can be injected later.
The angular file is necessary to keep track of the directives present in a file.

WARNING: The controller files must retrieve the module using angular.module() and only use the controller recipe. The same applies to directives.

angular
  .module('myProject')
  .controller('Controller', Controller);

function Controller() {
  // Controller code here
}

If there is any other angular recipe, it will be ignored.

Also, when using the BrowserSync API, you must only reload the changed script file:

browserSync.reload('app/main/main.controller.js')

When browserSync.stream is used with multiple source files, it will reload the page.
If you use generator-gulp-angular, you must change the watches behaviour so that only the changed script is reloaded.
See: scripts.js watch.js

Version support

Supports AngularJS from 1.2 to 1.5 . Supports all modern browsers and IE >= 8. NOTE: for IE8, you must set supportIE8 option to true:

browserSync.use(bsInjular, {
  supportIE8: true,
  /* bs-injular options */
});

Help

If you have some problems with the configuration, you can get more information by setting the log level of Browsersync to debug:

browserSync({
  logLevel: 'debug',
  /* browserSync options */
});

If you get the following messages when changing a file:

[BS] [Injular] No moduleFile was matched: **/app/index.module.js
[BS] [Injular] No angularFile was matched: /bower_components/angular/angular.js

you can check if those patterns match any of the requests made to the server.

If you need more help, you can submit an issue or leave a message in gitter.

What's missing

Support for javascript bundlers: webpack, browserify, rollup.js
Template injection works. Scripts changes reload the browser.
Injection of service and factory recipes.
Show the file and line number when an error is thrown in an injected script.
Currently, the script is evaluated using Function.