ng-hot-loader

前言

webpack-dev-server自带支持模块热替换特性(HMR)，不刷新页面实现代码局部更新，使用HMR可以大幅提升开发效率。

实现目标

实现策略

合理划分angular模块，将angular模块划分为主模块，业务模块。路由,业务服务，全局服务合理分散到主模块与业务模块中。参照angular组件单一职责，单个模块(文件)仅承担有限职责，。

HMR关键核心为组件声明 => 组件定位 => 组件更新。

/**
 * @description - application level router config.
 * @author bornkiller <hjj491229492@hotmail.com>
 */

'use strict';

// layout module dependency
import layoutAuthorizeTemplate from './authority/authorize.html';
import { AuthorizeController } from './authority/authorize.controller';

import layoutNavbarTemplate from './flow/navbar.html';
import layoutSidebarTemplate from './flow/sidebar.html';
import layoutCoreTemplate from './flow/core.html';
import { SidebarController } from './flow/sidebar.controller';


// layout module name
const LAYOUT_MODULE = 'app.layout';

// layout module router
const LayoutRoute = [
  {
    name: 'authorize',url: '/authorize',views: {
      'core': {
        template: layoutAuthorizeTemplate,controller: AuthorizeController,controllerAs: 'vm'
      }
    }
  },{
    name: 'application',url: '/application',views: {
      'navbar': {
        template: layoutNavbarTemplate
      },'sidebar': {
        template: layoutSidebarTemplate,controller: SidebarController,controllerAs: 'vm'
      },'core': {
        template: layoutCoreTemplate
      }
    }
  }
];

angular.module(LAYOUT_MODULE,[])
  // eslint-disable-next-line angular/di
  .config(['$stateProvider',function ($stateProvider) {
    LayoutRoute.forEach((route) => {
      $stateProvider.state(route);
    });
  }]);

export { LAYOUT_MODULE };

模块划分

通过划分模块实现最终目标：

组件替换约定

服务在angularjs内部属于单例，实例声明通过factory的方式，声明literal object服务。

过滤器仅支持ng-bind使用。

模板热替换目前采用较为粗放的容器定位策略，基于最近的ui-router view进行局部替换。

指令热替换同样采用较为粗放的容器定位策略，通过路由模板替换实现。

控制器统一使用ES6 Class声明，字段更新策略如下：

HMR示例

if (module.hot) {
  module.hot.accept(['${descriptor.location}'],function () {
    ${translateImportType(descriptor)}
    $hmr.hmrOnChange('${capitalize(descriptor.category)}','${descriptor.token}',${descriptor.name});
    $hmr.hmrDoActive('${capitalize(descriptor.category)}',${descriptor.name});
  });
};

项目实现

TODO