

В первой части этого туториала мы создали среду Firebase, заполнили базу данных импортированным JSON и создали необходимые сервисы и страницы для приложения. В этой части мы создадим CRUD-приложение для наших сервисов и страниц, чтобы управлять базой данных и сервисами Storage.
Изображение – это всё
Так как мы собираемся постоянно использовать сервис Firebase Storage, стоит начать с сервиса Image. Откроем файл moveez/src/providers/image.ts и сделаем следующие изменения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Injectable <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Http <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'@angular/http'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token string">'rxjs/add/operator/map'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Camera<span class="token punctuation">,</span> CameraOptions <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'@ionic-native/camera'</span><span class="token punctuation">;</span> @<span class="token function">Injectable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword keyword-export">export</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">ImageProvider</span> <span class="token punctuation">{</span> <span class="token keyword keyword-public">public</span> cameraImage <span class="token punctuation">:</span> String <span class="token keyword keyword-constructor">constructor</span><span class="token punctuation">(</span><span class="token keyword keyword-public">public</span> http <span class="token punctuation">:</span> Http<span class="token punctuation">,</span> <span class="token keyword keyword-private">private</span> _CAMERA <span class="token punctuation">:</span> Camera<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">selectImage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> Promise<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>resolve <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> cameraOptions <span class="token punctuation">:</span> CameraOptions <span class="token operator">=</span> <span class="token punctuation">{</span> sourceType <span class="token punctuation">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>_CAMERA<span class="token punctuation">.</span>PictureSourceType<span class="token punctuation">.</span>PHOTOLIBRARY<span class="token punctuation">,</span> destinationType <span class="token punctuation">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>_CAMERA<span class="token punctuation">.</span>DestinationType<span class="token punctuation">.</span>DATA_URL<span class="token punctuation">,</span> quality <span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> targetWidth <span class="token punctuation">:</span> <span class="token number">320</span><span class="token punctuation">,</span> targetHeight <span class="token punctuation">:</span> <span class="token number">240</span><span class="token punctuation">,</span> encodingType <span class="token punctuation">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>_CAMERA<span class="token punctuation">.</span>EncodingType<span class="token punctuation">.</span>JPEG<span class="token punctuation">,</span> correctOrientation <span class="token punctuation">:</span> <span class="token keyword keyword-true">true</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>_CAMERA<span class="token punctuation">.</span><span class="token function">getPicture</span><span class="token punctuation">(</span>cameraOptions<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>cameraImage <span class="token operator">=</span> <span class="token string">"data:image/jpeg;base64,"</span> <span class="token operator">+</span> data<span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>cameraImage<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Это довольно простой сервис, который использует плагин Apache Cordova Camera, который мы импортируем таким образом:
1 |
import { Camera, CameraOptions } from '@ionic-native/camera'; |
Затем мы создаем простой метод selectImage, который использует Promise, чтобы вернуть выбранное из галереи изображение в виде URI base64.
Вы можете видеть, что формат изображения включает предустановленную длину и ширину, а также качество изображения. Эти значения могут показаться немного строгими, и мы всегда можем изменить их, добавив альтернативные значения в скобках метода selectImage. Хотя для обучения мы пока не будем этого делать.
Давайте перейдем к предварительной загрузке элементов нашего приложения.
Предварительная загрузка
Независимо от того, насколько оптимизирован код приложения, мы не можем гарантировать время завершения запроса к сети. В таком случае можно проинформировать пользователя о том, что действие производится и пока не завершено.
Это можно сделать при помощи GIF или прелоадеров. Для этого мы используем Ionic Loading Component. Откроем файл moveez/src/providers/preloader.ts и внесем следующие изменения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Injectable <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> LoadingController <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'ionic-angular'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Http <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'@angular/http'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token string">'rxjs/add/operator/map'</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* Generated class for the Preloader provider. See https://angular.io/docs/ts/latest/guide/dependency-injection.html for more info on providers and Angular DI. */</span> @<span class="token function">Injectable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword keyword-export">export</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">PreloaderProvider</span> <span class="token punctuation">{</span> <span class="token keyword keyword-private">private</span> loading <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span><span class="token punctuation">;</span> <span class="token keyword keyword-constructor">constructor</span><span class="token punctuation">(</span> <span class="token keyword keyword-public">public</span> http <span class="token punctuation">:</span> Http<span class="token punctuation">,</span> <span class="token keyword keyword-public">public</span> loadingCtrl <span class="token punctuation">:</span> LoadingController<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">displayPreloader</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword keyword-void">void</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>loadingCtrl<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> content<span class="token punctuation">:</span> <span class="token string">'Please wait...'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>loading<span class="token punctuation">.</span><span class="token function">present</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">hidePreloader</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword keyword-void">void</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>loading<span class="token punctuation">.</span><span class="token function">dismiss</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Всё довольно просто: всего один метод для того, чтобы показать прелоадер, и другой метод для того, чтобы спрятать активированный прелоадер. Благодаря встроенному в Ionic Loading Component мы просто применяем методы этого класса, а затем оборачиваем их нашими кастомными методами.
Управление данными
Наш финальный сервис – класс database.ts – поможет управлять всеми взаимодействиями в базе данных и загрузками в Firebase Storage (вообще нам следовало бы встроить его в собственный сервис).
Откроем файл moveez/src/providers/database.ts и внесем следующие изменения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Injectable <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Http <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'@angular/http'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token string">'rxjs/add/operator/map'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Observable <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">"rxjs/Observable"</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token operator">*</span> as firebase <span class="token keyword keyword-from">from</span> <span class="token string">'firebase'</span><span class="token punctuation">;</span> @<span class="token function">Injectable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword keyword-export">export</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">DatabaseProvider</span> <span class="token punctuation">{</span> <span class="token keyword keyword-constructor">constructor</span><span class="token punctuation">(</span><span class="token keyword keyword-public">public</span> http<span class="token punctuation">:</span> Http<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">renderMovies</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> Observable<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Observable</span><span class="token punctuation">(</span>observer <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> films <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> firebase<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'films'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">orderByKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">once</span><span class="token punctuation">(</span><span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>items <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> items<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> films<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id <span class="token punctuation">:</span> item<span class="token punctuation">.</span>key<span class="token punctuation">,</span> actors <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>actors<span class="token punctuation">,</span> date <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>date<span class="token punctuation">,</span> duration <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>duration<span class="token punctuation">,</span> genres <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>genres<span class="token punctuation">,</span> image <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>image<span class="token punctuation">,</span> rating <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>rating<span class="token punctuation">,</span> summary <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>summary<span class="token punctuation">,</span> title <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>title <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> observer<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>films<span class="token punctuation">)</span><span class="token punctuation">;</span> observer<span class="token punctuation">.</span><span class="token function">complete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Observer error: "</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">dir</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> observer<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">deleteMovie</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token punctuation">:</span> Promise<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> ref <span class="token operator">=</span> firebase<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'films'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> ref<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token keyword keyword-true">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">addToDatabase</span><span class="token punctuation">(</span>movieObj<span class="token punctuation">)</span> <span class="token punctuation">:</span> Promise<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> addRef <span class="token operator">=</span> firebase<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'films'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> addRef<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>movieObj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token keyword keyword-true">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">updateDatabase</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> moviesObj<span class="token punctuation">)</span> <span class="token punctuation">:</span> Promise<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-var">var</span> updateRef <span class="token operator">=</span> firebase<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'films'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> updateRef<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>moviesObj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token keyword keyword-true">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">uploadImage</span><span class="token punctuation">(</span>imageString<span class="token punctuation">)</span> <span class="token punctuation">:</span> Promise<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> image <span class="token punctuation">:</span> <span class="token keyword keyword-string">string</span> <span class="token operator">=</span> <span class="token string">'movie-'</span> <span class="token operator">+</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.jpg'</span><span class="token punctuation">,</span> storageRef <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span><span class="token punctuation">,</span> parseUpload <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span><span class="token punctuation">;</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> storageRef <span class="token operator">=</span> firebase<span class="token punctuation">.</span><span class="token function">storage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'posters/'</span> <span class="token operator">+</span> image<span class="token punctuation">)</span><span class="token punctuation">;</span> parseUpload <span class="token operator">=</span> storageRef<span class="token punctuation">.</span><span class="token function">putString</span><span class="token punctuation">(</span>imageString<span class="token punctuation">,</span> <span class="token string">'data_url'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> parseUpload<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'state_changed'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>_snapshot<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">// We could log the progress here IF necessary</span> <span class="token comment" spellcheck="true">// console.log('snapshot progess ' + _snapshot);</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>_err<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token function">reject</span><span class="token punctuation">(</span>_err<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token function">resolve</span><span class="token punctuation">(</span>parseUpload<span class="token punctuation">.</span>snapshot<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Здесь мы используем пакет Firebase Node и Observables (они импортируются в начале скрипта) для взаимодействия с базой данных Firebase и сервисами Storage.
Сервис Database содержит следующие методы:
- renderMovies
- deleteMovie
- addToDatabase
- updateDatabase
- uploadImage
Названия должны быть понятными и отображать цель каждого метода, но давайте исследуем каждый из них по отдельности.
Метод renderMovies использует Observable, чтобы возвращать данные, полученные из базы films, при помощи Firebase Web API. Каждая возвращаемая запись затем повторяется с использованием цикла forEach и передается как объект в массив, который после его завершения передается в следующий метод Observable (который позволяет «наблюдать» массив по нашему сценарию и впоследствии подписывается на него):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<span class="token function">renderMovies</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> Observable<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Observable</span><span class="token punctuation">(</span>observer <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> films <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> firebase<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'films'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">orderByKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">once</span><span class="token punctuation">(</span><span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>items <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> items<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> films<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id <span class="token punctuation">:</span> item<span class="token punctuation">.</span>key<span class="token punctuation">,</span> actors <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>actors<span class="token punctuation">,</span> date <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>date<span class="token punctuation">,</span> duration <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>duration<span class="token punctuation">,</span> genres <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>genres<span class="token punctuation">,</span> image <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>image<span class="token punctuation">,</span> rating <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>rating<span class="token punctuation">,</span> summary <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>summary<span class="token punctuation">,</span> title <span class="token punctuation">:</span> item<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>title <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> observer<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>films<span class="token punctuation">)</span><span class="token punctuation">;</span> observer<span class="token punctuation">.</span><span class="token function">complete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Observer error: "</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">dir</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> observer<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Метод deleteMovie находит ID конкретного фильма в базе при помощи Firebase Web API и затем удаляет этот фильм. Результат этой операции возвращается при помощи Promise:
1 2 3 4 5 6 7 8 9 |
<span class="token function">deleteMovie</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token punctuation">:</span> Promise<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> ref <span class="token operator">=</span> firebase<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'films'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> ref<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token keyword keyword-true">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Метод addToDatabase принимает объект JavaScript со значениями, которые соотносятся с данными, которые мы хотим добавить в базу фильмов. Они затем вносятся в базу данных, используя метод push, а его результат возвращается в скрипт при помощи Promise.
1 2 3 4 5 6 7 8 9 |
<span class="token function">addToDatabase</span><span class="token punctuation">(</span>movieObj<span class="token punctuation">)</span> <span class="token punctuation">:</span> Promise<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> addRef <span class="token operator">=</span> firebase<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'films'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> addRef<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>movieObj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token keyword keyword-true">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Метод updateDatabase принимает два параметра:
- id – ID фильма, который нужно обновить
- moviesObj – значение данных, которое соответствует записи, которую нужно обновить
Метод child Firebase Web API используется для поиска соответствующей записи в базе данных фильмов, с помощью которой метод обновления используется для публикации измененных данных для этой конкретной записи. Как и ранее, для возврата результата операции используется Promise:
1 2 3 4 5 6 7 8 9 |
<span class="token function">updateDatabase</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> moviesObj<span class="token punctuation">)</span> <span class="token punctuation">:</span> Promise<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-var">var</span> updateRef <span class="token operator">=</span> firebase<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'films'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">child</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> updateRef<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span>moviesObj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token keyword keyword-true">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Метод uploadImage принимает один параметр – изображение в форме Data URL base64 (который генерируется методом selectImage сервиса Image).
Мы создаем название нашего изображения, используя комбинацию префикса фильма и метки времени. Это помогат гарантировать, что каждая запись уникальна, а существующие записи не переписываются. Затем мы загружаем изображение в сервис Firebase Storage, используя метод putString, который затем генерирует snapshot-объект, который мы возвращаем при помощи Promise:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<span class="token function">uploadImage</span><span class="token punctuation">(</span>imageString<span class="token punctuation">)</span> <span class="token punctuation">:</span> Promise<span class="token operator"><</span><span class="token keyword keyword-any">any</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> image <span class="token punctuation">:</span> <span class="token keyword keyword-string">string</span> <span class="token operator">=</span> <span class="token string">'movie-'</span> <span class="token operator">+</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.jpg'</span><span class="token punctuation">,</span> storageRef <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span><span class="token punctuation">,</span> parseUpload <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span><span class="token punctuation">;</span> <span class="token keyword keyword-return">return</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> storageRef <span class="token operator">=</span> firebase<span class="token punctuation">.</span><span class="token function">storage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">'posters/'</span> <span class="token operator">+</span> image<span class="token punctuation">)</span><span class="token punctuation">;</span> parseUpload <span class="token operator">=</span> storageRef<span class="token punctuation">.</span><span class="token function">putString</span><span class="token punctuation">(</span>imageString<span class="token punctuation">,</span> <span class="token string">'data_url'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> parseUpload<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'state_changed'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>_snapshot<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">// We could log the progress here IF necessary</span> <span class="token comment" spellcheck="true">//console.log('snapshot progess ' + _snapshot);</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>_err<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token function">reject</span><span class="token punctuation">(</span>_err<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token function">resolve</span><span class="token punctuation">(</span>parseUpload<span class="token punctuation">.</span>snapshot<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Мы завершили программирование наших сервисов, поэтому давайте перейдем к компонентам приложения.
Возвращение домой
Наш компонент HomePage будет отображать фильмы, извлеченные из Firebase, и изображения для этих фильмов в шаблоне. Каждая запись о фильме будет отображаться в компоненте <ion-card>, который будет также содержать две кнопки с опциями редактирования фильма и удаления фильма.
Давайте начнем с изменения файла moveez/src/pages/home/home.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> NavController<span class="token punctuation">,</span> Platform<span class="token punctuation">,</span> ModalController <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'ionic-angular'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> ImageProvider <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'../../providers/image/image'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> PreloaderProvider <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'../../providers/preloader/preloader'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> DatabaseProvider <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'../../providers/database/database'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token operator">*</span> as firebase <span class="token keyword keyword-from">from</span> <span class="token string">'firebase'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> Http <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">'@angular/http'</span><span class="token punctuation">;</span> <span class="token keyword keyword-import">import</span> <span class="token string">'rxjs/Rx'</span><span class="token punctuation">;</span> @<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span> selector<span class="token punctuation">:</span> <span class="token string">'page-home'</span><span class="token punctuation">,</span> templateUrl<span class="token punctuation">:</span> <span class="token string">'home.html'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword keyword-export">export</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">HomePage</span> <span class="token punctuation">{</span> <span class="token keyword keyword-private">private</span> auth <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span><span class="token punctuation">;</span> <span class="token keyword keyword-public">public</span> movies <span class="token punctuation">:</span> <span class="token keyword keyword-any">any</span><span class="token punctuation">;</span> <span class="token keyword keyword-private">private</span> email <span class="token punctuation">:</span> <span class="token keyword keyword-string">string</span> <span class="token operator">=</span> <span class="token string">'YOUR-EMAIL-ADDRESS'</span><span class="token punctuation">;</span> <span class="token keyword keyword-private">private</span> pass <span class="token punctuation">:</span> <span class="token keyword keyword-string">string</span> <span class="token operator">=</span> <span class="token string">'PASSWORD-FOR-YOUR-EMAIL-ADDRESS'</span><span class="token punctuation">;</span> <span class="token keyword keyword-constructor">constructor</span><span class="token punctuation">(</span> <span class="token keyword keyword-public">public</span> navCtrl <span class="token punctuation">:</span> NavController<span class="token punctuation">,</span> <span class="token keyword keyword-private">private</span> platform <span class="token punctuation">:</span> Platform<span class="token punctuation">,</span> <span class="token keyword keyword-private">private</span> modalCtrl <span class="token punctuation">:</span> ModalController<span class="token punctuation">,</span> <span class="token keyword keyword-private">private</span> _IMG <span class="token punctuation">:</span> ImageProvider<span class="token punctuation">,</span> <span class="token keyword keyword-private">private</span> _LOADER <span class="token punctuation">:</span> PreloaderProvider<span class="token punctuation">,</span> <span class="token keyword keyword-private">private</span> _DB <span class="token punctuation">:</span> DatabaseProvider<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">ionViewDidEnter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>_LOADER<span class="token punctuation">.</span><span class="token function">displayPreloader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>platform<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> firebase<span class="token punctuation">.</span><span class="token function">auth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">signInWithEmailAndPassword</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>email<span class="token punctuation">,</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>pass<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>credentials<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">loadAndParseMovies</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token keyword keyword-catch">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err <span class="token punctuation">:</span> Error<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">loadAndParseMovies</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>movies <span class="token operator">=</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>_DB<span class="token punctuation">.</span><span class="token function">renderMovies</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>_LOADER<span class="token punctuation">.</span><span class="token function">hidePreloader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">addRecord</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> modal <span class="token operator">=</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>modalCtrl<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token string">'Modals'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> modal<span class="token punctuation">.</span><span class="token function">onDidDismiss</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-if">if</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">loadAndParseMovies</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> modal<span class="token punctuation">.</span><span class="token function">present</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">editMovie</span><span class="token punctuation">(</span>movie<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-let">let</span> params <span class="token operator">=</span> <span class="token punctuation">{</span> movie<span class="token punctuation">:</span> movie<span class="token punctuation">,</span> isEdited<span class="token punctuation">:</span> <span class="token keyword keyword-true">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> modal <span class="token operator">=</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>modalCtrl<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token string">'Modals'</span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span> modal<span class="token punctuation">.</span><span class="token function">onDidDismiss</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-if">if</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">loadAndParseMovies</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> modal<span class="token punctuation">.</span><span class="token function">present</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">deleteMovie</span><span class="token punctuation">(</span>movie<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>_DB<span class="token punctuation">.</span><span class="token function">deleteMovie</span><span class="token punctuation">(</span>movie<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token function">loadAndParseMovies</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
В методе ionViewDidEnter мы используем аутентификацию Firebase, чтобы использовать email-адрес и пароль для входа в сервис Firebase. Мы могли бы добавить компонент формы входа в систему, но пока предустановленного email и пароля будет достаточно, просто введите те же адрес и пароль, которые вы использовали для аутентификации в Firebase.
После успешной авторизации вызывается метод loadAndParseMovies, который применяет сервис renderMovies, чтобы получить записи о фильмах из Firebase. Эти методы должны быть достаточно понятны, поэтому перейдем к HTML, необходимому для файла moveez/src/pages/home/home.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/w/index.php?fulltext&search=ion-header" target="_blank" rel="noopener noreferrer">ion-header</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/w/index.php?fulltext&search=ion-navbar" target="_blank" rel="noopener noreferrer">ion-navbar</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/w/index.php?fulltext&search=ion-title" target="_blank" rel="noopener noreferrer">ion-title</a><span class="token punctuation">></span></span> Moveez <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/w/index.php?fulltext&search=ion-title" target="_blank" rel="noopener noreferrer">ion-title</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/w/index.php?fulltext&search=ion-buttons" target="_blank" rel="noopener noreferrer">ion-buttons</a> <a class="token attr-name" href="http://docs.webplatform.org/w/index.php?fulltext&search=end" target="_blank" rel="noopener noreferrer">end</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/button" target="_blank" rel="noopener noreferrer">button</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/ion-button" target="_blank" rel="noopener noreferrer">ion-button</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/icon-only" target="_blank" rel="noopener noreferrer">icon-only</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/(click)" target="_blank" rel="noopener noreferrer">(click)</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>addRecord()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-icon" target="_blank" rel="noopener noreferrer">ion-icon</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/name" target="_blank" rel="noopener noreferrer">name</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>add<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-icon" target="_blank" rel="noopener noreferrer">ion-icon</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/button" target="_blank" rel="noopener noreferrer">button</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-buttons" target="_blank" rel="noopener noreferrer">ion-buttons</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-navbar" target="_blank" rel="noopener noreferrer">ion-navbar</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-header" target="_blank" rel="noopener noreferrer">ion-header</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-content" target="_blank" rel="noopener noreferrer">ion-content</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/padding" target="_blank" rel="noopener noreferrer">padding</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-list" target="_blank" rel="noopener noreferrer">ion-list</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-card" target="_blank" rel="noopener noreferrer">ion-card</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/class" target="_blank" rel="noopener noreferrer">class</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>movie<span class="token punctuation">"</span></span> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/text-wrap" target="_blank" rel="noopener noreferrer">text-wrap</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/*ngFor" target="_blank" rel="noopener noreferrer">*ngFor</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>let movie of movies | async<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-item" target="_blank" rel="noopener noreferrer">ion-item</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/div" target="_blank" rel="noopener noreferrer">div</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/*ngIf" target="_blank" rel="noopener noreferrer">*ngIf</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>movie.image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/img" target="_blank" rel="noopener noreferrer">img</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/[src]" target="_blank" rel="noopener noreferrer">[src]</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>movie.image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/div" target="_blank" rel="noopener noreferrer">div</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/h2" target="_blank" rel="noopener noreferrer">h2</a><span class="token punctuation">></span></span>{{ movie.title }}<span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/h2" target="_blank" rel="noopener noreferrer">h2</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/small" target="_blank" rel="noopener noreferrer">small</a><span class="token punctuation">></span></span>{{ movie.date }} ({{ movie.duration }})<span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/small" target="_blank" rel="noopener noreferrer">small</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/p" target="_blank" rel="noopener noreferrer">p</a><span class="token punctuation">></span></span>{{ movie.summary }}<span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/p" target="_blank" rel="noopener noreferrer">p</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/section" target="_blank" rel="noopener noreferrer">section</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/class" target="_blank" rel="noopener noreferrer">class</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>multiples<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/h3" target="_blank" rel="noopener noreferrer">h3</a><span class="token punctuation">></span></span>Actors/Actresses<span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/h3" target="_blank" rel="noopener noreferrer">h3</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-chip" target="_blank" rel="noopener noreferrer">ion-chip</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/*ngFor" target="_blank" rel="noopener noreferrer">*ngFor</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>let actor of movie.actors<span class="token punctuation">"</span></span> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/padding-left" target="_blank" rel="noopener noreferrer">padding-left</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/padding-right" target="_blank" rel="noopener noreferrer">padding-right</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/margin-right" target="_blank" rel="noopener noreferrer">margin-right</a><span class="token punctuation">></span></span>{{ actor.name }}<span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-chip" target="_blank" rel="noopener noreferrer">ion-chip</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/section" target="_blank" rel="noopener noreferrer">section</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/section" target="_blank" rel="noopener noreferrer">section</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/class" target="_blank" rel="noopener noreferrer">class</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>multiples<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/h3" target="_blank" rel="noopener noreferrer">h3</a><span class="token punctuation">></span></span>Genres<span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/h3" target="_blank" rel="noopener noreferrer">h3</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-chip" target="_blank" rel="noopener noreferrer">ion-chip</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/*ngFor" target="_blank" rel="noopener noreferrer">*ngFor</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>let genre of movie.genres<span class="token punctuation">"</span></span> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/padding-left" target="_blank" rel="noopener noreferrer">padding-left</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/padding-right" target="_blank" rel="noopener noreferrer">padding-right</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/margin-right" target="_blank" rel="noopener noreferrer">margin-right</a><span class="token punctuation">></span></span>{{ genre.name }}<span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-chip" target="_blank" rel="noopener noreferrer">ion-chip</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/section" target="_blank" rel="noopener noreferrer">section</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-item" target="_blank" rel="noopener noreferrer">ion-item</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/div" target="_blank" rel="noopener noreferrer">div</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/class" target="_blank" rel="noopener noreferrer">class</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>manage-record<span class="token punctuation">"</span></span> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/padding" target="_blank" rel="noopener noreferrer">padding</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/button" target="_blank" rel="noopener noreferrer">button</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/ion-button" target="_blank" rel="noopener noreferrer">ion-button</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/text-center" target="_blank" rel="noopener noreferrer">text-center</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/color" target="_blank" rel="noopener noreferrer">color</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/(click)" target="_blank" rel="noopener noreferrer">(click)</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>editMovie(movie)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/button" target="_blank" rel="noopener noreferrer">button</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/button" target="_blank" rel="noopener noreferrer">button</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/ion-button" target="_blank" rel="noopener noreferrer">ion-button</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/text-center" target="_blank" rel="noopener noreferrer">text-center</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/color" target="_blank" rel="noopener noreferrer">color</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/(click)" target="_blank" rel="noopener noreferrer">(click)</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>deleteMovie(movie)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/button" target="_blank" rel="noopener noreferrer">button</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/div" target="_blank" rel="noopener noreferrer">div</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-card" target="_blank" rel="noopener noreferrer">ion-card</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-list" target="_blank" rel="noopener noreferrer">ion-list</a><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-content" target="_blank" rel="noopener noreferrer">ion-content</a><span class="token punctuation">></span></span> |
Стоит обратить внимание, что использование async pipe в директиве ngFor, которая позволяет асинхронным данным, возвращенным Observable или Promise, обновлять интерфейс:
1 2 3 4 |
<span class="token tag"><span class="token punctuation"><</span><a class="token tag-id" href="http://docs.webplatform.org/wiki/html/elements/ion-card" target="_blank" rel="noopener noreferrer">ion-card</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/class" target="_blank" rel="noopener noreferrer">class</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>movie<span class="token punctuation">"</span></span> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/text-wrap" target="_blank" rel="noopener noreferrer">text-wrap</a> <a class="token attr-name" href="http://docs.webplatform.org/wiki/html/attributes/*ngFor" target="_blank" rel="noopener noreferrer">*ngFor</a><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>let movie of movies | async<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
Modal
Финальный компонент, который мы исследуем – это Modal, который обрабатывает отображение и логику формы, в которой происходит добавление или редактирование записи фильма для базы данных Firebase. Начнем со скрипта moveez/src/pages/modals/modals.ts: