angular-rxjs-api
所属分类：网络编程
开发工具：TypeScript
文件大小：0KB
下载次数：0
上传日期：2023-06-12 09:49:56
上 传 者：
sh-1993
说明： Angular应用程序，用于获取Wikipedia API数据，并使用异步 React编程观察将其显示在卡上，
(Angular app to fetch Wikipedia API data and display it on cards using asynchronous reactive programming observables,)
文件列表:
.editorconfig (274, 2023-06-12)
angular.json (3210, 2023-06-12)
docs/ (0, 2023-06-12)
docs/3rdpartylicenses.txt (12967, 2023-06-12)
docs/404.html (2633, 2023-06-12)
docs/favicon.ico (948, 2023-06-12)
docs/index.html (2633, 2023-06-12)
docs/main.a45e3e3eab6b98e5.js (242908, 2023-06-12)
docs/polyfills.d3749862ec079ef8.js (33909, 2023-06-12)
docs/runtime.5622881596559ef5.js (1082, 2023-06-12)
docs/styles.d714cf7d9902038c.css (11447, 2023-06-12)
img/ (0, 2023-06-12)
img/searchpanel.png (275313, 2023-06-12)
karma.conf.js (1433, 2023-06-12)
package-lock.json (465939, 2023-06-12)
package.json (1268, 2023-06-12)
src/ (0, 2023-06-12)
src/app/ (0, 2023-06-12)
src/app/app-routing.module.ts (245, 2023-06-12)
src/app/app.component.spec.ts (866, 2023-06-12)
src/app/app.component.ts (776, 2023-06-12)
src/app/app.module.ts (690, 2023-06-12)
src/app/components/ (0, 2023-06-12)
src/app/components/article-card/ (0, 2023-06-12)
src/app/components/article-card/article-card.component.html (280, 2023-06-12)
src/app/components/article-card/article-card.component.scss (0, 2023-06-12)
src/app/components/article-card/article-card.component.spec.ts (635, 2023-06-12)
src/app/components/article-card/article-card.component.ts (330, 2023-06-12)
src/app/components/article-card/article-card.module.ts (333, 2023-06-12)
src/app/components/search/ (0, 2023-06-12)
src/app/components/search/search.component.html (199, 2023-06-12)
src/app/components/search/search.component.scss (1, 2023-06-12)
src/app/components/search/search.component.spec.ts (712, 2023-06-12)
src/app/components/search/search.component.ts (864, 2023-06-12)
src/app/components/search/search.module.ts (454, 2023-06-12)
src/app/core/ (0, 2023-06-12)
src/app/core/interfaces/ (0, 2023-06-12)
src/app/core/interfaces/article.interface.ts (232, 2023-06-12)
... ...
# :zap: Angular RxJS API
* Angular app to fetch Wikipedia API data and display it on cards using asynchronous reactive programming observables
* Tailwind styling used for search form and search results cards
* **Note:** to open web links in a new window use: _ctrl+click on link_
## :page_facing_up: Table of contents
* [:zap: Angular RxJS API](#zap-angular-rxjs-api)
* [: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)
* [:wrench: Testing](#wrench-testing)
* [:computer: Code Examples](#computer-code-examples)
* [:cool: Features](#cool-features)
* [:clipboard: Status, Testing \& To-Do List](#clipboard-status-testing--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:file\_folder: License](#file_folder-license)
* [:envelope: Contact](#envelope-contact)
## :books: General info
* Displays Wikipedia API JSON search data
* Wikipedia API does not require an API key
* [RxJS pluck operator](https://www.learnrxjs.io/learn-rxjs/operators/transformation/pluck) used
## :camera: Screenshots
## :signal_strength: Technologies
* [Angular v16](https://angular.io/) Javascript framework
* [Rxjs v7](https://rxjs.dev/) Reactive Extensions Library for JavaScript
* [Tailwind CSS v3](https://tailwindcss.com/) styling, minimises build bundle size
* [Wikipedia API](https://www.mediawiki.org/wiki/API:Tutorial)
## :floppy_disk: Setup
* Install dependencies using `npm i`
* Run `ng serve` for a dev server. Frontend will open at `http://localhost:4200/` - refreshes on code changes
* Run `npm run build` to create build folder
## :wrench: Testing
* Run `ng test` to run Jasmine unit tests via [Karma](https://karma-runner.github.io). Testing not set up
## :computer: Code Examples
* Article card using Tailwind CSS styling and data-binding of search results
```typescript
```
## :cool: Features
* Small build bundle size due to Tailwind styles (288kB)
## :clipboard: Status, Testing & To-Do List
* Status: Working. Deployed to Github pages
* To-Do: Optional nav-bar and about/contact pages
## :clap: Inspiration
* [How to Structure Angular Apps in 2021](https://javascript.plainenglish.io/how-to-structure-angular-apps-in-2021-a0bdd481ad0d)
* [How do I display HTML inside an Angular binding?](https://blog.briebug.com/blog/how-do-i-display-html-inside-an-angular-binding)
* [dev.to: Setup TailwindCSS in Angular the easy way](https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l)
## :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: `gomezbateman@gmail.com`
近期下载者：
相关文件：
收藏者：