refactor: 代码内容优化

Author: lzhfe

Diff for: src/app/app.module.ts

@@ -9,12 +9,12 @@ import {AppComponent} from "./app.component";
 
 import {CollectionComponent} from './collection/collection.component';
 import {ListComponent, ItemComponent} from './list';
-import {DetailComponent, AnotationComponent} from './detail';
+import {DetailComponent} from './detail';
 import {EditComponent} from './edit/edit.component';
 
 import {ContactService} from "./shared/contact.service";
 import {FooterComponent} from './shared/footer.component';
-import {DateReformPipe} from './shared/date-reform.pipe';
+import {PhonePipe} from './shared/phone.pipe';
 import {BtnClickDirective} from './shared/btn-click.directive';
 import {UtilService} from './shared/util.service';
 
@@ -24,12 +24,11 @@ import {UtilService} from './shared/util.service';
     AppComponent,
     ListComponent,
     DetailComponent,
-    AnotationComponent,
     CollectionComponent,
     EditComponent,
     FooterComponent,
     ItemComponent,
-    DateReformPipe,
+    PhonePipe,
     BtnClickDirective
   ],
   imports     : [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig)],

Diff for: src/app/app.routes.ts

@@ -18,13 +18,7 @@ export const rootRouterConfig: Routes = [
   },
   {
     path: "list/:id",
-    component: DetailComponent,
-    children: [
-      {
-        path: "",
-        component: AnotationComponent
-      }
-    ]
+    component: DetailComponent
   },
   {
     path: "edit",

Diff for: src/app/collection/collection.component.html

@@ -3,7 +3,7 @@ <h3 *ngIf="coll_length == 0" class="no-collection">没有收藏</h3>
 <ul class="my-collection">
   <li *ngFor="let collection of collections">
     <a [routerLink]="['/list', collection.id]">
-      <label>{{ collection.name }}</label><span>{{ collection.telNum }}</span>
+      <label>{{ collection.name }}</label><span>{{ collection.telNum | phone }}</span>
     </a>
   </li>
 </ul>

Diff for: src/app/detail/anotation.component.css

@@ -80,3 +80,11 @@
     line-height: 20px;
     padding-top: 5px;
 }
+
+.intro{
+  padding: 20px 15px 0;
+}
+.intro h3{
+  font-size: 18px;
+  padding-bottom: 10px;
+}

Diff for: src/app/detail/anotation.component.html

@@ -16,20 +16,23 @@
   <ul class="detail-info">
     <li>
       <p>手机号码：</p>
-      <p>{{ detail.telNum }}</p>
+      <p>{{ detail.telNum | phone }}</p>
     </li>
     <li>
       <p>邮箱：</p>
       <p>{{ detail.email }}</p>
     </li>
     <li>
       <p>生日：</p>
-      <p>{{ detail.birthday | dateReform:'yyyy-MM-dd'}}</p>
+      <p>{{ detail.birthday | date:'yyyy-MM-dd'}}</p>
     </li>
     <li>
       <p>住址：</p>
       <p>{{ detail.address }}</p>
     </li>
   </ul>
-  <router-outlet></router-outlet>
+  <article class="intro">
+    <h3>简介:</h3>
+    生活态度好，热爱运动
+  </article>
 </div>

Diff for: src/app/detail/anotation.component.ts

@@ -1,2 +1 @@
 export * from './detail.component';
-export * from './anotation.component';

Diff for: src/app/detail/detail.component.css

@@ -123,15 +123,15 @@ export class EditComponent implements OnInit {
   }
   onBlurPhone() {
     this.phoneTip = true;
-    this.isPhoneNum = util.checkPhoneNum(this.contact.telNum);
+    this.isPhoneNum = this.util.checkPhoneNum(this.contact.telNum);
   }
   onBlurAddr() {
     this.addrTip = true;
     this.isAddr = this.contact.address ? true : false;
   }
   onBlurEmail() {
     this.emailTie = true;
-    this.isEmail = util.checkEmail(this.contact.email);
+    this.isEmail = this.util.checkEmail(this.contact.email);
   }
   onBlurBir() {
     this.birTip = true;

Diff for: src/app/detail/detail.component.html

@@ -2,7 +2,7 @@
   <img class="icon-head" src="./images/Iverson.jpg">
   <div class="contact-info">
     <label class="contact-name">{{ contact.name }}</label>
-    <span class="contact-tel">{{ contact.telNum }}</span>
+    <span class="contact-tel">{{ contact.telNum | phone }}</span>
     <i class="contact-to-detail"></i>
   </div>
 </a>

Diff for: src/app/detail/index.ts

@@ -11,7 +11,9 @@ export class BtnClickDirective {
   constructor(el: ElementRef) {
     this.el = el.nativeElement;
   }
-  btnClick() { this._addClasssName("btn-click"); }
+  btnClick() {
+    this._addClasssName("btn-click");
+  }
   private _addClasssName(className: string) {
     this.el.className = this.el.className + " " + className;
   }

Diff for: src/app/edit/edit.component.ts

@@ -1,17 +1,17 @@
 import {Injectable} from '@angular/core';
 import {Http, RequestOptions, Headers} from '@angular/http';
-import {Observable} from 'rxjs/Rx';
+import 'rxjs/add/operator/map';
 
-const contact_url = `./app/contacts.json`;
+const CONTACT_URL = `./app/contacts.json`;
 
 @Injectable()
 export class ContactService {
   constructor(
-    private _http:Http
+    private http:Http
   ) {}
 
   request(url:string, opts:any) {
-    return this._http.request(url, new RequestOptions(opts))
+    return this.http.request(url, new RequestOptions(opts))
     .map(res => {
       let _res = res.json();
       if(opts.id){
@@ -41,41 +41,23 @@ export class ContactService {
   }
 
   getContactsData() {
-    return new Observable(observable => {
-      this.get(contact_url)
-      .subscribe(res => {
-        observable.next(res);
-        observable.complete();
-      })
-    })
+    return this.get(CONTACT_URL);
   }
 
   getContactById(id:number) {
-    return new Observable(observable => {
-      this.get(contact_url, {id:id})
-      .subscribe(res => {
-        observable.next(res);
-        observable.complete();
-      })
-    })
+    return this.get(CONTACT_URL, { id: id })；
   }
 
   getCollections() {
-    return new Observable(observable => {
-      this.get(contact_url, {collection:1})
-      .subscribe(res => {
-        observable.next(res);
-        observable.complete();
-      })
-    })
+    return this.get(CONTACT_URL, { collection: 1 });
   }
 
   addContact(obj:Object = {}) {
     let body = JSON.stringify(obj);
     let headers = new Headers({ 'Content-Type': 'application/json' });
     let options = new RequestOptions({ headers: headers });
 
-    return this._http.post(contact_url, body, options).map(res => res.json());
+    return this.http.post(CONTACT_URL, body, options).map(res => res.json());
   }
 
 }

Diff for: src/app/list/item.component.html

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'phone'
+})
+export class PhonePipe implements PipeTransform {
+  transform(val:string):string {
+    if(!val) return '';
+    if(val.length === 11) {
+      return val.replace(/(\d{3})(\d{4})(\d{4})/, (m, m1, m2, m3) => {
+        return [m1, m2, m3].join('-');
+      })
+    }
+    return val;
+  }
+}