- Gets API news data and displays it in a format suitable for viewing on a phone.
- Displays a left hand side navigation bar that allows the user to select a news channel. A single column displays news articles from this news channel.
- The News API service from newsapi is used to generate the articles. It now only works on localhost. It will not work when deployed due to CORS errors (error 406) which means they want you to pay a subscription to fully access the API.
- Code from article by Rashid Sakara - see π Inspiration below
- Note: to open web links in a new window use: ctrl+click on link
![GitHub last commit](https://camo.githubusercontent.com/1bccdc27a66ddbacc50309cb58345c67b477323ce5093dc0d825264306ab386e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6173742d636f6d6d69742f416e647265774a426174656d616e2f616e67756c61722d6e6577732d6170703f7374796c653d706c6173746963)
- Uses the model-view-viewmodel (MVVM) of Angular to bind the remote data that is stored in objects in the application template. The component plays the part of the controller/viewmodel. The template represents the view.
- Very basic app to show news, does not use reactive programming best practices - specified function return types, typescript models, etc....
.
- Install dependencies using
npm i
- Get yourself a free API key from
www.newsapi.org
and add it to news-api.service.ts
- Run
ng serve
for a dev server. Navigate to http://localhost:4200/
. The app does automatically reload if you change any of the source files.
news-api.service.ts
to get API news data using Angular httpClient module.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class NewsApiService {
api_key = 'YOUR API KEY';
constructor(private http: HttpClient) { }
initSources() {
return this.http.get('https://newsapi.org/v2/sources?language=en&apiKey=' + this.api_key);
}
initArticles() {
return this.http.get('https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=' + this.api_key);
}
getArticlesByID(source: String) {
return this.http.get('https://newsapi.org/v2/top-headlines?sources=' + source + '&apiKey=' + this.api_key);
}
}
- Angular HttpClient module used to communicate with back-end services via the XMLHttpRequest browser interface.
- Status: Working.
- To-Do: Nothing.
- This project is licensed under the terms of the MIT license.