add:Init files

Author: tanggc

LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2015-2016 Google, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,2 +1,7 @@
-# angular2-contacts-demo
-Angular 2 (ng2) 通讯录例子 
+### Usage
+- Clone or fork this repository
+- Make sure you have [node.js](https://nodejs.org/) installed
+- run `npm install -g webpack webpack-dev-server typings typescript` to install global dependencies
+- run `npm install` to install dependencies
+- run `npm start` to fire up dev server
+- open browser to [`http://localhost:3000`](http://localhost:3000)

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "contact",
+  "version": "1.0.0",
+  "description": "A simple starter Angular2 project",
+  "scripts": {
+    "typings-install": "node node_modules/typings/dist/bin.js install",
+    "postinstall": "npm run typings-install",
+    "build": "node node_modules/webpack/bin/webpack.js --inline --colors --progress --display-error-details --display-cached",
+    "watch": "npm run build -- --watch",
+    "server": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --colors --progress --display-error-details --display-cached --port 3000  --content-base src",
+    "start": "npm run server"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "awesome-typescript-loader": "~0.16.2",
+    "source-map-loader": "^0.1.5",
+    "typescript": "~1.8.9",
+    "typings": "^0.7.9",
+    "webpack": "^1.12.9",
+    "webpack-dev-server": "^1.14.0",
+    "webpack-merge": "^0.8.4"
+  },
+  "dependencies": {
+    "@angular/common": "2.0.0",
+    "@angular/compiler": "2.0.0",
+    "@angular/core": "2.0.0",
+    "@angular/forms": "2.0.0",
+    "@angular/http": "2.0.0",
+    "@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"
+  }
+}

src/app.ts

@@ -0,0 +1,5 @@
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {AppModule} from './app/router/app-module';
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src/app/components/collection/collection.css

@@ -0,0 +1,51 @@
+h3.collection-header{
+  height: 35px;
+  line-height: 35px;
+  font-size: 16px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #3DD689;
+}
+h3.no-collection{
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  font-size: 18px;
+}
+h3.collection-header{
+  text-align: center;
+  font-size: 16px;
+  color: #ffffff;
+  line-height: 35px;
+  background-color: #3DD689;
+}
+.my-collection{
+  position: absolute;
+  top: 35px;
+  left: 0;
+  right: 0;
+  bottom: 40px;
+  padding: 0 15px;
+  overflow: scroll;
+}
+.my-collection li{
+  height: 50px;
+  border-bottom: 1px solid #E0E0E0;
+}
+.my-collection li a{
+  line-height: 30px;
+  display: block;
+  padding-top: 20px;
+  text-decoration: none;
+}
+.my-collection li a label{
+  width: 75px;
+  font-size: 16px;
+  color: #000000;
+  display: inline-block;
+}
+.my-collection li a span{
+  font-size: 16px;
+  color: #000000;
+}

src/app/components/collection/collection.html

@@ -0,0 +1,10 @@
+<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]">
+      <label>{{ collection.name }}</label><span>{{ collection.telNum }}</span>
+    </a>
+  </li>
+</ul>
+<my-footer></my-footer>

src/app/components/collection/collection.ts

@@ -0,0 +1,35 @@
+import {Component, OnInit} from '@angular/core';
+import {Footer} from '../../widget/footer';
+import {ContactService} from '../../services/contact-service';
+
+@Component({
+  selector: 'call-record',
+  templateUrl: 'app/components/collection/collection.html',
+  styleUrls: ['app/components/collection/collection.css']
+})
+export class Collection implements OnInit {
+  collections:any = [];
+  contacts:any = {};
+
+  constructor(private _constactService: ContactService) { }
+
+  getCollectionContact() {
+    let ss_contacts = sessionStorage.getItem('contacts');
+    if(ss_contacts) {
+      this.contacts = JSON.parse(ss_contacts);
+      for(let i=0;i<this.contacts.length; i++){
+        if(this.contacts[i].collection == 1){
+          this.collections.push(this.contacts[i]);
+        }
+      }
+    }else {
+      this._constactService.getCollections().subscribe(data => {
+        this.collections = data;
+      })
+    }
+  }
+
+  ngOnInit() {
+    this.getCollectionContact();
+  }
+}

src/app/components/contact-app.css

@@ -0,0 +1,6 @@
+.main{
+  width: 100%;
+  height: 100%;
+  background-color: #fafafa;
+}
+

src/app/components/contact-app.html

@@ -0,0 +1,3 @@
+<main class="main">
+  <router-outlet></router-outlet>
+</main>

src/app/components/contact-app.ts

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