@angular/fire를 사용한 Angular 8 Firebase CRUD 작업
6648 단어 firebaseangular8angularfirecrud
이 튜토리얼에서는
@angular/fire를 사용하여 Firebase 실시간 데이터베이스에서 데이터를 생성, 읽기, 업데이트, 삭제하는 CRUD를 수행하는 간단한 Angular 8 애플리케이션을 만들 것입니다.관련 게시물:
기술
동영상
@angular/fire를 사용한 Firebase CRUD 작업
Firebase 프로젝트 설정 및 @angular/fire 설치
this post을 방문하여 단계별로 알아보세요.
객체에 대한 Firebase CRUD 작업
객체 바인딩 생성/검색
item: AngularFireObject;
// db: AngularFireDatabase
this.item = db.object('item');//또는
관찰 가능한 항목 = db.object('item').valueChanges();
만들다
// db: AngularFireDatabase
const itemRef = db.object('item');
// set() for destructive updates
itemRef.set({ name: 'grokonez'});
업데이트
// db: AngularFireDatabase
const itemRef = db.object('item');
itemRef.update({ url: 'grokonez.com'});
삭제
// db: AngularFireDatabase
const itemRef = db.object('item');
itemRef.remove();
개체 목록
목록 바인딩 만들기/검색
Observable를 스냅샷 메타데이터 없이 JSON 개체의 동기화된 배열로 반환합니다. 보기로 렌더링하는 것은 간단합니다.
items: Observable;
// db: AngularFireDatabase
this.items = db.list('items').valueChanges();
Observable를 메타데이터(기본 DatabaseReference 및 스냅샷 키)와 함께 AngularFireAction < DatabaseSnapshot >[]의 동기화된 배열로 반환합니다.
items: Observable;
// db: AngularFireDatabase
this.items = db.list('items').snapshotChanges();
만들다
// db: AngularFireDatabase
const itemsRef = db.list('items');
itemsRef.push({ site: 'grokonez.com' });
업데이트
// set(): destructive update
// delete everything currently in place, then save the new value
const itemsRef = db.list('items'); // db: AngularFireDatabase
itemsRef.set('key', { url: 'jsa.com' });//update(): 비파괴 업데이트
//지정된 값만 업데이트
const itemsRef = db.list('항목');//db: AngularFireDatabase
itemsRef.update('key', { url: 'javasampleapp.com' });
삭제
// db: AngularFireDatabase
const itemsRef = db.list('items');
itemsRef.remove('key');
// delete entire list
itemsRef.remove();
@angular/fire를 사용하는 Angular 8 예제의 Firebase CRUD 작업
프로젝트 개요
목표
다음을 수행할 수 있는
@angular/fire를 사용하여 Angular 8 Firebase 앱을 빌드합니다.
프로젝트 구조
environment.ts는 Firebase 프로젝트에 연결하기 위한 정보를 구성합니다.
customer.ts는
Customer 클래스 데이터 모델을 정의합니다. customer.service.ts는 Firebase와 상호작용하기 위해
CustomerService를 사용하는 @angular.fire를 정의합니다. create-customer 새 항목을 생성합니다. customer-details 항목 세부 정보 표시customers-list에는 항목 목록이 포함되어 있으며 이것은 customer-details의 상위 구성 요소입니다.app-routing.module.ts는 Angular 구성 요소를 라우팅하는 방법을 정의합니다. app.module.ts 필요한 환경 및 모듈을 선언하고 가져옵니다.단계별로
Firebase 프로젝트 설정 및 @angular/fire 설치
this post을 방문하여 단계별로 알아보세요.
환경 변수에 Firebase 구성 추가
/src/environments/environment.ts를 열고 팝업 창이 표시될 때 저장한 Firebase 구성을 추가합니다.
export const environment = {
...
firebase: {
apiKey: 'xxx',
authDomain: 'gkz-angular-firebase.firebaseapp.com',
databaseURL: 'https://gkz-angular-firebase.firebaseio.com',
projectId: 'gkz-angular-firebase',
storageBucket: 'gkz-angular-firebase.appspot.com',
messagingSenderId: '123'
}
};
서비스 및 구성 요소 만들기
아래 명령을 실행합니다.
ng g s customers/Customer ng g c customers/CustomerDetails ng g c customers/CustomersList ng g c customers/CreateCustomer https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-crud-operations-angular-fire-example
Reference
이 문제에 관하여(@angular/fire를 사용한 Angular 8 Firebase CRUD 작업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/loizenai/angular-8-firebase-crud-operations-with-angular-fire-lke텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
