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

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）