Angular2前端实践_0.0.1

简介

近年来，前端技术可以说是层出不穷，前端框架和类库更是异彩纷呈，Angular2、React、Vue…，面对选择我们常眼花缭乱，犹豫不决，我们到底要选择什么样的框架亦或是类库？这是一个问题，对于我们的研发团队来说，我们亦是思虑良久，才有了答案，从自身的实际情况出发，最终选择了引入Angualr2来作为我们的蓝本

作者：链上研发-hcy
时间：2016-10-28

Angular2有何优势？

• Google 主导 ,研发团队实力强劲,社区活跃,有保障
• 主旨是为了提供前端解决方案，不局限于web，更全面
• 拥抱TypeScript，清晰的模块化构建

那么如何写angular2 ？

• *.component.ts //组件容器
• *.service.ts //服务
• *.pipe.ts //过滤器
• *.module.ts //angular2 module集合
• *.directive.ts //属性指令
• *.routing.ts //路由配置文件

本节将写一些常用的基础代码来作为演示

如何开始写一个component

    import { Component, OnInit} from '@angular/core';    @Component({        selector: 'property-app',        templateUrl: 'template/app.component.html'    })    export class AppComponent implements OnInit{        constructor(){}        ngOnInit():any {}    }

• 将你刚写的component 注册到 ./app.module.ts,添加在declarations数组内

    //ts后缀名省略    import {AppComponent} from "./app.component";    @NgModule({        declarations:[..., AppComponent]    })

如何开始写一个service

    import { Injectable } from '@angular/core';    @Injectable()    export class DetailService {      //someFunctions    }

• 将你刚写的service 注册到 ./app.module.ts,添加在providers数组内

    //ts后缀名省略    import {AppService} from "./app.service";    @NgModule({        providers:[..., AppService]    })

• 如何使用？component中引入相对路径，构造器中声明即可使用

    import {AppService} from "./app.service";    ...    export class AppComponent implements OnInit{        constructor(private _service: AppService){}        ngOnInit():any {            this.service.someFuc();        }    }

如何开始写一个pipe

    import {Pipe, PipeTransform} from '@angular/core';    @Pipe({name: 'formatLength'})    export class AppPipe  implements PipeTransform {        transform(params) : any {            return params.length;        }    }

• 将你刚写的pipe 注册到 ./app.module.ts,添加在declarations数组内

    //ts后缀名省略    import {AppPipe} from "./app.pipe";    @NgModule({        declarations:[..., AppPipe]    })

• 如何使用？竖线后边加上你的pipe的name即可

    <span class="">{{currentTime | formatLength}}</span>

Angular内置指令

• ngClass xx:xx 类名:判断条件

    <div [ngClass]="{active: isActive}">

• ngStyle xx:xx 样式:判断条件

    <div [ngStyle]="{color: colorPreference}">    <div [style.color]="colorPreference">

• href

    <a [href]="angularDocsUrl">Angular Docs</a>

• src

    <a [src]="angularDocsUrl">Angular Docs</a>

• hidden 不符合条件将隐藏DOM,“逻辑移除”

    <div [hidden]="movies.length"></div>

• *ngIf 不符合条件将移除DOM,“物理移除”

    <div *ngIf="movies.length"></div>

• *ngFor 循环遍历DOM结构,i 即为相应的序列

    <div *ngFor="let movie of movies;; let i=index">

• ngModel 双向绑定的数据模型

    <input [(ngModel)]="name" />

如何将后台数据传输到页面

• 我有一个component,内有一属性为name

    import { Component, OnInit} from '@angular/core';    import {AppService} from './AppService'    @Component({        selector: 'property-app',        templateUrl: 'template/app.component.html'    })    export class AppComponent implements OnInit{        private name:string        constructor(private _service:AppService){}        ngOnInit():any {            this.name=this._service.getData();        }    }

那么template中就可以这样使用:

        <div>{{name}}</div>

如何发送请求获取数据

• 我有一个component，他是这样的

    import { Component, OnInit} from '@angular/core';    import {AppService} from './AppService'    @Component({        selector: 'property-app',        templateUrl: 'template/app.component.html'    })    export class AppComponent implements OnInit{        private name:string        constructor(private _service:AppService){}        ngOnInit():any {            this.name=this._service.getData(this);        }    }

• 我有一个service，他是这样的

    import { Injectable } from '@angular/core';    import {URLSearchParams, Headers, Http} from "@angular/http";    @Injectable()    export class DetailService {     constructor(private _http: Http) {}      getData(obj){            this._http.get('someUrl').subscribe(            res => {                        let result = res.json();                        obj.name = result.body.name;                    }            )      }    }

• 我还有一个component，他是这样的

    import { Component, OnInit} from '@angular/core';    import {AppService} from './AppService'    @Component({        selector: 'property-app',        templateUrl: 'template/app.component.html'    })    export class AppComponent implements OnInit{        private name:string        constructor(private _service:AppService){}        ngOnInit():any {            this.name=this._service.getData(this).then(            (res)=>{                this.store = res.collectCount>0;            }        );        }    }

• 我还有一个service，他是这样的

    import { Injectable } from '@angular/core';    import {URLSearchParams, Headers, Http} from "@angular/http";    @Injectable()    export class DetailService {     constructor(private _http: Http) {}      getData(obj): Promise<any>{        return new Promise((resolve, reject)=>{        this.http.get('url').subscribe((response)=>{                    console.log(response)                    resolve(response.json());            });        });      }    }