feat: add barrel & header.component.ts

Author: lzhfe

package.json

@@ -12,12 +12,12 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "awesome-typescript-loader": "~0.16.2",
-    "source-map-loader": "^0.1.5",
-    "typescript": "~1.8.9",
-    "typings": "^0.7.9",
+    "@types/core-js": "~0.9.34",
+    "source-map-loader": "~0.1.5",
+    "ts-loader": "~1.2.1",
+    "typescript": "~2.0.0",
     "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0",
+    "webpack-dev-server": "~1.14.0",
     "webpack-merge": "^0.8.4"
   },
   "dependencies": {
@@ -29,13 +29,11 @@
     "@angular/platform-browser": "2.0.0",
     "@angular/platform-browser-dynamic": "2.0.0",
     "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "zone.js": "^0.6.23",
     "angular2-in-memory-web-api": "0.0.20",
-    "bootstrap": "^3.3.6"
+    "bootstrap": "~3.3.6",
+    "core-js": "~2.4.1",
+    "reflect-metadata": "~0.1.3",
+    "rxjs": "5.0.0-beta.12",
+    "zone.js": "~0.6.23"
   }
 }

src/app/app.module.ts

@@ -7,27 +7,23 @@ 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 {CollectionComponent} from './collection';
+import {ListComponent, ListItemComponent} from './list';
 import {DetailComponent} from './detail';
-import {EditComponent} from './edit/edit.component';
+import {EditComponent} from './edit';
 
-import {ContactService} from "./shared/contact.service";
-import {FooterComponent} from './shared/footer.component';
-import {PhonePipe} from './shared/phone.pipe';
-import {BtnClickDirective} from './shared/btn-click.directive';
-import {UtilService} from './shared/util.service';
+import {ContactService, UtilService, FooterComponent, 
+  HeaderComponent, PhonePipe, BtnClickDirective} from "./shared";
 
 
 @NgModule({
   declarations: [
     AppComponent,
-    ListComponent,
+    ListComponent, ListItemComponent,
     DetailComponent,
     CollectionComponent,
     EditComponent,
-    FooterComponent,
-    ItemComponent,
+    HeaderComponent, FooterComponent,
     PhonePipe,
     BtnClickDirective
   ],

src/app/app.routes.ts

@@ -1,9 +1,9 @@
 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';
+import {CollectionComponent} from './collection';
+import {ListComponent} from './list';
+import {DetailComponent} from './detail';
+import {EditComponent} from './edit';
 
 
 export const rootRouterConfig: Routes = [

src/app/collection/collection.component.html

@@ -1,4 +1,4 @@
-<h3 class="collection-header">我的收藏</h3>
+<my-header title="我的收藏"></my-header>
 <h3 *ngIf="coll_length == 0" class="no-collection">没有收藏</h3>
 <ul class="my-collection">
   <li *ngFor="let collection of collections">

src/app/collection/index.ts

@@ -0,0 +1 @@
+export * from "./collection.component";

src/app/edit/edit.component.html

@@ -1,4 +1,4 @@
-<h3 class="new-contact">{{operateTitle}}</h3>
+<my-header [title]="operateTitle"></my-header>
 <div class="operate">
   <form #contactForm="ngForm" (ngSubmit)="submitForm()">
     <ul>

src/app/edit/index.ts

@@ -0,0 +1 @@
+export * from './edit.component';

src/app/list/item.component.ts

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

src/app/list/list.component.css

@@ -1,22 +1,3 @@
-h3{
-  height: 35px;
-  line-height: 35px;
-  font-size: 16px;
-  color: #ffffff;
-  text-align: center;
-  background-color: #3DD689;
-  position: relative;
-}
-h3 i{
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  width: 25px;
-  height: 25px;
-  transform: translateY(-50%);
-  background: url("./images/add.png") no-repeat;
-  background-size: cover;
-}
 .list{
   overflow: auto;
   position: absolute;

src/app/list/list.component.html

@@ -1,8 +1,7 @@
-<h3>所有联系人<i (click)="addContact()"></i></h3>
+<my-header title="所有联系人" [isShowCreateButton]="true"></my-header>
 <ul class="list">
   <li *ngFor="let contact of contacts">
-    <list-li [contact]="contact" (routerNavigate)="routerNavigate($event)"></list-li>
+    <list-item [contact]="contact" (routerNavigate)="routerNavigate($event)"></list-item>
   </li>
 </ul>
-<!-- <my-footer [path]="path" (writeTitle)="writeTitle($event)"></my-footer> -->
 <my-footer></my-footer>