JHipster一知半解- 4.6.2 webapp-app根目录

回文集目录:JHipster一知半解

app根目录

app目录是一个相当标准的angular工程根目录，包含必须的ts文件

app.main.ts

使用platformBrowserDynamic启动朱模块JhipsterSampleApplicationNg2AppModule。

app.module.ts

import './vendor.ts';

引入第三方css样式，vendor.ts引入vendor.css，vendor.css引入boot-strap.css和font-awesome.css

import {
    JhiMainComponent,
    NavbarComponent,
    FooterComponent,
    ProfileService,
    PageRibbonComponent,
    ActiveMenuDirective,
    ErrorComponent
} from './layouts';

layout目录并非子模块，而是主模块直接使用的，因此需要引入其定义的component，service等。

@NgModule({
    //引入其他子模块
    imports: [
        BrowserModule, //angular 浏览器模块，仅主模块需要import
        JhipsterSampleApplicationNg2AppRoutingModule, //引入路由模块
        Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}), //给存储的cookie统一增加前缀，防止命名冲突
        JhipsterSampleApplicationNg2SharedModule, //共享模块
        JhipsterSampleApplicationNg2HomeModule,  //首页模块
        JhipsterSampleApplicationNg2AdminModule, //管理员模块
        JhipsterSampleApplicationNg2AccountModule, //账号管理模块
        JhipsterSampleApplicationNg2EntityModule, //实体模块
        // jhipster-needle-angular-add-module JHipster will add new module here
    ],
    //主模块自己的组件需要声明（layout中的）
    declarations: [
        JhiMainComponent,
        NavbarComponent,
        ErrorComponent,
        PageRibbonComponent,
        ActiveMenuDirective,
        FooterComponent
    ],
    //主模块自己的服务需要声明（layout中的），根据注入器规则，这里声明的service是整个工程都可以直接用的。
    providers: [
        ProfileService,
        //这里替换了angular的http，用了自己实现的customHttpProvider
        customHttpProvider(),
        PaginationConfig,
        UserRouteAccessService
    ],
    //声明引导模块（仅主模块才有）
    bootstrap: [ JhiMainComponent ]
})
export class JhipsterSampleApplicationNg2AppModule {}

TODO：加上angular模块定义地址。

app-routing.module.ts（4.10还定义在layout里面，这里移出来了）

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
//具体的路由ROUTES还是定义在layout中的
import { errorRoute, navbarRoute } from './layouts';

const LAYOUT_ROUTES = [
    navbarRoute,
    ...errorRoute
];

@NgModule({
    imports: [
        //根据layout中路由定义，初始化路由
        //设置了使用hash，url中就会出现“#”，这样兼容性更好些，用户有多少人会去看url呢？
        RouterModule.forRoot(LAYOUT_ROUTES, { useHash: true })
    ],
    exports: [
        //重新导出路由模块给其他模块用（forChild）
        RouterModule
    ]
})
export class JhipsterSampleApplicationNg2AppRoutingModule {}

app.route.ts

在4.12.0版本中并没有用到，和navbar.route.ts重复了，之后也要从layout目录移出来？

app.constants.ts

这里定义了一些全局变量，程序中会用到，实际上在运行webpack时候，会根据具体设定，替换这里的默认值（也就是说这里并不需要改）、
参见webpack.common.js的StringReplacePlugin

polyfills.ts

兼容性因子（据说兼容IE9会有问题），暂略