AndrewJBateman/angular-news-app

:clipboard: Angular app that displays news articles from a news API.

⚡ Angular News App

• 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

📄 Table of contents

• ⚡ Angular News App
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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....

📷 Screenshots

.

📶 Technologies

• Angular v15
• RxJS Library v7 used to subscribe to the API data observables.
• News REST API v2 used to search for news articles.
• Angular Material Design v15 used for the user interface, especially mat-menu, mat-sidenav, mat-card etc.

💾 Setup

• 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.

💻 Code Examples

• 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);
  }
}

🆒 Features

• Angular HttpClient module used to communicate with back-end services via the XMLHttpRequest browser interface.

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing.

👏 Inspiration

• article by Rashid Sakara on building a news application using Angular 6 and Google’s Material Design

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com