@ng-web-apis/common

A set of common utils for consuming Web APIs with Angular

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@ng-web-apis/common
53142.0.12 months ago3 years agoMinified + gzip package size for @ng-web-apis/common in KB

Readme

Common utils for Web APIs
Part of Web APIs for Angular
npm version npm bundle size .github/workflows/ci.yml Coveralls github A set of common utils for consuming Web APIs with Angular

Tokens

  • WINDOW — provides access to global window object
  • NAVIGATOR — provides access to window.navigator object
  • NETWORK_INFORMATION — provides access to window.navigator.connection object
  • USER_AGENT — provides access to window.navigator.userAgent string
  • MEDIA_DEVICES — provides access to window.navigator.mediaDevices object
  • PERFORMANCE — provides access to window.performance object
  • ANIMATION_FRAME — shared Observable based on window.requestAnimationFrame
  • CACHES — provides access to window.caches object
  • CSS — provides access to window.CSS object or mock object if it's not available (i.e. in IE)
  • CRYPTO — provides access to window.crypto object
  • LOCATION — provides access to window.location object
  • LOCAL_STORAGE — provides access to window.localStorage object
  • SESSION_STORAGE — provides access to window.sessionStorage object
  • SPEECH_RECOGNITION — provides access to SpeechRecognition class or returns null if browser does not support it
  • SPEECH_SYNTHESIS — provides access to window.speechSynthesis object
  • PAGE_VISIBILITY — wrapper for document.addEventListener('visibilityChange') api
  • HISTORY — provides access to window.history object

How to use

Just inject a token you need. You can also take a look at Stackblitz sample

What advantages do we get from abstract entities in our app?

👨‍🎓 It is easy to understand: you see all dependencies of your entity in its constructor 🧞 It is easy to test: you can just mock any of your dependencies to test 🧩 It is easy to reuse: your components and directives can be used in any context if it has dependencies that they need to be created ♻️ It is environment agnostic: you can start your app in SSR or other environments (see also @ng-web-apis/universal)

See also

Other Web APIs for Angular by @ng-web-apis

Core team

<tr>
<td align="center">
<a href="https://twitter.com/waterplea"
><img
src="https://github.com/waterplea.png?size=100"
width="100"
style="margin-bottom: -4px; border-radius: 8px;"
alt="Alex Inkin"
/><br /><b>Alex Inkin</b></a
>
<div style="margin-top: 4px">
<a
href="https://twitter.com/waterplea"
title="Twitter"
><img
width="16"
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg"
/></a>
<a href="https://github.com/waterplea" title="Github"
><img
width="16"
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg"
/></a>
<a
href="https://t.me/waterplea"
title="Telegram"
><img
width="16"
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg"
/></a>
</div>
</td>
<td align="center">
<a href="http://marsibarsi.me"
><img
src="https://github.com/marsibarsi.png?size=100"
width="100"
style="margin-bottom: -4px; border-radius: 8px;"
alt="Roman Sedov"
/><br /><b>Roman Sedov</b></a
>
<div style="margin-top: 4px">
<a
href="https://twitter.com/marsibarsi"
title="Twitter"
><img
width="16"
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg"
/></a>
<a
href="https://github.com/marsibarsi"
title="GitHub"
><img
width="16"
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg"
/></a>
<a
href="https://t.me/marsibarsi"
title="Telegram"
><img
width="16"
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg"
/></a>
</div>
</td>
</tr>