JHipster一知半解- 4.5.1 ng-jhipster 顶层(基于0.3.4)

回文集目录:JHipster一知半解

概述：

研究了一堆的配置文件后，终于回到了ts的源码里面，从架构转我代码的细节应该是程序员更为适应的区域，ng-jhipster是jhipster的前端工具lib，提供了通用的多语言服务、http拦截器、组件、指令、管道、服务等，下面我们逐步解析看看

入口和配置类

ng-jhipster.ts
仅包含一句

export * from './index';

index.ts(LIB库module的标准写法)
import部分：

//引入需要使用基础库
import { NgModule, ModuleWithProviders, Sanitizer } from '@angular/core';
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { TranslateModule, TranslateLoader, MissingTranslationHandler, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
//引入自己内的实现
import { JHI_PIPES, JHI_DIRECTIVES, JHI_COMPONENTS, JHI_SERVICES } from './src/jhi-components';
import {
    JhiMissingTranslationHandler,
    JhiTranslateComponent,
    JhiLanguageService
} from './src/language';
import { JhiModuleConfig } from './src/config';
import { JhiConfigService } from './src/config.service';
import { JhiAlertService } from './src/service';

export部分：

// Re export the files
export * from './src/pipe';
export * from './src/directive';
export * from './src/service';
export * from './src/component';
export * from './src/language';
export * from './src/interceptor';

重新把实现的功能导出，这样在其他地方就可以用 import {×} form 'ng-jhipster'，这样应用里面的实现（ts语法层）

ngModule部分

@NgModule({
    imports: [
        //这里原先使用了jhipster自己实现的PartialLoader，不过ngx-translat本身就是平行的了，所以现在只是简单封装一下地址。
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: translatePartialLoader,
                deps: [HttpClient, JhiConfigService]
            },
            //这里用了自己实现的missingTranslationHandler，可以根据配置多语言和默认的错误提示。
            missingTranslationHandler: {
                provide: MissingTranslationHandler,
                useFactory: missingTranslationHandler,
                deps: [JhiConfigService]
            }
        }),
        //这里吧Http作为通用的模块。
        HttpClientModule,
        HttpModule,
        CommonModule
    ],
    declarations: [
        ...JHI_PIPES,
        ...JHI_DIRECTIVES,
        ...JHI_COMPONENTS,
        JhiTranslateComponent
    ],
    //这里的export是保证直接import { NgJhipsterModule } from form 'ng-jhipster' 的地方可以，可以直接用里面的服务、指令（angular 层） 
    exports: [
        ...JHI_PIPES,
        ...JHI_DIRECTIVES,
        ...JHI_COMPONENTS,
        JhiTranslateComponent,
        TranslateModule,
        HttpClientModule,
        HttpModule,
        CommonModule
    ]
})
export class NgJhipsterModule {
    static forRoot(moduleConfig: JhiModuleConfig): ModuleWithProviders {
        return {
            ngModule: NgJhipsterModule,
            //由于用了forRoot方法，需要返回ngModule和providers，就不是在上面@NgModule里面声明providers了。
            providers: [
                ...JHI_SERVICES,
                { provide: JhiLanguageService, useClass: JhiLanguageService, deps: [TranslateService, JhiConfigService] },
                { provide: JhiAlertService, useClass: JhiAlertService, deps: [Sanitizer, JhiConfigService, TranslateService] },
                { provide: JhiModuleConfig, useValue: moduleConfig },
                { provide: JhiConfigService, useClass: JhiConfigService, deps: [JhiModuleConfig] }
            ]
        };
    }
}

config.ts（ng-jhipster具体可配置项）

@Injectable()
//整个lib暴露给外部的配置项,都有 "?=" ,提供了默认值。
export class JhiModuleConfig {
    //给sort用的图标
    sortIcon? = 'fa-sort';
    sortAscIcon? = 'fa-sort-asc';
    sortDescIcon? = 'fa-sort-desc';
    sortIconSelector? = 'span.fa';
    //i18n多语言选项，默认为关闭，英语，已经默认无法匹配翻译提示
    i18nEnabled? = false;
    defaultI18nLang? = 'en';
    noi18nMessage? = 'translation-not-found';
    //给组合的json加时间戳标记，避免浏览器缓存时无法更新。那构建时间也要成json就得有值，那必须修改webpack配置，并且同步替换到lib初始化中，还是不要的好
    buildTimestamp? = '';
    //给alert服务传递的默认配置。
    alertAsToast? = false;
    //jhi-boolean用的样式，没用到的component
    classBadgeTrue? = 'badge badge-success';
    classBadgeFalse? = 'badge badge-danger';
    classTrue? = 'fa fa-lg fa-check text-success';
    classFalse? = 'fa fa-lg fa-times text-danger';
}

config.service.ts

@Injectable()
export class JhiConfigService {
    CONFIG_OPTIONS: JhiModuleConfig;
    
    //构造函数，也就是forRoot的参数，传入一个JhiModuleConfig变量，先new一个默认值，然后再用...展开替换默认值。
    //编译为js时会调用内嵌的__assign()方法合并两个值，再传递给CONFIG_OPTIONS。
    constructor(moduleConfig?: JhiModuleConfig) {
        this.CONFIG_OPTIONS = {
            ...new JhiModuleConfig(),
            ...moduleConfig
        };
    }

    getConfig(): JhiModuleConfig {
        return this.CONFIG_OPTIONS;
    }
}

jhipster中初始化lib的地方
shared-libs.module.ts

        NgJhipsterModule.forRoot({
            // set below to true to make alerts look like toast
            alertAsToast: false,
            //启用默认值为英语的多语言
            i18nEnabled: true,
            defaultI18nLang: 'en'
            //如果改为默认中文，应该改成如下值：
            //defaultI18nLang: 'zh_cn',
            //noi18nMessage: '无法找到翻译内容'
        }),

附：ng-jhipster的webpack.common.js

    // require those dependencies but don't bundle them
    //我们的工程也必然需要这两个lib，所以就别打包他们了。
    externals: [/^\@angular\//, /^rxjs\//],