refactor: 项目结构调整

Author: lzhfe

src/app/components/contact-app.css src/app/app.component.css

@@ -0,0 +1,11 @@
+import {Component} from "@angular/core";
+
+@Component({
+  selector: "contact-app",
+  templateUrl: "app/app.component.html",
+  styleUrls: ["app/app.component.css"]
+})
+
+export class AppComponent {
+  constructor() {}
+}

src/app/components/contact-app.html src/app/app.component.html

@@ -0,0 +1,41 @@
+import {NgModule} from '@angular/core'
+import {RouterModule} from "@angular/router";
+import {FormsModule} from "@angular/forms";
+import {BrowserModule} from "@angular/platform-browser";
+import {HttpModule} from "@angular/http";
+
+import {rootRouterConfig} from "./app.routes";
+import {AppComponent} from "./app.component";
+
+import {CollectionComponent} from './collection/collection.component';
+import {ListComponent, ItemComponent} from './list';
+import {DetailComponent, AnotationComponent} 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 {BtnClickDirective} from './shared/btn-click.directive';
+import {UtilService} from './shared/util.service';
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    ListComponent,
+    DetailComponent,
+    AnotationComponent,
+    CollectionComponent,
+    EditComponent,
+    FooterComponent,
+    ItemComponent,
+    DateReformPipe,
+    BtnClickDirective
+  ],
+  imports     : [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig)],
+  providers   : [ContactService, UtilService],
+  bootstrap   : [AppComponent]
+})
+export class AppModule {
+
+}

src/app/app.component.ts

@@ -0,0 +1,41 @@
+import {Routes} from "@angular/router";
+
+import {CollectionComponent} from './collection/collection.component';
+import {ListComponent, ItemComponent} from './list';
+import {DetailComponent, AnotationComponent} from './detail';
+import {EditComponent} from './edit/edit.component';
+
+
+export const rootRouterConfig: Routes = [
+  {
+    path: "",
+    redirectTo: "list",
+    pathMatch: 'full'
+  },
+  {
+    path: "list",
+    component: ListComponent
+  },
+  {
+    path: "list/:id",
+    component: DetailComponent,
+    children: [
+      {
+        path: "",
+        component: AnotationComponent
+      }
+    ]
+  },
+  {
+    path: "edit",
+    component: EditComponent
+  },
+  {
+    path: "edit/:id",
+    component: EditComponent
+  },
+  {
+    path: "collection",
+    component: CollectionComponent
+  }
+];

src/app/app.module.ts

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

src/app/app.routes.ts

@@ -1,13 +1,12 @@
 import {Component, OnInit} from '@angular/core';
-import {Footer} from '../../widget/footer';
-import {ContactService} from '../../services/contact-service';
+import {ContactService} from 'shared/contact.service';
 
 @Component({
   selector: 'call-record',
-  templateUrl: 'app/components/collection/collection.html',
-  styleUrls: ['app/components/collection/collection.css']
+  templateUrl: 'app/collection/collection.component.html',
+  styleUrls: ['app/collection/collection.component.css']
 })
-export class Collection implements OnInit {
+export class CollectionComponent implements OnInit {
   collections:any = [];
   contacts:any = {};
 

src/app/components/collection/collection.css src/app/collection/collection.component.css

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'detail',
+  templateUrl: 'app/detail/anotation.component.html',
+  styleUrls: ['app/detail/anotation.component.css'],
+})
+
+export class AnotationComponent {
+  constructor() {}
+}

src/app/components/collection/collection.html src/app/collection/collection.component.html

@@ -1,13 +1,13 @@
 import {Component, OnInit, OnDestroy} from '@angular/core';
 import {Router, ActivatedRoute} from '@angular/router';
-import {ContactService} from '../../services/contact-service';
+import {ContactService} from 'shared/contact.service';
 
 @Component({
   selector: 'detail',
-  templateUrl: 'app/components/contact-detail/contact-detail.html',
-  styleUrls: ['app/components/contact-detail/contact-detail.css']
+  templateUrl: 'app/detail/detail.component.html',
+  styleUrls: ['app/detail/detail.component.css']
 })
-export class ContactDetail implements OnInit, OnDestroy {
+export class DetailComponent implements OnInit, OnDestroy {
   contact_id: number;
   detail:any = {};
   contacts:any = {};
@@ -33,7 +33,7 @@ export class ContactDetail implements OnInit, OnDestroy {
   }
 
   editContact() {
-    this._router.navigate(['/operate/id',this.contact_id]);
+    this._router.navigate(['/edit',this.contact_id]);
   }
 
   collectTheContact() {

src/app/components/collection/collection.ts src/app/collection/collection.component.ts

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

src/app/components/contact-app.ts

@@ -1,16 +1,16 @@
 import {Component, OnInit, Input} from '@angular/core';
 import {Router, ActivatedRoute} from '@angular/router';
 import {Location} from '@angular/common';
-import {ContactService} from '../services/contact-service';
-import * as UT from '../utils/utils';
+import {ContactService} from 'shared/contact.service';
+import {UtilService} from 'shared/util.service';
 
 @Component({
   selector: 'my-operate',
-  templateUrl: 'app/widget/operate.html',
-  styleUrls: ['app/widget/operate.css']
+  templateUrl: 'app/edit/edit.component.html',
+  styleUrls: ['app/edit/edit.component.css']
 })
-export class Operate implements OnInit {
-  isAdd: number;
+export class EditComponent implements OnInit {
+  isAdd: boolean;
   operateTitle: string;
   editId: number;
   contacts:any = {};
@@ -31,18 +31,20 @@ export class Operate implements OnInit {
     private _router: Router,
     private _activatedRoute:ActivatedRoute,
     private _constactService: ContactService,
-    private _location:Location
+    private _location:Location,
+    private util: UtilService
     ) {}
 
   ngOnInit() {
     this.getContacts();
     this._activatedRoute.params.subscribe(params => {
-      this.isAdd = params['isAdd'];
+      // this.isAdd = params['isAdd'];
       this.editId = params['id'];
+      this.isAdd = !this.editId;
     })
-    this.operateTitle = this.isAdd == 1 ? '新建联系人' : '编辑联系人';
+    this.operateTitle = this.isAdd ? '新建联系人' : '编辑联系人';
     //
-    if(this.isAdd != 1) this.getContactDetailById(this.editId);
+    if(!this.isAdd) this.getContactDetailById(this.editId);
   }
 
   submitForm() {
@@ -53,7 +55,7 @@ export class Operate implements OnInit {
     this.birTip = true;
 
     if(this.isName && this.isPhoneNum && this.isAddr && this.isEmail && this.isBir){
-      if(this.isAdd == 1) this.addContact();
+      if(this.isAdd) this.addContact();
       else this.editeContact();
     }
   }
@@ -107,7 +109,7 @@ export class Operate implements OnInit {
     this.contacts = JSON.parse(ss_contacts);
     this.contacts.splice(this.editId - 1, 1, edit_contact);
     sessionStorage.setItem("contacts",JSON.stringify(this.contacts));
-    this._router.navigate(['/contact-detail',this.editId]);
+    this._router.navigate(['/list',this.editId]);
   }
 
   cancleOperate() {
@@ -121,15 +123,15 @@ export class Operate implements OnInit {
   }
   onBlurPhone() {
     this.phoneTip = true;
-    this.isPhoneNum = UT.checkPhoneNum(this.contact.telNum);
+    this.isPhoneNum = util.checkPhoneNum(this.contact.telNum);
   }
   onBlurAddr() {
     this.addrTip = true;
     this.isAddr = this.contact.address ? true : false;
   }
   onBlurEmail() {
     this.emailTie = true;
-    this.isEmail = UT.checkEmail(this.contact.email);
+    this.isEmail = util.checkEmail(this.contact.email);
   }
   onBlurBir() {
     this.birTip = true;

src/app/components/contact-detail/anotation.ts

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './item.component';

src/app/services/contacts.json src/app/contacts.json

@@ -3,11 +3,11 @@ import {Router} from '@angular/router';
 
 @Component({
   selector: 'list-li',
-  templateUrl: 'app/components/contact-list/list-li.html',
-  styleUrls: ['app/components/contact-list/list-li.css']
+  templateUrl: 'app/list/item.component.html',
+  styleUrls: ['app/list/item.component.css']
 })
 
-export class ListChildrenComponent implements OnInit {
+export class ItemComponent implements OnInit {
   @Input() contact:any = {};
   @Output() routerNavigate = new EventEmitter<number>();
 

src/app/components/contact-detail/anotation.css src/app/detail/anotation.component.css

@@ -1,14 +1,13 @@
 import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
-import {Operate} from '../../widget/operate';
-import {ContactService} from '../../services/contact-service';
+import {ContactService} from 'shared/contact.service';
 
 @Component({
   selector: 'list',
-  templateUrl: 'app/components/contact-list/contact-list.html',
-  styleUrls: ['app/components/contact-list/contact-list.css']
+  templateUrl: 'app/list/list.component.html',
+  styleUrls: ['app/list/list.component.css']
 })
-export class ContactList implements OnInit {
+export class ListComponent implements OnInit {
   contacts: {};
   private isAdd:number = 1;
 
@@ -34,11 +33,11 @@ export class ContactList implements OnInit {
   }
 
   addContact() {
-    this._router.navigate(['/operate/isAdd', this.isAdd]);
+    this._router.navigate(['edit']);
   }
 
   routerNavigate(id: number) {
-    this._router.navigate(['/contact-detail',id]);
+    this._router.navigate(['/list',id]);
   }
 
 }