angularfire-lite - GitLite

KO | EN

gitlite — search

#typescript #llm #android #rust #deep-learning #linux #docker #nodejs #macos #java #windows #vue #openai #open-source

angularfire-lite

(★ 237)

:zap: Lightweight library to use Firebase API with Angular

파일 탐색기

최종 버전 다운로드 (.zip)

- - codeStyleConfig.xml
- - Project_Default.xml
- angularfire-lite.iml
- modules.xml
- vcs.xml
- - auth.service.ts
- - database.service.ts
- - firestore.service.ts
- - messaging.service.ts
- - storage.service.ts
- core.config.ts
- core.module.ts
- core.service.ts
- public_api.ts
.browserslistrc
.editorconfig
.gitignore
.travis.yml
circle.yml
LICENSE
ng-package.json
package-lock.json
package.json
README.md
tsconfig.json
tslint.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/hamedbaatour/angularfire-lite

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd angularfire-lite

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install --save angularfire-lite firebase

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![angularfire-lite-illustration](https://cdn.rawgit.com/hamedbaatour/ffd1020004cd8adc14535cebc53fc442/raw/086c6a7a5312ca326a0dc4582e98659865f3c6a3/ANGULAR%2520FIRE%2520ILLUSTARTION.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

<p align="center">
  <h1 align="center">AngularFire Lite</h1>
    <p align="center">lightweight wrapper to use Firebase API with Angular.</p>
</p>
<div align="center">
  
<img src="https://cdn-images-1.medium.com/max/1800/1*Gdz_rBj49aPqhhAQpeYtBA.gif" height="180" />

[![travis][travis]][travis-url]
[![circleci][circleci]][circleci-url]
[![npmv][npmv]][npmv-url]
[![npmdown][npmdown]][npmdown-url]
[![daviddep][daviddep]][daviddep-url]
[![daviddevdep][daviddevdep]][daviddevdep-url]
[![greenkeeper][greenkeeper]][greenkeeper-url]

<br>
  
 [![Join the chat at https://gitter.im/angularfire-lite/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angularfire-lite/Lobby)
[![Ng-packgr](https://img.shields.io/badge/powered%20by-ng--packagr-blue.svg)](https://github.com/dherges/ng-packagr)
![license](https://img.shields.io/github/license/hamedbaatour/angularfire-lite.svg)
<br>
</div>

| Features              | AngularFire Lite         | AngularFire2  |
| -------------         |:-------------:|         :-------------------:  |
| Authentication        | :heavy_check_mark:    |  :heavy_check_mark:     |
| Firestore             | :heavy_check_mark:    |  :heavy_check_mark:    |
| Storage               | :heavy_check_mark:    |  :heavy_check_mark:|
| Realtime Database     | :heavy_check_mark:    |  :heavy_check_mark:    |
| Cloud Messaging       | :heavy_check_mark:    |  :x:                   |
| Server Side Rendering | :heavy_check_mark:    |  :heavy_plus_sign:  :heavy_minus_sign: |
| State Transfer | :heavy_check_mark:    |  :x:  |
| Transactions and Batched Writes | :heavy_check_mark: <br> Observable Based    |  :x:  |
| NPM Package Size | <a href="https://arve0.github.io/npm-download-size/#angularfire-lite" target="blank">**84 KB**</a> :zap: | <a href="https://arve0.github.io/npm-download-size/#angularfire2" target="blank">**124 KB**</a> :turtle: |

[![angluarfire-lite-ssr](https://cdn.rawgit.com/hamedbaatour/34003410a08925cb4301ce06fbc3936e/raw/91e29b8e406bb37404ab943519c374f1247957ec/SSR.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)
### Finally SSR with Firebase!
___

Angularfire Lite is the very first angular library to support server side rendering with firebase.
<br>
<br>
 - :file_folder: **Supports Both Firebase Databases: Firestore & Realtime Database**
 
 
 - :tada: **No Flickering whatsoever when the app bootstraps**
 
 - :zap:  **Better performance**
 
 - :mag: **Search engine optimization** 
  
 - :relaxed: **Easy implementation**

<p></p>
<p align="center">
  <h2 align="center">Getting Started</h2>
</p>

[![angularfire-lite-step-1](https://cdn.rawgit.com/hamedbaatour/a500be30a8520653d7759dfd248b535f/raw/7d0facd6691beadad8f74d22d44e68e4edc373fb/step1%2520-%2520angularfire-lite.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

<br>

**Reminder**: don't forget to install [nodejs](https://nodejs.org/en/) first.

```bash
 
npm install --save angularfire-lite firebase
 
```
<br>

[![angularfire-lite-step-2](https://cdn.rawgit.com/hamedbaatour/9b22511bf9c59cfe1aab595bfd528c5d/raw/9e08922b4aee17d61f32bdb5500fa11a335e93e0/step%25202.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

<br>

**How?**: 
- Create a firebase account and login to your dashboard

- Click on 'Add Firebase to your web app' icon and copy the config object

- Add it to `environment.ts` & `environment.prod.ts` located under `/src/environments/`

```ts
export const environment = {
  production: false, // production: true => in `enviroment.prod.ts`
  config: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};
```
<br>

[![angularfire-lite-step-3](https://cdn.rawgit.com/hamedbaatour/3855327ef6c4f7d22133a693231d6186/raw/956f99f36d834e15898e7712064f4316787f4185/step%25203.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

**How?**: 
- Import the config object we created from `enviroment.ts`

- Import `AngularFireLite` and pass it the config object

```ts
import { AngularFireLite } from 'angularfire-lite';
import {environment} from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireLite.forRoot(environment.config)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

<br>

[![angularfire-lite-api](https://cdn.rawgit.com/hamedbaatour/f8c9581ab250d47e841d49ae7690ef82/raw/2cc67b7b2d1c29adbcdf3b7ea32a2de44439056a/api.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

- **Observable based**: Every function returns an Observable that you should subscribe to it to get back the data.

- **Simple API**: AngularFire Lite has a simple straight forward syntax similar to the native Firebase API plus some simple additions.

<h2 align="center"><a href="https://github.com/hamedbaatour/angularfire-lite/wiki">Documentation </a></h2>

<p>You can also clone the live demo to use it as a starting point in the meantime as <a href="https://github.com/hamedbaatour/afl-cli"><b>AFL CLI</b></a> gets launched officially soon. so stay tuned!</p>
<h5>Angular 5:</h5> 
<h3><a href="https://github.com/hamedbaatour/angularfire-lite-demo">DEMO APP</a></h3>
<h5>Ionic 2:</h5>
<h3><a href="https://github.com/hamedbaatour/angularfire-lite-ionic-demo"> DEMO APP </a></h3>

<br>

[![angularfire-lite-faq](https://cdn.rawgit.com/hamedbaatour/fbbd36bce4d7e5a4ec0e07b71b71db15/raw/d58da0f50d52c27815832f7587b29d5b3d58eb3f/FAQ.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

### Users
___

- **Will be there any breaking changes to AngularFire Lite?**

AngularFire Lite will try to avoid breaking changes as much as possible and keep the API consistent across all the firebase services provided.

### Contributors:
___

- **How can I contribute?**

We want to keep AngularFire Lite in sync with the Firebase API so if any new feature comes out don't hesitate to send a PR.

- **Why AngularFire Lite is so simple?**

Why add unnecessary complexity in simplicity draws a straight line to productivity.

- **Why there are no tests?**

currenty the demo is our primary test but there will be proper tests in the future.

<br>

[![angularfire-lite-credits](https://cdn.rawgit.com/hamedbaatour/fe2002a2acbdd15f3067b344de7eda3c/raw/3f3cb82cc4d528cc468be349ee5378b20c7c5a24/credits.svg)](https://raw.githubusercontent.com/hamedbaatour/angularfire-lite/master/)

### Team:
___

<table>
  <tbody>
    <tr>
      <td align="center" valign="top">
        <a href="https://github.com/hamedbaatour"><img width="150" height="150" src="https://avatars3.githubusercontent.com/u/5658460?s=460&v=4?s=150"></a>
        <br>
        <a href="https://github.com/hamedbaatour">Hamed Baatour</a>
        <p>Full Stack Developer</p>
        <p>Author of AFL</p>
      </td>
      <td align="center" valign="top">
        <img width="150" height="150" src="https://i.ibb.co/x1gnstw/placeholder-profile-sq.jpg?s=150">
        <br>
        <a href="#"> - </a>
        <p> - </p>
        <p> - </p>
      </td>
      <td align="center" width="20%" valign="top">
               <img width="150" height="150" src="https://i.ibb.co/x1gnstw/placeholder-profile-sq.jpg?s=150">
        <br>
        <a href="#"> - </a>
        <p> - </p>
        <p> - </p>
      </td>
      <td align="center" valign="top">
               <img width="150" height="150" src="https://i.ibb.co/x1gnstw/placeholder-profile-sq.jpg?s=150">
        <br>
        <a href="#"> - </a>
        <p> - </p>
        <p> - </p>
		<br>
      </td>
     </tr>
  </tbody>
</table>

Note: doors are open to join the AFL team!

[travis]: https://img.shields.io/travis/hamedbaatour/angularfire-lite.svg
[travis-url]: https://travis-ci.org/hamedbaatour/angularfire-lite

[circleci]: https://circleci.com/gh/hamedbaatour/angularfire-lite.svg?style=shield
[circleci-url]: https://circleci.com/gh/hamedbaatour/angularfire-lite

[npmv]: https://badge.fury.io/js/angularfire-lite.svg
[npmv-url]: https://www.npmjs.com/package/angularfire-lite

[npmdown]: https://img.shields.io/npm/dt/angularfire-lite.svg
[npmdown-url]: https://www.npmjs.com/package/angularfire-lite

[daviddep]: https://david-dm.org/hamedbaatour/angularfire-lite/status.svg
[daviddep-url]: https://david-dm.org/hamedbaatour/angularfire-lite

[daviddevdep]: https://david-dm.org/hamedbaatour/angularfire-lite/dev-status.svg
[daviddevdep-url]: https://david-dm.org/hamedbaatour/angularfire-lite?type=dev

[greenkeeper]: https://badges.greenkeeper.io/hamedbaatour/angularfire-lite.svg
[greenkeeper-url]: #