Angular2.0的项目架构

Angular2.0的项目架构

一、项目服务端app

a) Controller控制器
b) Router路由
c) Service服务
d) Public公共样式及脚本和图片等静态资源
e) View静态页面
f) Engine公共的配置文件及方法
g) Extend框架扩展
h) Middleware编写中间件

二、项目客户端src

a) App
    i. App.component.ts 组件
        1.baAmChart.component.ts
        2.装饰器@Component({})
            a) Selector
            b) templateUrl
            c) styleUrls
            d) Providers（特殊情况也可以引入其他组件，例如元标签）
        3.Typescript 类
            a) Constructor(依赖注入){}
            b) @Input()  声明一个输入属性，并且绑定到模板（父组件向子组件传值）
            c) @Output() 声明一个输出口属性，绑定到某个可以绑定的事件 （子组件向父组件广播事件，触发改变当前页面的事件）

            d) @ViewChild() 	将第一个组件视图查询得到的子组件绑定到当前元素（是属性装饰器，用来从模板视图中获取匹配的元素。在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取通过 ViewChild 查询的元素）

            e) @ViewChildren()  将当前根据视图查询到的子组件的列表绑定到当前元素（用来从模板视图中获取匹配的多个元素，返回的结果是一个 QueryList 集合。）

            f) @ContentChild()  将第一个可以查到的组件内容对象绑定到当前属性（是属性装饰器，用来从通过 Content Projection 方式 (ng-content)设置的视图中获取匹配的元素，在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素）

            g) @ContentChildren() 将当前根据视图查询到的子组件内容对象绑定到当前属性（属性装饰器用来从通过 Content Projection 方式 (ng-content) 设置的视图中获取匹配的多个元素，返回的结果是一个 QueryList 集合。）

            h) @HostListener()  是属性装饰器，用来为宿主元素及其它对象产生的事件添加事件监听。
            i) @HostBinding()  将某个元素属性绑定到某个指令或者组件的属性
            j)
                注意：
                1、在 Root Component 中无法使用 ng-content
                2、Angular2 编译器不会处理 index.html 文件中设置的绑定信息，另外出于安全因素考虑，为了避免 index.html 中的 {{}} 插值，被服务端使用的模板引擎处理。

            k) NgOnChanges(){}  当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit之前。
            l) NgOnit(){}  在第一轮 ngOnChanges 完成之后调用。 ( 译注：也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ，此时所有输入属性都已经有了正确的初始绑定值 )
            m) ngDoCheck(){}   在每个 Angular 变更检测周期中调用。
            n) ngAfterContentInit(){}   当把内容投影进组件之后调用。
            o) ngAfterContentChecked(){}   每次完成被投影组件内容的变更检测之后调用。
            p) ngAfterViewInit(){}  初始化完组件视图及其子视图之后调用。
            q) ngAfterViewChecked(){}  每次做完组件视图和子视图的变更检测之后调用。
            r) ngOnDestroy(){}   当 Angular 每次销毁指令 / 组件之前调用。

import { Component, ViewChild, Input, Output, ElementRef, EventEmitter } from '@angular/core';

import { BaThemePreloader } from '../../../theme/services';

import 'amcharts3';
import 'amcharts3/amcharts/plugins/responsive/responsive.js';
import 'amcharts3/amcharts/serial.js';

import 'ammap3';
import 'ammap3/ammap/maps/js/worldLow';

import { BaAmChartThemeService } from './baAmChartTheme.service';

@Component({
    selector: 'ba-am-chart',
    templateUrl: './baAmChart.html',
    styleUrls: ['./baAmChart.scss'],
    providers: [BaAmChartThemeService]
})
export class BaAmChart {

    @Input() baAmChartConfiguration: Object;
    @Input() baAmChartClass: string;
    @Output() onChartReady = new EventEmitter<any>();

    @ViewChild('baAmChart') public _selector: ElementRef;

    constructor(private _baAmChartThemeService: BaAmChartThemeService) {
        this._loadChartsLib();
    }

    ngOnInit() {
        AmCharts.themes.blur = this._baAmChartThemeService.getTheme();
    }

    ngAfterViewInit() {
        let chart = AmCharts.makeChart(this._selector.nativeElement, this.baAmChartConfiguration);
        this.onChartReady.emit(chart);
    }

    private _loadChartsLib(): void {
        BaThemePreloader.registerLoader(new Promise((resolve, reject) => {
            let amChartsReadyMsg = 'AmCharts ready';

            if (AmCharts.isReady) {
                resolve(amChartsReadyMsg);
            } else {
                AmCharts.ready(function () {
                    resolve(amChartsReadyMsg);
                });
            }
        }));
    }
}

    ii.App.module.ts 模块
        1.List.module.ts
        2.装饰器@NgModule({})
            a) Imports 导入其他模块及路由
            b) Declarations 导入模块内部的组件、管道、指令，声明这个模块的内部成员
            c) Exports 暴露给外部使用的模块内部成员（组件、管道、指令）
            d) entryComponents 输入组件  指定了这个模块启动的时候应该启动的组件（如果正常的组件必须要有标签，而定义了输入组件可以不用）
            e) Providers 指定应用程序根级别使用的服务
            f) Bootstrap app启动的根组件
        3.TypeScript 类

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgaModule } from '../../theme/nga.module';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { routing } from './list.routing'; // 路由
import { List } from './list.component';
import { ListService } from './list.service'; // 服务
import { Common } from '../common/common.module';
import { ListModal, ListTable, Paging } from './components';

@NgModule({
    imports: [
    CommonModule,
    NgaModule,
    NgbModalModule,
    ReactiveFormsModule,
    FormsModule,
    HttpModule,
    routing,
    Common
    ],
    declarations: [
    List,
    ListTable,
    ListModal,
    Paging
    ],
    providers: [
    ListService
    ],
    entryComponents: [
    ListModal
    ]
})

export class ListModule { }

    iii.App.routing.ts 路由
        1.Pages.routing.ts
        2.子路由   RouterModule.forChild(routes)
        3.辅助路由  <router-outlet name=”aux”></router-outlet>
        4.路由守卫
        5.根路由  RouterModule.forRoot(routes)
        6.路由占位符 <router-outlet></router-outlet>
        7.路由链接 [routerLink] = “[‘./home’]”

import { Routes, RouterModule } from '@angular/router';
import { Pages } from './pages.component';
import { ModuleWithProviders } from '@angular/core';

export const routes: Routes = [
{
    // 交易中心系统路由
    path: 'trade',
    component: Pages,
    children: [
    { path: '', redirectTo: 'ips/0', pathMatch: 'full' },
    { path: 'ips', loadChildren: './ips/ips.module#IpsModule' },
    { path: 'ips/:type', loadChildren: './ips/ips.module#IpsModule' },
    { path: 'domain', loadChildren: './domain/domain.module#DomainModule' },
    { path: 'lines', loadChildren: './lines/lines.module#LinesModule' },
    { path: 'list', loadChildren: './list/list.module#ListModule' },
    { path: 'sub/:id', loadChildren: './sub/sub.module#SubModule' },
    { path: 'subTrades/:id', loadChildren: './trades/trades.module#TradesModule' },
    { path: 'subRegisters/:id', loadChildren: './registers/registers.module#RegistersModule' }
    ]
}];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

    iv.App.service.ts 服务
        1.baThemeSpinner.service.ts
        2.装饰器@Injectable()
        3.TypeScript 类
            a) Constructot(){}
            b) 调用node层的服务的接口

import {Injectable} from '@angular/core';

@Injectable()
export class BaThemeSpinner {

    private _selector:string = 'preloader';
    private _element:HTMLElement;

    constructor() {
        this._element = document.getElementById(this._selector);
    }

    public show():void {
        this._element.style['display'] = 'block';
    }

    public hide(delay:number = 0):void {
        setTimeout(() => {
            this._element.style['display'] = 'none';
        }, delay);
    }
}

    v.App.component.scss 组件样式
    vi.App.component.html 组件模板
    vii.指令
        1.baScrollPosition.directive.ts

import {Directive, Input, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
    selector: '[baScrollPosition]'
})
export class BaScrollPosition {

    @Input() public maxHeight:number;
    @Output() public scrollChange:EventEmitter<boolean> = new EventEmitter<boolean>();

    private _isScrolled:boolean;

    public ngOnInit():void {
        this.onWindowScroll();
    }

    @HostListener('window:scroll')
    onWindowScroll():void {
        let isScrolled = window.scrollY > this.maxHeight;
        if (isScrolled !== this._isScrolled) {
            this._isScrolled = isScrolled;
            this.scrollChange.emit(isScrolled);
        }
    }
}

    viii.管道
        1.baAppPicture.pipe.ts

import {Pipe, PipeTransform} from '@angular/core';
import {layoutPaths} from '../../../theme';

@Pipe({name: 'baAppPicture'})
export class BaAppPicturePipe implements PipeTransform {

    transform(input:string):string {
        return layoutPaths.images.root + input;
    }
}

    ix. 验证
        1. Email.validator.ts  邮箱验证

import {AbstractControl} from '@angular/forms';

export class EmailValidator {

    public static validate(c:AbstractControl) {

        let EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        return EMAIL_REGEXP.test(c.value) ? null : {
            validateEmail: {
                valid: false
            }
        };
    }
}

    2.

b) Assets 静态资源文件
c) Environments 环境配置
d) Meta seo优化文件
    i. Robots.txt
e) Index.html 浏览器入口
f) Main.ts 脚本入口
g) Polyfills.ts 向下兼容版本文件
h) Tsconfig.app.ts typeScript的配置文件
i) Styles.scss 全局的样式

三、项目配置config

a) Config.default.js  默认配置（生产）
b) Config.local.js    本地配置（开发=本地+默认）
c) Config.prod.js    生产配置
d) Config.test.js     测试配置
e) Plugin.js         插件配置

四、项目java层

五、项目数据库