JSPM

  • Created
  • Published
  • Downloads 331
  • Score
    100M100P100Q92633F
  • License ISC

🔥 Webpack Hot Module Replacement for Angular 1.x applications.

Package Exports

  • angular-hot-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-hot-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Hot Loader

Build Status npm version npm

🔥 Webpack Hot Module Replacement for Angular 1.x applications.

Now works only with UI Router

Forked from Angular-HMR

Installation

  • npm
npm install --save-dev angular-hot-loader
  • yarn
yarn add --dev angular-hot-loader

Webpack setup

  • Webpack 2.x:
rules: [
  {
    test: /\.js$/,
    use: [
      'angular-hot-loader',
      // Any other loaders.
    ]
  }
]

With options:

rules: [
  {
    test: /\.js$/,
    use: [
      {
        loader: 'angular-hot-loader',
        options: {
          log: true,
          rootElement: 'html'
        }
      },
      // Any other loaders.
    ]
  }
]
  • Webpack 1.x:
loaders: [
  {
    test: /\.js$/,
    loader: 'angular-hot!...other loaders'
  }
]

Webpack Hot Module Replacement setup:

See Webpack documentation:

Options

rootElement {String}

Default: [ng-app]

Specifies application DOM root element selector. Use 'html' when boostraping your Angular app on document.

log {Boolean}

Default: false

Enables module output to console.

How it works

This will inject the new controller / template / service / whatever and then reload the state in UI Router.

Example app structure:

import MyFactory from './your-factory';
import MyCtrl from './your-controller';
import MyComponent from './your-component';

angular
  .module('my-app', [ui.router])
  .directive('MyDirective', require('MyDirective'))
  .factory('MyFactory', MyFactory)
  .controller('MyCtrl', MyCtrl)
  .component('myComponent', MyComponent);