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、项目数据库