Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2162381

Browse files
committed
refactor: 适配NG4
1 parent 7f16e12 commit 2162381

23 files changed

+6224
-116
lines changed

‎README.md‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
## Usage
2-
Clone or fork this repository
3-
Make sure you have node.js installed(>= 6.0)
1+
## 通讯录例子
42

5-
- Run `npm install` to install dependencies.
6-
- Run `npm install http-server -g` to install a local http server, then run `http-server src` to serve the app/contact.json data.
7-
- Run `npm start` to fire up dev server.
8-
- Open browser and navigate to http://localhost:4200
3+
书籍《揭秘Angular》通用例子,请确保你的 node.js 版本 >= 6.0
4+
5+
- 运行 `npm install` 或者 `yarn install` 安装依赖
6+
- 运行 `npm start` 构建并启动本地Server
7+
- 浏览器打开 http://localhost:4200 即可访问

‎e2e/app.e2e-spec.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { Angular2ContactsDemoPage } from './app.po';
1+
import { AngularContactsDemoPage } from './app.po';
22

3-
describe('angular2-contacts-demo App', () => {
4-
let page: Angular2ContactsDemoPage;
3+
describe('angular-contacts-demo App', () => {
4+
let page: AngularContactsDemoPage;
55

66
beforeEach(() => {
7-
page = new Angular2ContactsDemoPage();
7+
page = new AngularContactsDemoPage();
88
});
99

10-
it('should display message saying app works', () => {
11-
page.navigateTo();
12-
expect(page.getParagraphText()).toEqual('app works!');
13-
});
10+
// it('should display message saying app works', () => {
11+
// page.navigateTo();
12+
// expect(page.getParagraphText()).toEqual('app works!');
13+
// });
1414
});

‎e2e/app.po.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { browser, element, by } from 'protractor';
22

3-
export class Angular2ContactsDemoPage {
3+
export class AngularContactsDemoPage {
44
navigateTo() {
55
return browser.get('/');
66
}

‎e2e/list.e2e-spec.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { browser, element, by } from 'protractor';
2+
3+
describe('contact list', function() {
4+
it('test ListComponent', function() {
5+
// 打开网页
6+
browser.get('/list');
7+
8+
const contactList = element.all(by.css('.list li a'));
9+
10+
// 测试列表记录条数是否符合预期
11+
expect(contactList.count()).toBeGreaterThan(8);
12+
13+
contactList.first().click();
14+
browser.getCurrentUrl().then(function(url) {
15+
expect(url.endsWith('list/1')).toBe(true);
16+
});
17+
});
18+
});

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020
"@angular/platform-browser": "4.3.1",
2121
"@angular/platform-browser-dynamic": "4.3.1",
2222
"@angular/router": "4.3.1",
23-
"core-js": "^2.4.1",
24-
"rxjs": "^5.1.0",
25-
"zone.js": "^0.8.4"
23+
"core-js": "2.4.1",
24+
"rxjs": "5.1.0",
25+
"zone.js": "0.8.4"
2626
},
2727
"devDependencies": {
28-
"@angular/cli": "^1.3.0",
28+
"@angular/cli": "1.3.0",
2929
"@angular/compiler-cli": "4.3.1",
3030
"@types/jasmine": "2.5.38",
3131
"@types/node": "~6.0.60",

‎src/app/collection/collection.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<my-header title="我的收藏"></my-header>
2-
<h3 *ngIf="coll_length == 0" class="no-collection">没有收藏</h3>
2+
<h3 *ngIf="collections?.length === 0" class="no-collection">没有收藏</h3>
33
<ul class="my-collection">
44
<li *ngFor="let collection of collections">
55
<a [routerLink]="['/list', collection.id]">

‎src/app/collection/collection.component.ts‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,9 @@ export class CollectionComponent implements OnInit {
1313
constructor(private _constactService: ContactService) {}
1414

1515
getCollectionContact() {
16-
const ss_contacts = sessionStorage.getItem('contacts');
17-
if (ss_contacts) {
18-
this.contacts = JSON.parse(ss_contacts);
19-
for (let i = 0; i < this.contacts.length; i++) {
20-
if (this.contacts[i].collection === 1) {
21-
this.collections.push(this.contacts[i]);
22-
}
23-
}
24-
} else {
25-
this._constactService.getCollections().subscribe(data => {
26-
this.collections = data;
27-
});
28-
}
16+
this._constactService.getCollections().subscribe(data => {
17+
this.collections = data;
18+
});
2919
}
3020

3121
ngOnInit() {

‎src/app/detail/detail.component.spec.ts‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,28 @@ import { DetailComponent } from './detail.component';
66
import { RouterLinkStubDirective, RouterStubService, ActivatedRouteStubService } from '../../testing';
77
import { PhonePipe } from '../shared/phone.pipe';
88

9+
const TEST_DATA = {
10+
'id': 1,
11+
'name': '张三',
12+
'telNum': '18900001001',
13+
'address': '广东省深圳市',
14+
'email': '123@qq.com',
15+
'birthday': '1990年10月10日',
16+
'collection': 1
17+
};
18+
919
import { Observable } from 'rxjs/Observable';
10-
import { Observer } from 'rxjs/Observer';
1120
import 'rxjs/add/observable/of';
12-
class FakeContactService {
21+
const FakeContactService= {
1322
getContactById(id: any): Observable<any> {
14-
return Observable.of(1);
23+
return Observable.of(TEST_DATA);
1524
}
16-
}
25+
};
1726

1827
describe('DetailComponent', () => {
1928
let component: DetailComponent;
2029
let fixture: ComponentFixture<DetailComponent>;
30+
// let spy: any;
2131

2232
beforeEach(async(() => {
2333
TestBed.configureTestingModule({
@@ -29,7 +39,7 @@ describe('DetailComponent', () => {
2939
providers: [
3040
{ provide: Router, useClass: RouterStubService },
3141
{ provide: ActivatedRoute, useClass: ActivatedRouteStubService },
32-
{ provide: ContactService, useClass: FakeContactService }
42+
{ provide: ContactService, useValue: FakeContactService }
3343
]
3444
})
3545
.compileComponents();
@@ -38,10 +48,34 @@ describe('DetailComponent', () => {
3848
beforeEach(() => {
3949
fixture = TestBed.createComponent(DetailComponent);
4050
component = fixture.componentInstance;
51+
52+
// // 从注入器里获取 ContactService 实例
53+
// const contactService = fixture.debugElement.injector.get(ContactService);
54+
55+
// // 利用 spyOn 处理 getContactById() 函数
56+
// spy = spyOn(contactService, 'getContactById')
57+
// .and.returnValue(Observable.of(TEST_DATA));
58+
4159
fixture.detectChanges();
4260
});
4361

4462
it('should be created', () => {
4563
expect(component).toBeTruthy();
4664
});
65+
66+
it('test component data', () => {
67+
expect(component.detail.name).toEqual('张三');
68+
});
69+
70+
it('test component template content', () => {
71+
const el: HTMLElement = fixture.debugElement.nativeElement;
72+
// 获取并检查 DOM 元素的内容
73+
const tmplValue = el.querySelector('.detail-info>li:first-child>p:nth-child(2)').textContent;
74+
expect(tmplValue).toBe('189-0000-1001');
75+
});
76+
77+
// it('should get detail value by spies', () => {
78+
// expect(component.detail.name).toEqual('张三');
79+
// expect(spy.calls.any()).toEqual(true);
80+
// });
4781
});

‎src/app/detail/detail.component.ts‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,24 +35,12 @@ export class DetailComponent implements OnInit, OnDestroy {
3535
}
3636

3737
collectTheContact() {
38-
this.detail.collection === 0
39-
? (this.detail.collection = 1)
40-
: (this.detail.collection = 0);
41-
const ss_contacts = sessionStorage.getItem('contacts');
42-
this.contacts = JSON.parse(ss_contacts);
43-
this.contacts[this.contact_id - 1].collection = this.detail.collection;
44-
sessionStorage.setItem('contacts', JSON.stringify(this.contacts));
38+
this._constactService.collectContact(this.detail);
4539
}
4640

4741
getById(id: number) {
48-
const ss_contacts = sessionStorage.getItem('contacts');
49-
if (ss_contacts) {
50-
this.contacts = JSON.parse(ss_contacts);
51-
this.detail = this.contacts[id - 1];
52-
} else {
53-
this._constactService.getContactById(id).subscribe(data => {
54-
this.detail = data;
55-
});
56-
}
42+
this._constactService.getContactById(id).subscribe(data => {
43+
this.detail = data;
44+
});
5745
}
5846
}

‎src/app/edit/edit.component.ts‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export class EditComponent implements OnInit {
4545
//
4646
if (!this.isAdd) {
4747
this.getContactDetailById(this.editId);
48+
this.isName = this.isPhoneNum = this.isAddr = this.isEmail = this.isBir = true;
4849
}
4950
}
5051

@@ -76,37 +77,26 @@ export class EditComponent implements OnInit {
7677
}
7778

7879
getContactDetailById(id: number) {
79-
const ss_contacts = sessionStorage.getItem('contacts');
80-
if (ss_contacts) {
81-
this.contacts = JSON.parse(ss_contacts);
82-
this.contact = this.contacts[id - 1];
83-
} else {
84-
this._constactService.getContactById(id).subscribe(data => {
85-
this.contact = data;
86-
});
87-
}
80+
this._constactService.getContactById(id).subscribe(data => {
81+
this.contact = data;
82+
});
8883
}
8984

9085
addContact() {
91-
const contacts_length = this.contacts.length;
92-
const new_id = this.contacts[contacts_length - 1].id + 1;
93-
94-
const new_contact = {
95-
id: new_id,
86+
const newContact = {
9687
name: this.contact.name,
9788
telNum: this.contact.telNum,
9889
address: this.contact.address,
9990
email: this.contact.email,
10091
birthday: this.contact.birthday,
10192
collection: 0
10293
};
103-
this.contacts.push(new_contact);
104-
sessionStorage.setItem('contacts', JSON.stringify(this.contacts));
94+
this._constactService.addContact(newContact);
10595
this._router.navigate(['']);
10696
}
10797

10898
editContact() {
109-
const edit_contact = {
99+
const editContact = {
110100
id: this.editId,
111101
name: this.contact.name,
112102
telNum: this.contact.telNum,
@@ -115,10 +105,7 @@ export class EditComponent implements OnInit {
115105
birthday: this.contact.birthday,
116106
collection: 0
117107
};
118-
const ss_contacts = sessionStorage.getItem('contacts');
119-
this.contacts = JSON.parse(ss_contacts);
120-
this.contacts.splice(this.editId - 1, 1, edit_contact);
121-
sessionStorage.setItem('contacts', JSON.stringify(this.contacts));
108+
this._constactService.editContact(editContact);
122109
this._router.navigate(['/list', this.editId]);
123110
}
124111

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /