Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andrewjbateman/angular-api-project

:clipboard: App using a DataService with httpClient to get json data from an external API.
https://github.com/andrewjbateman/angular-api-project

angular angular16 api api-json dataservice form-builder form-validation html5 httpclient json-api json-data observable-streams rxjs rxjs-observable rxjs-subscriptions rxjs7 scss-styles typescript4

Last synced: about 2 months ago
JSON representation

:clipboard: App using a DataService with httpClient to get json data from an external API.

Host: GitHub
URL: https://github.com/andrewjbateman/angular-api-project
Owner: AndrewJBateman
License: mit
Created: 2019-04-17T10:37:43.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-07-19T12:04:33.000Z (over 1 year ago)
Last Synced: 2023-07-19T13:26:45.815Z (over 1 year ago)
Topics: angular, angular16, api, api-json, dataservice, form-builder, form-validation, html5, httpclient, json-api, json-data, observable-streams, rxjs, rxjs-observable, rxjs-subscriptions, rxjs7, scss-styles, typescript4
Language: TypeScript
Homepage:
Size: 1.67 MB
Stars: 2
Watchers: 3
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # :zap: Angular API Project

* App using a DataService with httpClient to get a JSON Observable data stream from an API and display it using the Angular async pipe.

* App also submits a simple typed Contact form.

* **Note:** to open web links in a new window use: _ctrl+click on link_

![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/angular-api-project?style=plastic)

![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/angular-api-project?style=plastic)

![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/angular-api-project?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/angular-api-project?style=plastic)

## :page_facing_up: Table of contents

* [:zap: Angular API Project](#zap-angular-api-project)

  * [:page\_facing\_up: Table of contents](#page_facing_up-table-of-contents)

  * [:books: General info](#books-general-info)

  * [:camera: Screenshots](#camera-screenshots)

  * [:signal\_strength: Technologies](#signal_strength-technologies)

  * [:floppy\_disk: Setup](#floppy_disk-setup)

  * [:computer: Code Examples](#computer-code-examples)

  * [:cool: Features](#cool-features)

  * [:clipboard: Status \& To-Do List](#clipboard-status--to-do-list)

  * [:clap: Inspiration](#clap-inspiration)

  * [:file\_folder: License](#file_folder-license)

  * [:envelope: Contact](#envelope-contact)

## :books: General info

* Routing module allows user to navigate between Home, About and Contact pages.

* API json/image data displayed: firstname, lastname, email and avatar.

* Angular FormBuilder used to allow user to submit a form with name and message. Form uses validation.

* Styling is pure SCSS

## :camera: Screenshots

![Example screenshot](./imgs/home.png).

![Example screenshot](./imgs/contact-form.png).

## :signal_strength: Technologies

* [Angular v16](https://angular.io/)

* [RxJS Library v7](https://angular.io/guide/rx-library) used to [subscribe](http://reactivex.io/documentation/operators/subscribe.html) to the API data [observable](http://reactivex.io/documentation/observable.html).

* [The HttpClient in @angular/common/http](https://angular.io/guide/http) offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers.

## :floppy_disk: Setup

* Run `npm i` to install dependencies

* Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## :computer: Code Examples

* `data.service.ts` ES6 arrow function to return observable from API using `apiResponse` interface

```typescript

getUsers = (): Observable => {

  return this.http.get("https://reqres.in/api/users");

}

```

* `home.component.ts` ng init. function to get observable data for the template async pipe - note: using an ES6 arrow function here would result in nothing being displayed, due the use of 'this'

```typescript

ngOnInit () {

  this.users$ = this.data.getUsers();

};

```

## :cool: Features

* API web link could be changed to get different and more complex data.

## :clipboard: Status & To-Do List

* Status: Working.

* To-Do: Nothing.

## :clap: Inspiration

* This was originally a Gary Simon tutorial but it is no longer available on-line. Here is a link to his website: [designcourse.com](https://designcourse.com/) - worth a look

## :file_folder: License

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

## :envelope: Contact

* Repo created by [ABateman](https://github.com/AndrewJBateman), email: `[email protected]`