angular之Angular-cli搭建通讯系统项目

一、项目介绍

本项目是模范模仿书籍《揭秘Angular2》通用例子，使用Angular-cli搭建的。在通讯项目中，主要分为四大模块：联系人模块（list）联系人详情模块（detail） 编辑模块（edit）以及收藏模块（collection）。模块之间的跳转由angular路由提供。

主要目录结构如下

二、主要文件、步骤说明

1、使用Angular-cli项目初始化，在这里不在详情说明，请查看 （http://blog.csdn.net/qishuixian/article/details/77727377）

2、建立组件

ng g component collection
ng g component detail
ng g component edit
ng g component list

3、建立路由(app-routing.module.ts)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//RouterModule 路由模块  routes 路由数组对象
import { CollectionComponent } from './collection/collection.component';
import { ListComponent } from './list/list.component';
import { DetailComponent } from './detail/detail.component';
import { EditComponent } from './edit/edit.component';export const routes: Routes = [{path: '',redirectTo: 'list', //默认跳转pathMatch: 'full'   // 如果地址栏中输入没有定义的路由就跳转到one路由界面},{path: 'list',component: ListComponent},{path: 'list/:id',component: DetailComponent},{path: 'edit',component: EditComponent},{path: 'edit/:id',component: EditComponent},{path: 'collection',component: CollectionComponent}
];@NgModule({imports: [RouterModule.forRoot(routes)],//根路由模块exports: [RouterModule],
})
export class AppRoutingModule { }

在对应的app.module.ts里引入路由

import { HttpModule } from '@angular/http';//HttpModule封装路由相关的服务等
import { RouterModule } from '@angular/router';//RouterModule封装路由相关的组件指令
import { ContactService } from './contact.service';//导入服务
import { AppRoutingModule } from './app-routing.module';@NgModule({  //用于定义模块用的装饰器......imports: [ //  用来导入当前模块所需的其他模块 .....AppRoutingModule],......bootstrap: [AppComponent]  //bootstrap标记出引导组件，在angular启动时，奖被标记的组件渲染到模块中
})
export class AppModule { }

4、建立服务service

ng g service contact

contact.service.ts文件

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";  //系统提供  包含ajax
import { Observable } from "rxjs/Rx";  //订阅观察 处理ajax数据的const CONTACT_URL = '/assets/contacts.json';//调用数据路径
let _contacts;
@Injectable()
export class ContactService {constructor(private http:Http) { }getContactsData(opts?: any):Observable<any> {let source;if (Array.isArray(_contacts)) {source = Observable.of(_contacts);return source.map(data => this.dataInit(data, opts));} else {return this.http.get(CONTACT_URL) //请求的路径.map(data => this.dataInit(data, opts))   //处理ajax数据.catch(this.handleError); //处理异常的}}getContactById(id) {id = parseInt(id, 10);return this.getContactsData({ id: id });}getCollections() { //获取收藏return this.getContactsData({ collection: 1 });}addContact(obj: any = {}) {  //添加if (!Array.isArray(_contacts)) {console.error('请刷新重试');return;}obj.id = _contacts.length + 1;_contacts.push(obj);}editContact(obj: any) { //编辑if (!obj) return;if (!Array.isArray(_contacts)) {console.error('请刷新重试');return;}let idx = -1;for (const one of _contacts) {idx++;if (one.id === obj.id) {_contacts[idx] = one;}}}collectContact(obj: any = {}) { //收藏if (!Array.isArray(_contacts)) {console.error('请刷新重试');return;}for (const one of _contacts) {if (one.id === obj.id) {one.collection ^= 1;break;}}}dataInit(res, opts){  //返回的数据let data;if(!Array.isArray(res)){data = res.json();}else{data=res;}if (!Array.isArray(_contacts)) {_contacts=data; }if (!opts) return data;if (opts.id) {for (let i = 0; i < data.length; i++) {if (data[i].id === opts.id) {data = data[i];}}}if (opts.collection) {const temp: any = [];for (let i = 0; i < data.length; i++) {if (data[i].collection === opts.collection) {temp.push(data[i]);}}data = temp;}return data;}handleError(error:any):Observable<any>{  //报错const errMsg = error.message;return Observable.throw(errMsg);}
}

在对应的app.module.ts引入 import { ContactService } from './contact.service';//导入服务以及在providers:添加 ContactService

最终实现的效果

源码地址：https://github.com/qishuixian/angular/tree/master/tell

参考文件：

1、书籍《揭秘Angular2》

2、书籍《揭秘Angular2》的通讯录列子源码（https://github.com/angular-programming/angular-contacts-demo）