ng-hmr
cooperate with ng-hot-loader, make NG HMR possible, no suggest for legacy project
pre-requirement
Current implement depend on lodash
, jquery
, angular-ui-router
, angular-ui-bootstrap
, so you have to install them all. also, browser should support ES6 Proxy
, Reflect
, Map
. I will try to find better solution after HMR work as expected.
angular
- global variableangular
, test version >= 1.5.8angular-ui-router
- test version >= 1.0.0angular-ui-bootstrap
- test version >= 2.2.0lodash
- global variable_
, test version >= 4.16.4jquery
- global variablejQuery, $
, test version >= 3.1.1
usage
;;;;;;
const dependencies = 'ui.router' 'ui.bootstrap' 'ng-hmr'; angular
limitation
- support router level
template
,controller
hot module replacement - support modal level
template
,controller
hot module replacement - support factory level
service
hot module replacement - support rough directive hot module replacement, completely re-compile entire template, which means status lost
rule and example
factory
- instance should be literal object => {key: value}
{ return isValidPrompt escapeValidPrompt ; { return !!structureerrorDesc; } { return _; }}
module
- template =>
html string
, likehtml-loader
.route template
,modal template
has different HMR strategy, you have to usemodal.html
as modal template postfix. - controller =>
*ModalController
, class or just function, not string token.route controller
,modal controller
has different HMR strategy, you have to usemodal.controller.js
as modal controller postfix.
/** * @description - share module combine several controller, filter, service, directive * @author - bornkiller <hjj491229492@hotmail.com> */'use strict'; // share module dependency;;;; // share module route dependency;;;; // share module nameconst SHARE_MODULE = 'app.share'; // share module routeconst ShareRoute = name: 'application.love' url: '/love' views: 'page': template: lovePageTemplate controller: LoveController controllerAs: 'vm' name: 'application.todo' url: '/todo' views: 'page': template: todoPageTemplate controller: TodoController controllerAs: 'vm' ; /** * @description - never declare any dependency here, because dependency should declare into root module */angular // eslint-disable-next-line angular/di ; // just export module name for root module;
controller
implement controller with ES6 Class
.
/* @ngInject */ { this$http = $http; thisNotification = Notification; thisbkPrompt = bkPrompt; thisdescription = 'hello world'; thisauthority = {}; } { console; console; console; console; this$http; }
tricky
when update controller
, ng-hmr
need strategy to determine whether update the specific field or just leave it, the default strategy extreme simple:
/** * @description - determine whether ng-hmr should update the field, true for yes ,false for no * * @param * @param * @param */ { let toString = ObjectprototypetoString; return toString !== toString;}
you can mount your own strategy implement onto the controller. please note here, ng-hmr
already handle dependency inject
override, so never consider about dependencies
, just think about normal field.
demo
please see angular-boilerplate-webpack for HMR attempt.
license
MIT