Angular Ionic News App Tutorial for Beginner

Github repo: https://github.com/younglaker/CometLab/tree/ionic-news

Command

Start serve

1
ionic serve

tabs

generate command:

1
ionic g [type: page/component/tabs/provider/service/provider]  [names]

generate page:

1
ionic g page  [names]

For example, after generating a news page, in src/app/tabs/tabs.module.ts, add:

1
2
3
4
5
6
7
8
import { NewsPageModule } from '../news/news.module';
// [page name] +PageModule

@NgModule({
imports: [
...
NewsPageModule
],

In src/app/tabs/tabs.page.html, add:

1
2
3
4
<ion-tab-button tab="news">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>

In src/app/tabs/tabs.router.module.ts, add:

1
2
3
4
5
6
7
8
9
10
11
12
13
const routes: Routes = [
{
...
children: [
{
path: "news",
children: [
{
path: "",
loadChildren: "../news/news.module#NewsPageModule"
}
]
}

Get news list

API

https://newsapi.org/

https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=

Set environment arguments. In src/environments/environment.ts:

1
2
3
4
export const environment = {
...
apiUrl: "https://newsapi.org/v2/",
apiKey: "c***********"

Create service:

1
$ ionic g service news

In /src/app/app.module.ts

1
2
3
4
5
6
7
import { HttpClientModule } from '@angular/common/http';

@NgModule({
...
imports: [
...
HttpClientModule

In src/app/news.service.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
import { HttpClient } from '@angular/common/http';

const API_URL = environment.apiUrl;
const API_KET = environment.apiKey;


export class NewsService {
constructor(private http: HttpClient) {}

getData(url) {
return this.http.get(`${API_URL}/${url}?apiKey=?{ API_KEY }`);
}
}

In src/app/news/news.page.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { NewsService } from '../news.service';

export class NewsPage implements OnInit {
constructor(private newsService: NewsService) {}

ngOnInit() {
// NewsService from news.service.ts
this.newsService
.getData('top-headlines?country=us&category=business')
.subscribe(data => {
console.log(data);
});
}
}

data

Display news

In src/app/news/news.page.ts add

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { NewsService } from '../news.service';

export class NewsPage implements OnInit {
// res: store the data from API, type is any
res: any;

ngOnInit() {
this.newsService
.getData('top-headlines?country=us&category=business')
.subscribe(data => {
// console.log(data);
this.res = data;
});
}
}

In src/app/news/news.page.html

1
2
3
4
5
6
7
8
9
<!-- Here is a '?',  rendering after getting data-->
<ion-card *ngFor="let article of res?.articles">
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title> {{ article.title }} </ion-card-title>
</ion-card-header>
<ion-img [src]="article.urlToImage"></ion-img>
<ion-card-content>{{ article.description }} </ion-card-content>
</ion-card>

news lists

src/app/news/news.page.html, bind click event

1
2
3
4
<ion-card
*ngFor="let article of res?.articles"
(click)="goToNewsSingle(article)"
>

src/app/app-routing.module.ts, it generate routes path when generate the news-single page, we can use it directly:

1
2
3
4
const routes: Routes = [
...
{ path: 'news-single', loadChildren: './news-single/news-single.module#NewsSinglePageModule' }
];

src/app/news/news.page.ts, define goToNewsSingle() event

1
2
3
4
5
6
7
8
export class NewsPage implements OnInit {
...
constructor(..., private router: Router) {}

goToNewsSingle(article) {
this.newsService.currentArticle = article;
this.router.navigate(['/news-single']);
}

src/app/news-single/news-single.page.ts

1
2
3
4
5
6
7
8
9
10
11
12
..
import { NewsService } from '../news.service';

export class NewsSinglePage implements OnInit {
article; //store the content of current article

constructor(private newsService: NewsService) {}

ngOnInit() {
this.article = this.newsService.currentArticle;
}
}

src/app/news-single/news-single.page.html display the content of current article:

1
2
3
4
5
6
7
8
<ion-card>
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title> {{ article.title }} </ion-card-title>
</ion-card-header>
<ion-img [src]="article.urlToImage"></ion-img>
<ion-card-content>{{ article.description }} </ion-card-content>
</ion-card>

news detail

Back button

1
2
3
<ion-buttons slot="start">
<ion-back-button text="...." icon="....">
</ion-buttons>

Exchange blogroll: http://laker.me/blog
Github:https://github.com/younglaker


Angular Ionic News App Tutorial for Beginner

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我吃个鸡腿吧