refactor: 代码内容优化

lzhfe · lzhfe · commit 43436d455089 · 2016-11-13T11:04:55.000+08:00
diff --git a/src/app/app.module.ts b/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 --git a/src/app/app.routes.ts b/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 --git a/src/app/collection/collection.component.html b/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 --git a/src/app/detail/anotation.component.css b/src/app/detail/anotation.component.css
diff --git a/src/app/detail/anotation.component.html b/src/app/detail/anotation.component.html
diff --git a/src/app/detail/anotation.component.ts b/src/app/detail/anotation.component.ts
diff --git a/src/app/detail/detail.component.css b/src/app/detail/detail.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 --git a/src/app/detail/detail.component.html b/src/app/detail/detail.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 --git a/src/app/detail/index.ts b/src/app/detail/index.ts
@@ -1,2 +1 @@
 export * from './detail.component';
-export * from './anotation.component';
diff --git a/src/app/edit/edit.component.ts b/src/app/edit/edit.component.ts
@@ -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 --git a/src/app/list/item.component.html b/src/app/list/item.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 --git a/src/app/shared/btn-click.directive.ts b/src/app/shared/btn-click.directive.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 --git a/src/app/shared/contact.service.ts b/src/app/shared/contact.service.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 --git a/src/app/shared/date-reform.pipe.ts b/src/app/shared/date-reform.pipe.ts
diff --git a/src/app/shared/phone.pipe.ts b/src/app/shared/phone.pipe.ts
@@ -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;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`	`1`	`export * from './detail.component';`
`2`		`-export * from './anotation.component';`
Original file line number	Diff line number	Diff line change
`@@ -123,15 +123,15 @@ export class EditComponent implements OnInit {`
`123`	`123`	`}`
`124`	`124`	`onBlurPhone() {`
`125`	`125`	`this.phoneTip = true;`
`126`		`- this.isPhoneNum = util.checkPhoneNum(this.contact.telNum);`
	`126`	`+ this.isPhoneNum = this.util.checkPhoneNum(this.contact.telNum);`
`127`	`127`	`}`
`128`	`128`	`onBlurAddr() {`
`129`	`129`	`this.addrTip = true;`
`130`	`130`	`this.isAddr = this.contact.address ? true : false;`
`131`	`131`	`}`
`132`	`132`	`onBlurEmail() {`
`133`	`133`	`this.emailTie = true;`
`134`		`- this.isEmail = util.checkEmail(this.contact.email);`
	`134`	`+ this.isEmail = this.util.checkEmail(this.contact.email);`
`135`	`135`	`}`
`136`	`136`	`onBlurBir() {`
`137`	`137`	`this.birTip = true;`