Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitaliy-bobrov/angular-hot-loader
🔥 Webpack Hot Module Replacement for Angular 1.x applications.
https://github.com/vitaliy-bobrov/angular-hot-loader
angularjs hmr hot-reload webpack webpack2
Last synced: about 2 months ago
JSON representation
🔥 Webpack Hot Module Replacement for Angular 1.x applications.
- Host: GitHub
- URL: https://github.com/vitaliy-bobrov/angular-hot-loader
- Owner: vitaliy-bobrov
- Fork: true (yargalot/Angular-HMR)
- Created: 2016-10-20T07:46:44.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-27T06:12:33.000Z (over 5 years ago)
- Last Synced: 2024-09-18T16:29:25.646Z (about 2 months ago)
- Topics: angularjs, hmr, hot-reload, webpack, webpack2
- Language: JavaScript
- Homepage:
- Size: 116 KB
- Stars: 32
- Watchers: 3
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Angular Hot Loader
[](https://travis-ci.org/vitaliy-bobrov/angular-hot-loader)
[](https://badge.fury.io/js/angular-hot-loader)
[](https://github.com/vitaliy-bobrov/angular-hot-loader)
🔥 Webpack Hot Module Replacement for Angular 1.x applications.
**Now works only with UI Router**
Forked from [Angular-HMR](https://github.com/yargalot/Angular-HMR)
## Installation
- npm
```bash
npm install --save-dev angular-hot-loader
```
- yarn
```bash
yarn add --dev angular-hot-loader
```
## Webpack setup
* Webpack 2.x:
```js
rules: [
{
test: /\.js$/,
use: [
'angular-hot-loader',
// Any other loaders.
]
}
]
```
With options:
```js
rules: [
{
test: /\.js$/,
use: [
{
loader: 'angular-hot-loader',
options: {
log: true,
rootElement: 'html'
}
},
// Any other loaders.
]
}
]
```
* Webpack 1.x:
```js
loaders: [
{
test: /\.js$/,
loader: 'angular-hot!...other loaders'
}
]
```
### Webpack Hot Module Replacement setup:
See Webpack documentation:
- [Webpack 2.x](https://webpack.js.org/configuration/dev-server/#devserver-hot)
- [Webpack 1.x](http://webpack.github.io/docs/hot-module-replacement-with-webpack.html)
## 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:
```js
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);
```