Учебное пособие по Angular Firebase с примером с нуля

Учебное пособие по Firebase Angular с примерами с нуля является сегодня ведущей темой. Мы будем использовать Angular 5 в качестве внешнего интерфейса и Firebase в качестве внутренней службы базы данных. Если вы новичок в Angular Framework, ознакомьтесь с другими моими руководствами, такими как Пример учебного пособия по внедрению зависимостей в Angular, Руководство по службам Angular с примером с нуля и Пример руководства по Angular 5 CRUD с нуля . Мы создадим приложение для фондового рынка , в которое пользователь сможет вставлять и отображать цену акций из Firebase. Это просто скелет, демонстрирующий, как выполнять наиболее распространенные операции с Angular и Firebase. Firebase использовала базу данных NoSQL.

Если вы хотите узнать больше об Angular 7, ознакомьтесь с этим Angular 7 — The полный курс руководства.

Angular Firebase Tutorial

Как мы знаем, Angular использует TypeScript Язык, который является надмножеством Javascript. Он транслирует код TypeScript в код Javascript с помощью webpack. Мы начнем с установки Angular , настройки Firebase с помощью Angular и создания Angular Firebase Project .

Шаг 1. Установите Angular.

Вам необходимо настроить среду разработки, прежде чем вы сможете что-либо делать. Установите Node.js® и npm , если их еще нет на вашем компьютере. Затем установите Angular CLI глобально.

 npm install -g @ angular/cli 

Шаг 2. Создайте новый проект.

Введите следующую команду. Он создаст структуру папок, а также установит остальные зависимости.

 ng new ng5firebase 

Шаг 3. Установите модуль Angular Firebase.

Выполните следующую команду в терминале.

 npm install firebase angularfire2 -  -save 

Шаг 4: Добавьте конфигурацию Firebase в переменную окружения.

Откройте /src/environments/ environment.ts и добавьте свою конфигурацию Firebase:

//environment.tsexport const environment = {production  : false, firebase: {apiKey: '', authDomain: '', databaseURL: '', projectId: '  ', storageBucket:'  ', messagingSenderId:'  '}}; 

Шаг 5: Настройте @NgModule для AngularFireModule.

Замените следующий код в файле app.module.ts .

//app.module. tsimport {BrowserModule} из ‘@ angular/platform-browser’; импорт {NgModule} из ‘@ angular/core’; импорт {AppComponent} из ‘./app.component’; импорт {AngularFireModule} из ‘angularfire2’; импорт { AngularFireDatabaseModule} из ‘angularfire2/database’; импортировать {среду} из ‘../environment/environment’; @ NgModule ({импортирует: [BrowserModule, AngularFireModule.initializeApp (environment.firebase), AngularFireDatabaseModule], объявления: [AppComponent], bootstrap: [AppComponent]}) экспортный класс AppModule {}

Теперь мы успешно настроили Firebase с Angular application.

Шаг 6. Создайте два компонента приложения.

Создайте один каталог внутри src> > App , папка под названием

Перейдите в корень папки и в консоли и нажмите следующую команду.

 ng gc indexng gc create 

Мы создали t три компонента. Каждый компонент выполнит свою работу. Здесь мы устанавливаем принцип единой ответственности для каждого компонента.

Он создает отдельную папку внутри каталога src >> app . Нам нужно переместить все эти три папки в папку components .

Также нам нужно изменить app.module.ts файл, чтобы записать правильный путь к импортированным компонентам. По умолчанию это каталог приложения.

Шаг 7. Маршрутизация и навигация.

Angular Маршрутизатор позволяет переходить от одного представления к другому, когда пользователи выполняют задачи приложения.

Во-первых, нам нужно импортировать модули маршрутизации внутри нашего app.module.ts file.

Когда мы создали компоненты, путь по умолчанию другой, и теперь мы перешли к компонентам, поэтому теперь его путь другой. Итак, сначала нам нужно изменить этот путь в файле app.module.ts .

Хорошо, теперь нам нужно настроить маршруты. Итак, внутри каталога app создайте один файл с именем router.module.ts file.

Напишите в нем следующий код.

//router.module.tsimport {RouterModule} из '@ angular/router'; импортировать {CreateComponent} из './components/create/create.component';import {IndexComponent} из'. /components/index/index.component';export const appRoutes: Routes = [{path: 'create', component: CreateComponent}, {path: 'index', component: IndexComponent}]; 

Мы определили один массив, и внутри этого массива мы зарегистрировали различные маршруты с их компонентами. Наконец, мы экспортировали его.

Теперь импортируйте этот объект в app.module.ts и зарегистрируйте модуль.

 //app.module.tsimport {appRoutes} из './router.module';imports: [BrowserModule, AngularFireModule.initializeApp (environment.firebase), RouterModule.forRoot (appRoutes)], 

Шаг 8: Определите выход маршрутизатора.

В файле app.component.html напишите следующий код.

 

Добро пожаловать в {{title}} !!

Шаг 9. Добавьте Bootstrap CSS.

Загрузите bootstrap из исходных документов и вставьте папки CSS и JS в src >> assets .
В файл src >> index.html добавьте файл начальной загрузки css.

  

Кроме того, измените внешний вид app.component.html из-за начальной загрузки классы.

  

Шаг 10: Создайте форму в файле создания компонента.

Во-первых, наш create.component.ts fi файл выглядит так.

//create.component.tsimport {Component, OnInit} from '@ angular/core'; @ Component ({selector: 'app-create', templateUrl: '. /create.component.html ', styleUrls: [' ./create.component.css'ght})export class CreateComponent реализует OnInit {title = 'Share Market';  constructor () {} ngOnInit () {}} 

А затем нам нужно создать дизайн формы create.component.html .

 

Теперь перейдите к этому. http://localhost: 4200/создать. Выглядит это так.

Шаг 11. Создайте службы для отправки HTTP-запросов.

Введите следующую команду в своем терминале.

 ng g service share 

Теперь импортируйте файл службы в файл app.module.ts .

 import {ShareService} из './coin.service';providers: [ShareService] 

Теперь сначала мы вставим значения в базу данных Firebase. Включите ReactiveFormsModule в файле app.module.ts .

//app.module.tsimport {ReactiveFormsModule} из '@ angular/forms'  ; импорт: [BrowserModule, AngularFireModule.initializeApp (environment.firebase), RouterModule.forRoot (appRoutes), ReactiveFormsModule], 

Затем мы проверяем формы. Поэтому сначала напишите HTML-форму формы в create.component.html.

 
Требуется имя.
Требуется цена.

Также нам нужно написать логика проверки в файле create.component.ts .

//create.component.tsimport {Component, OnInit} from '@ angular/core';  импортировать {ShareService} из '../../share.service'; импортировать {FormGroup, FormBuilder, Validators} из '@ angular/forms'; @ Component ({selector: 'app-create', templateUrl: './ create.component.html ', styleUrls: [' ./create.component.css' visible})export class CreateComponent реализует OnInit {angForm: FormGroup; constructor (private shareservice: ShareService, private fb: FormBuilder) {this. createForm ();  } createForm () {this.angForm = this.fb.group ({имя: ['', Validators.required], price: ['', Validators.required]});  } addShare (имя, цена) {const dataObj = {имя: имя, цена: цена};  this.shareservice.addShare (dataObj);  } ngOnInit () {}} 

Запишите файл share.service.ts для вставки данных в базу данных.

 //share.service.tsimport {Injectable} из '@ angular/core'; импорт {AngularFireDatabase} из 'angularfire2/database'; @ Injectable () экспортный класс ShareService {private basePath = '/share';  общественные предметы: любые;  публичный предмет: любой;  конструктор (частная база данных: AngularFireDatabase) {} addShare (данные) {const obj = this.db.database.ref (this.basePath);  obj.push (данные);  console.log («Успех»);  }} 

Если все конфигурации вашей базы данных в порядке, вы можете вставить значения в Firebase. Вы можете увидеть на своей консоли. Если вы не знаете, как настроить Firebase, ознакомьтесь с моим руководством по React Firebase

. Шаг 12. Отобразите данные общих ресурсов в нашем приложении.

Теперь перейдите к файлу index.component.ts и замените весь файл следующим кодом.

//index.component.  tsimport {Component, OnInit} из '@ angular/core'; импортировать {Observable} из 'rxjs/Observable'; импортировать {ShareService} из '../../share.service'; @ Component ({selector: 'app  -index ', templateUrl:' ./index.component.html ', styleUrls: [' ./index.component.css'ght})export class IndexComponent реализует OnInit {общедоступные ресурсы: Observable ;  конструктор (частный сервис общего доступа: ShareService) {} ngOnInit () {this.shares = this.getShares ('/share');  } getShares (путь) {вернуть this.shareservice.getShares (путь);  }} 

Наш последний файл share.service.ts выглядит так. Я закодировал выборку данных из функции firebase.

//share.service.tsimport {Injectable} из '@ angular/core'; импорт {AngularFireDatabase} из 'angularfire2/database';  импортировать {Observable} из 'rxjs/Observable'; @ Injectable () экспортировать класс ShareService {private basePath = '/share';  конструктор (частная база данных: AngularFireDatabase) {} addShare (данные) {const obj = this.db.database.ref (this.basePath);  obj.push (данные);  console.log («Успех»);  } getShares (путь): Observable  {вернуть this.db.list (путь) .valueChanges ();  }} 

И, наконец, наш файл представления index.component.html выглядит так.

 
Название акции Цена акции
{{share .name}} {{поделиться. цена}}

Fork Me On Github

Вот и все, ребята. Учебное пособие по Angular Firebase с примерами с нуля закончено. Спасибо.

.

Оцените статью
nanomode.ru
Добавить комментарий