/angular-hot-livereload-plugin

Hot reloading for Angular 1.x controllers, services and templates, using livereload.js

Primary LanguageJavaScript

angular-hot-livereload-plugin

Hot reloading for Angular 1.x controllers, services and templates, using livereload.js

Build Status Bower

About

This plugin allows reloading parts of your Angular 1.x application while developing, without needing to trigger a full page reload. It was inspired by angular-hot-reloader. I needed something similar, but without the Webpack dependency.

Installation

  1. bower install angular-hot-livereload-plugin --save-dev
  2. Load the plugin script next to livereload.js in your development workflow

Usage

For this plugin to work a few things should be kept in mind:

  • Your application should use the Angular 1.5+ component-based application architecture

  • (File)names used should be predictable:

    • lorem-ipsum.component.js :

      angular.module('...').component('loremIpsum', {
        controller: LoremIpsumController,
        templateUrl: '/some/path/lorem-ipsum.template.html'
});

function LoremIpsumController() {
    ...
}

    • lorem-ipsum.template.html

    • lorem-ipsum.service.js :

      angular.module('...').service(LoremIpsum.name, LoremIpsum);

function LoremIpsum() {
    ...
}

  • Some kind of LiveReload server is needed, for example grunt-contrib-watch