Skip to content

Commit b857cce

Browse files
lancelilanceli
committed
feat(user): add user page
1 parent 334a5fe commit b857cce

File tree

10 files changed

+211
-42
lines changed

10 files changed

+211
-42
lines changed

‎src/app/app.component.ts‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { Component, ViewChild } from '@angular/core';
22
import { Nav, Platform } from 'ionic-angular';
3-
import { StatusBar, Splashscreen } from 'ionic-native';
3+
import { StatusBar, Splashscreen, Deeplinks } from 'ionic-native';
44

5-
import { Page1 } from '../pages/page1/page1';
6-
import { Page2 } from '../pages/page2/page2';
75
import { TopicsPage } from '../pages/topics/topics';
6+
import { UserPage } from '../pages/user/user';
87

98

109
@Component({
@@ -19,14 +18,6 @@ export class MyApp {
1918

2019
constructor(public platform: Platform) {
2120
this.initializeApp();
22-
23-
// used for an example of ngFor and navigation
24-
this.pages = [
25-
{ title: 'Topics', component: TopicsPage },
26-
{ title: 'Page One', component: Page1 },
27-
{ title: 'Page Two', component: Page2 }
28-
];
29-
3021
}
3122

3223
initializeApp() {
@@ -43,4 +34,16 @@ export class MyApp {
4334
// we wouldn't want the back button to show in this scenario
4435
this.nav.setRoot(page.component);
4536
}
37+
38+
ngAfterViewInit() {
39+
console.log('ng after view init')
40+
Deeplinks.routeWithNavController(this.nav, {
41+
'/topics': TopicsPage,
42+
'/user/:loginname': UserPage
43+
}).subscribe((match) => {
44+
console.log('Successfully routed', match);
45+
}, (nomatch) => {
46+
console.warn('Unmatched Route', nomatch);
47+
});
48+
}
4649
}

‎src/app/app.module.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
import { NgModule, ErrorHandler } from '@angular/core';
22
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
33
import { MyApp } from './app.component';
4-
import { Page1 } from '../pages/page1/page1';
5-
import { Page2 } from '../pages/page2/page2';
4+
import { UserPage } from '../pages/user/user';
65
import { TopicsPage } from '../pages/topics/topics';
76
import { TopicPage } from '../pages/topic/topic';
87

98
@NgModule({
109
declarations: [
1110
MyApp,
12-
Page1,
13-
Page2,
11+
UserPage,
1412
TopicsPage,
1513
TopicPage
1614
],
1715
imports: [
18-
IonicModule.forRoot(MyApp)
16+
IonicModule.forRoot(MyApp, {
17+
locationStrategy: 'hash'
18+
})
1919
],
2020
bootstrap: [IonicApp],
2121
entryComponents: [
2222
MyApp,
23-
Page1,
24-
Page2,
23+
UserPage,
2524
TopicsPage,
2625
TopicPage
2726
],

‎src/classes/user.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export class User {
2+
loginname: string;
3+
avatar_url: string;
4+
githubUsername: string;
5+
create_at: string;
6+
}
7+

‎src/pages/topic/topic.html‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,34 @@
1414

1515

1616
<ion-content padding>
17-
18-
<div class="topic-info" *ngIf="topic">
19-
{{ topic.id}}
20-
<div class="title">
21-
{{ topic.title}}
22-
</div>
23-
<div class="content">
24-
{{ topic.content}}
17+
<div class="topic-info" *ngIf="topic">
18+
<div class="row topic">
19+
<div class="col col90">
20+
<h4 class="title">{{topic.title}}</h4>
21+
<div class="summary">
22+
<strong>
23+
<a (click)="gotoUser(topic.author.loginname)">
24+
<img [src]="topic.author.avatar_url" class="avatar">
25+
{{topic.author.loginname}}</a>
26+
</strong>
27+
<span class="item-note" am-time-ago="topic.last_reply_at"></span>
28+
</div>
29+
<div class="topic-content" [innerHTML]="topic.content">
30+
</div>
2531
</div>
2632
</div>
2733

34+
<ion-list class="replies">
35+
<ion-item *ngFor="let reply of topic.replies">
36+
{{reply.author.loginname}}
37+
<div class="reply-content" [innerHTML]="reply.content"></div>
38+
<span class="item-note cnode" *ngIf="reply.ups.length > 0">
39+
<i class="icon ion-thumbsup"></i>
40+
{{reply.ups.length}}
41+
&nbsp;
42+
</span>
43+
</ion-item>
44+
</ion-list>
45+
</div>
46+
2847
</ion-content>

‎src/pages/topic/topic.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component } from '@angular/core';
22
import { NavController, NavParams } from 'ionic-angular';
33

4+
import { UserPage } from '../user/user';
45
import { Topic } from '../topics/topic';
56
import { TopicService } from '../../providers/topic-service';
67
/*
@@ -31,7 +32,15 @@ export class TopicPage {
3132

3233
getTopic(): void {
3334
this.topicService.getTopicById(this.navParams.get('id')).then(
34-
topic => this.topic = topic
35+
(topic) => {
36+
this.topic = topic
37+
console.log(this.topic)
38+
}
3539
);
3640
}
41+
42+
gotoUser(loginName: String): void {
43+
console.log('goto user', loginName);
44+
this.navCtrl.push(UserPage, {loginName: loginName})
45+
}
3746
}

‎src/pages/topics/topics.html‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,21 @@
88
</ion-header>
99

1010
<ion-content padding>
11-
<h3>Topcis</h3>
12-
<li *ngFor="let topic of topics" (click)="onSelect(topic)">
13-
<span>
14-
{{ topic.id }}
15-
</span>
16-
<span>
17-
{{ topic.title }}
18-
</span>
19-
</li>
20-
21-
<ion-infinite-scroll (ionInfinite)="loadMore($event)">
22-
<ion-infinite-scroll-content></ion-infinite-scroll-content>
23-
</ion-infinite-scroll>
24-
25-
11+
<ion-list [virtualScroll]="topics" class="topics">
12+
<ion-item *virtualItem="let topic" (click)="onSelect(topic)">
13+
<ion-img [src]="topic.author.avatar_url"></ion-img>
14+
<h2>{{topic.title}}</h2>
15+
<p class="summary">
16+
<span *ngIf="!topic.top && !topic.good" class="tab">{{topic.tab}}</span>
17+
<span *ngIf="topic.top" class="tab hl">置顶</span>
18+
<span *ngIf="topic.good && !topic.top" class="tab hl">精华</span>
19+
{{topic.author.loginname}}
20+
<span class="item-note ago" am-time-ago="topic.last_reply_at">
21+
</span>
22+
</p>
23+
</ion-item>
24+
</ion-list>
25+
<ion-infinite-scroll (ionInfinite)="loadMore($event)">
26+
<ion-infinite-scroll-content></ion-infinite-scroll-content>
27+
</ion-infinite-scroll>
2628
</ion-content>

‎src/pages/user/user.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!--
2+
Generated template for the User page.
3+
4+
See http://ionicframework.com/docs/v2/components/#navigation for more info on
5+
Ionic pages and navigation.
6+
-->
7+
<ion-header>
8+
9+
<ion-navbar>
10+
<ion-title>User</ion-title>
11+
</ion-navbar>
12+
13+
</ion-header>
14+
15+
16+
<ion-content padding>
17+
<ion-list *ngIf="user">
18+
<ion-item class="item-divider item-gap">
19+
</ion-item>
20+
<ion-item class="item-avatar">
21+
<img [src]="user.avatar_url" *ngIf="!settings">
22+
<span>{{user.loginname}}</span>
23+
<span>{{user.score}}积分</span>
24+
<p>
25+
注册于：{{user.create_at}}
26+
</p>
27+
</ion-item>
28+
<ion-item class="item-divider">
29+
最近主题
30+
</ion-item>
31+
<ion-item *ngFor="let topic of user.recent_topics">
32+
<h2>{{topic.title}}</h2>
33+
<p>
34+
{{topic.author.loginname}}
35+
<span class="item-note" am-time-ago="topic.last_reply_at">
36+
</span>
37+
</p>
38+
</ion-item>
39+
<ion-item class="item-divider">
40+
最近回复
41+
</ion-item>
42+
<ion-item class="item-avatar" *ngFor="let topic of user.recent_replies">
43+
<img [src]="topic.author.avatar_url" *ngIf="!settings">
44+
<h2>{{topic.title}}</h2>
45+
<p>
46+
{{topic.author.loginname}}
47+
<span class="item-note" am-time-ago="topic.last_reply_at">
48+
</span>
49+
</p>
50+
</ion-item>
51+
</ion-list>
52+
53+
</ion-content>

‎src/pages/user/user.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-user {
2+
3+
}

‎src/pages/user/user.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Component } from '@angular/core';
2+
import { NavController, NavParams } from 'ionic-angular';
3+
4+
import { User } from '../../classes/user';
5+
import { UserService } from '../../providers/user-service';
6+
/*
7+
Generated class for the User page.
8+
9+
See http://ionicframework.com/docs/v2/components/#navigation for more info on
10+
Ionic pages and navigation.
11+
*/
12+
@Component({
13+
selector: 'page-user',
14+
templateUrl: 'user.html',
15+
providers: [UserService]
16+
})
17+
export class UserPage {
18+
19+
user: User
20+
21+
constructor(public navCtrl: NavController, public navParams: NavParams, private userService: UserService) {
22+
}
23+
24+
ionViewDidLoad() {
25+
console.log('ionViewDidLoad UserPage');
26+
}
27+
28+
ngOnInit(): void {
29+
this.getUser()
30+
}
31+
32+
getUser(): void {
33+
this.userService.getByLoginName(this.navParams.get('loginName')).then(
34+
(user) => {
35+
this.user = user
36+
console.log(this.user)
37+
}
38+
);
39+
}
40+
41+
}

‎src/providers/user-service.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Injectable } from '@angular/core';
2+
import { Http } from '@angular/http';
3+
import 'rxjs/add/operator/map';
4+
import 'rxjs/add/operator/toPromise';
5+
6+
import { User } from '../classes/user';
7+
8+
/*
9+
Generated class for the UserService provider.
10+
11+
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
12+
for more info on providers and Angular 2 DI.
13+
*/
14+
@Injectable()
15+
export class UserService {
16+
private userUrl: string = 'https://cnodejs.org/api/v1/user'
17+
18+
constructor(public http: Http) {
19+
console.log('Hello UserService Provider');
20+
}
21+
22+
getByLoginName(loginName: string): Promise<User> {
23+
return this.http.get(`${this.userUrl}/${loginName}`)
24+
.toPromise()
25+
.then(
26+
(resposne) => {
27+
console.log(resposne);
28+
return resposne.json().data as User
29+
}
30+
)
31+
}
32+
33+
}

0 commit comments

Comments
 (0)