Angular2.0的項目架構

Angular2.0的項目架構

1、項目服務端app

a) Controller控制器
b) Router路由
c) Service服務
d) Public公共樣式及腳本和圖片等靜態資源
e) View靜態頁面
f) Engine公共的配置文件及方法
g) Extend框架擴展
h) Middleware編寫中間件

2、項目客戶端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)
                注意：
                一、在 Root Component 中沒法使用 ng-content
                二、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 全局的樣式

3、項目配置config

a) Config.default.js  默認配置（生產）
b) Config.local.js    本地配置（開發=本地+默認）
c) Config.prod.js    生產配置
d) Config.test.js     測試配置
e) Plugin.js         插件配置

4、項目java層

5、項目數據庫