Tutorial Angular 6: Fitur Baru dengan Kekuatan Baru

Sudut 6 keluar! Perubahan paling menonjol ada pada CLI-nya dan bagaimana layanan disuntikkan. Jika Anda ingin menulis aplikasi Angular 6 pertama Anda—atau aplikasi Angular/Firebase—dalam tutorial ini, kita akan membahas langkah-langkah dasar penyiapan awal dan membuat aplikasi buku harian kecil.

Sudut 6: Dasar-dasar

Jika Anda belum pernah menggunakan Angular sebelumnya, izinkan saya memberi Anda deskripsi singkat tentangnya dan cara kerjanya.

Angular adalah kerangka kerja JavaScript yang dirancang untuk mendukung pembangunan aplikasi satu halaman (SPA) untuk desktop dan seluler.

Kerangka kerja ini mencakup rangkaian lengkap arahan dan modul yang memungkinkan Anda untuk dengan mudah menerapkan beberapa skenario paling umum untuk aplikasi web, seperti navigasi, otorisasi, formulir, dan pelaporan. Itu juga dilengkapi dengan semua paket yang diperlukan untuk menambahkan tes menggunakan kerangka Jasmine dan menjalankannya menggunakan pelari tes Karma atau Busur Derajat.

Arsitektur sudut didasarkan pada komponen, templat, arahan, dan layanan. Ini menyediakan mekanisme injeksi ketergantungan bawaan untuk layanan Anda, serta pengikatan data dua arah untuk menghubungkan tampilan Anda dengan kode komponen Anda.

Angular menggunakan TypeScript, superset JS yang diketik, dan akan membuat beberapa hal lebih mudah, terutama jika Anda berasal dari latar belakang bahasa yang diketik.

Sudut 6: Fitur Baru

Ringkasan singkat fitur baru di Angular 6:

• Kebijakan sinkronisasi nomor versi utama untuk paket kerangka kerja ( @angular/core , @angular/common , @angular/compiler , dll.), CLI, Material, dan CDK. Ini akan membantu membuat kompatibilitas silang lebih jelas ke depan: Anda dapat mengetahui dari sekilas nomor versi apakah paket kunci kompatibel satu sama lain.
• Perintah ng CLI baru:
  • ng update untuk memutakhirkan versi paket dengan cerdas, memperbarui versi dependensi dan menjaganya tetap sinkron. (Misalnya saat menjalankan ng update @angular/core semua kerangka kerja akan diperbarui serta RxJS.) Ini juga akan menjalankan skema jika paket menyertakannya. (Jika versi yang lebih baru menyertakan perubahan yang melanggar yang memerlukan perubahan kode, skema akan memperbarui kode Anda untuk Anda.)
  • ng add untuk menambahkan paket baru (dan jalankan skrip, jika berlaku)
• Layanan sekarang merujuk modul yang akan menyediakannya, alih-alih layanan referensi modul, seperti dulu.

Sebagai contoh dari apa arti perubahan terakhir ini, di mana kode Anda dulu terlihat seperti:

 @NgModule({ // ... providers: [MyService] })

… dengan perubahan khusus ini di Angular 6, itu akan terlihat seperti:

 @Injectabe({ providedIn: 'root', })

Ini disebut penyedia tree-shakeable dan memungkinkan kompiler untuk menghapus layanan yang tidak direferensikan yang menghasilkan bundel ukuran yang lebih kecil.

Sudut 6 CLI

Antarmuka baris perintah ng adalah bagian yang sangat penting dari Angular dan memungkinkan Anda bergerak lebih cepat saat mengkodekan aplikasi Anda.

Dengan CLI Anda dapat membuat perancah pengaturan aplikasi awal Anda dengan sangat mudah, menghasilkan komponen baru, arahan, dll, dan membangun dan menjalankan aplikasi Anda di lingkungan lokal Anda.

Membuat Proyek Angular 6

Oke, cukup bicara. Mari kita mengotori tangan kita dan mulai membuat kode.

Untuk memulai, Anda perlu menginstal Node.js dan npm di mesin Anda.

Sekarang, mari kita lanjutkan dan instal CLI:

 npm install -g @angular/cli

Ini akan menginstal perintah ng CLI secara global, karena sakelar -g .

Setelah kita memilikinya, kita bisa mendapatkan perancah awal untuk aplikasi kita dengan ng new :

 ng new my-memories --style=scss

Ini akan membuat folder my-memories , membuat semua file yang diperlukan untuk menyiapkan pengaturan awal Anda, dan menginstal semua paket yang diperlukan. --style=scss bersifat opsional dan akan menyiapkan kompiler untuk mengompilasi file SCSS ke CSS, yang akan kita perlukan nanti.

Setelah penginstalan selesai, Anda dapat cd my-memories dan menjalankan ng serve . Ini akan memulai proses pembuatan dan server web lokal yang melayani aplikasi Anda di http://localhost:4200 .

Apa yang terjadi di balik layar adalah bahwa CLI mentranspilasikan semua .ts (file TypeScript) ke vanilla JS, mengumpulkan semua dependensi yang diperlukan dari folder paket node_modules , dan menampilkan hasilnya dalam satu set file yang dilayani melalui server web lokal yang berjalan pada port 4200.

File Proyek

Jika Anda tidak terbiasa dengan struktur folder proyek Angular, hal terpenting yang perlu Anda ketahui adalah bahwa semua kode yang terkait dengan aplikasi masuk ke dalam folder src . Anda biasanya akan membuat semua modul dan arahan di folder itu mengikuti arsitektur aplikasi Anda (mis. pengguna, keranjang, produk.)

Pengaturan awal

Oke, sejauh ini kita memiliki pengaturan awal untuk aplikasi kita. Mari kita mulai membuat beberapa perubahan.

Sebelum kita mulai, mari kita menggali sedikit ke dalam folder src . Halaman awal adalah index.html :

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyMemories</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>

Di sini kita melihat beberapa HTML dasar dan <app-root> . Ini adalah komponen Angular, dan di mana Angular 6 menyisipkan kode komponen kita.

Kita akan menemukan file app/app.component.ts , yang memiliki app-root pemilih untuk mencocokkan dengan apa yang ada di file index.html .

Komponen adalah kelas TypeScript yang didekorasi, dan dalam hal ini, berisi properti title . Dekorator @Component memberi tahu Angular untuk memasukkan perilaku komponen di kelas. Selain pemilih, ini menentukan file HTML mana yang akan dirender dan stylesheet mana yang akan digunakan.

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'app'; }

Jika kita melihat app.component.html kita akan melihat ikatan interpolasi {{title}} . Di sinilah semua ikatan ajaib terjadi, dan Angular akan merender nilai properti judul kelas dan memperbaruinya setiap kali berubah.

 <!--The content below is only a placeholder and can be replaced.--> <div> <h1> Welcome to {{ title }}! </h1> <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> </div> <h2>Here are some links to help you start: </h2> <ul> <li> <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> </li> <li> <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> </li> <li> <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> </li> </ul>

Ayo maju dan perbarui title dari kelas menjadi 'My Memories!' .

 ... export class AppComponent { title = 'My Memories!'; } ...

Kami akan melihat kompiler memproses perubahan kami dan browser menyegarkan untuk menampilkan judul kami yang diperbarui.

Ini berarti ng serve Angular 6 mengawasi perubahan file kami dan merender setiap kali perubahan dimasukkan ke file apa pun.

Untuk membuat pengkodean lebih ramah dan menghindari penyegaran halaman penuh setiap kali kami membuat perubahan, kami dapat memanfaatkan Webpack Hot Module Replacement (HMR), yang hanya memperbarui potongan JS/CSS yang diubah alih-alih menghasilkan penyegaran penuh ke tunjukkan perubahan Anda.

Mengonfigurasi HMR

Pertama, kita perlu mengatur lingkungan.

Buat file src/environments/environment.hmr.ts dengan isi sebagai berikut:

 export const environment = { production: false, hmr: true };

Perbarui src/environments/environment.prod.ts dan tambahkan hmr: false flag ke lingkungan:

 export const environment = { production: true, hmr: false };

Kemudian perbarui src/environments/environment.ts dan tambahkan hmr: false flag ke lingkungan di sana juga:

 export const environment = { production: false, hmr: false };

Selanjutnya di file angular.json , perbarui bagian ini:

 "projects": { "my-memories": { // ... "architect": { "build": { // ... "configurations": { "hmr":{ "fileReplacements":[ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.hmr.ts" } ] }, // ...

Dan di bawah projects → my-memories → architect → serve → configurations :

 "projects": { "my-memories": { "architect": { // ... "serve": { // ... "configurations": { "hmr": { "browserTarget": "my-memories:build:hmr" }, // ...

Sekarang perbarui tsconfig.app.json untuk memasukkan types yang diperlukan (baik, ketik) dengan menambahkan ini di bawah compilerOptions :

 "compilerOptions": { // ... "types": [ "node" ]

Selanjutnya, kita akan menginstal modul @angularclass/hmr sebagai dependensi pengembangan:

 npm install --save-dev @angularclass/hmr

Kemudian konfigurasikan dengan membuat file src/hmr.ts :

 import { NgModuleRef, ApplicationRef } from '@angular/core'; import { createNewHosts } from '@angularclass/hmr'; export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => { let ngModule: NgModuleRef<any>; module.hot.accept(); bootstrap().then(mod => ngModule = mod); module.hot.dispose(() => { const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef); const elements = appRef.components.map(c => c.location.nativeElement); const makeVisible = createNewHosts(elements); ngModule.destroy(); makeVisible(); }); };

Selanjutnya, perbarui src/main.ts untuk menggunakan fungsi di atas:

 import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; import { hmrBootstrap } from './hmr'; if (environment.production) { enableProdMode(); } const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule); if (environment.hmr) { if (module[ 'hot' ]) { hmrBootstrap(module, bootstrap); } else { console.error('HMR is not enabled for webpack-dev-server!'); console.log('Are you using the --hmr flag for ng serve?'); } } else { bootstrap().catch(err => console.log(err)); }

Apa yang kita lakukan di sini adalah membuat bootstrap memanggil fungsi anonim, dan selanjutnya menanyakan apakah flag environment.hmr benar. Jika ya, kami memanggil fungsi yang ditentukan sebelumnya dari hmr.ts yang mengaktifkan penggantian modul panas; jika tidak, kami mem-bootstrapnya seperti dulu.

Sekarang, ketika kita menjalankan ng serve --hmr --configuration=hmr , kita akan menjalankan konfigurasi hmr , dan ketika kita membuat perubahan pada file, kita akan mendapatkan pembaruan tanpa penyegaran penuh. Yang pertama --hmr adalah untuk webpack, dan --configuration=hmr adalah untuk Angular untuk menggunakan lingkungan hmr .

Aplikasi Web Progresif (PWA)

Untuk menambahkan dukungan Angular 6 PWA dan mengaktifkan pemuatan offline untuk aplikasi, kita dapat menggunakan salah satu perintah CLI baru, ng add :

 ng add @angular/[email protected]

Perhatikan bahwa saya menambahkan versi, karena versi terbaru ketika saya menulis tutorial ini membuat kesalahan. (Anda dapat mencoba tanpanya dan memeriksa apakah itu berfungsi untuk Anda hanya dengan menggunakan ng add @angular/pwa .)

Oke, jadi setelah kita menjalankan perintah, kita akan melihat banyak perubahan pada proyek kita. Perubahan paling penting adalah menambahkan:

• Referensi ke manifest.json dalam file aset angular.json , sehingga disertakan dalam output build, serta "serviceWorker": true dalam build produksi
• File ngsw-config.json dengan pengaturan awal untuk menyimpan semua file yang diperlukan untuk menjalankan aplikasi
• Tag meta manifest.json dalam file index.html
• File manifest.json itu sendiri, dengan konfigurasi dasar untuk aplikasi
• Pekerja layanan dimuat dalam modul aplikasi ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }) (perhatikan bahwa pekerja layanan hanya akan diaktifkan di lingkungan produksi)

Jadi, ini berarti ketika pengguna pertama kali mengakses URL, file akan diunduh. Setelah itu, jika pengguna mencoba mengakses URL tanpa layanan jaringan, aplikasi akan tetap bekerja dengan menarik file yang di-cache tersebut.

Menambahkan perpustakaan Material Angular 6 UI

Sejauh ini kami memiliki pengaturan awal, dan kami siap untuk mulai membangun aplikasi kami. Untuk menggunakan komponen yang sudah dibuat, kita dapat menggunakan Material versi Angular 6.

Untuk menginstal paket material di aplikasi kita, kita akan menggunakan ng add :

 ng add @angular/material

Setelah kita menjalankannya, kita akan melihat beberapa paket baru ditambahkan dan beberapa konfigurasi gaya dasar:

• index.html menyertakan font Roboto dan ikon Material
• BrowserAnimationsModule ditambahkan ke AppModule kami
• angular.json memiliki tema indigo-pink yang sudah disertakan untuk kami

Anda harus memulai ulang ng serve untuk mengambil tema, atau Anda dapat memilih tema bawaan lainnya.

Tata Letak Dasar

Untuk memiliki tata letak sidenav awal, kami akan menggunakan skema yang disertakan dengan Material. Tapi tidak apa-apa jika Anda ingin menggunakan tata letak yang berbeda.

(Singkatnya, skema memungkinkan Anda menerapkan transformasi ke proyek: Anda dapat membuat, memodifikasi, atau menghapus file sesuai kebutuhan. Dalam hal ini, ini membuat tata letak sidenav untuk aplikasi kita.)

 ng generate @angular/material:material-nav --name=my-nav

Ini akan membuat komponen sidenav dengan pengaturan minimum yang siap untuk memulai. Bukankah itu hebat?

Ini juga menyertakan semua modul yang diperlukan di app.module.ts kami.

Karena kita menggunakan SCSS, kita perlu mengganti nama file my-nav.component.css menjadi my-nav.component.scss , dan di my-nav.component.ts memperbarui styleUrls referensi yang sesuai untuk menggunakan nama baru.

Sekarang untuk menggunakan komponen baru, mari buka app.component.html dan hapus semua kode awal, hanya menyisakan:

 <app-my-nav></app-my-nav>

Saat kita kembali ke browser, inilah yang akan kita lihat:

Mari perbarui tautan agar hanya memiliki dua opsi yang kita inginkan.

Pertama, mari kita buat dua komponen baru:

 ng gc AddMemory ng generate @angular/material:material-table --name=view-memories

(Yang kedua adalah skema Material yang digunakan untuk membuat tabel.)

Selanjutnya, di my-nav kami akan memperbarui untuk menyiapkan tautan dan menyertakan <router-outlet> untuk menampilkan komponen konten kami:

 <mat-sidenav-container class="sidenav-container"> <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)"> <mat-toolbar color="primary">Menu</mat-toolbar> <mat-nav-list> <a mat-list-item [routerLink]="['/add-memory']">Add Memory</a> <a mat-list-item [routerLink]="['/view-memories']">View My Memories</a> </mat-nav-list> </mat-sidenav> <mat-sidenav-content> <mat-toolbar color="primary"> <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async"> <mat-icon aria-label="Side nav toggle icon">menu</mat-icon> </button> <span>my-memories</span> </mat-toolbar> <router-outlet></router-outlet> </mat-sidenav-content> </mat-sidenav-container>

Juga, di app.component.html kita perlu memperbaruinya agar hanya memiliki <router-outlet> utama (yaitu, hapus <my-nav> ):

 <router-outlet></router-outlet>

Selanjutnya, di AppModule kami akan menyertakan rute:

 import { RouterModule, Routes } from '@angular/router'; // ... imports: [ // ... RouterModule.forRoot([ { path: '', component: MyNavComponent, children: [ { path: 'add-memory', component: AddMemoryComponent }, { path: 'view-memories', component: ViewMemoriesComponent } ] }, ]), ]

Perhatikan bahwa kami menyetel MyNavComponent sebagai induk dan dua komponen yang kami buat sebagai anak. Ini karena kami menyertakan <router-outlet> di MyNavComponent , dan setiap kali kami menekan salah satu dari dua rute tersebut, kami akan merender komponen anak tempat <router-outlet> ditempatkan.

Setelah ini, ketika kami menyajikan aplikasi, kami akan melihat:

Bangun Aplikasi (Buku Harian Kenangan)

Oke, sekarang mari kita buat formulir untuk menyimpan kenangan baru ke buku harian kita.

Kita perlu mengimpor beberapa modul material dan modul form ke app.module.ts kita :

 import { FormsModule } from '@angular/forms'; import { MatCardModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material'; // ... Imports:[ // ... MatCardModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, FormsModule, MatNativeDateModule, // ... ]

Dan kemudian di add-memory.component.html , kami akan menambahkan formulir:

 <form #form="ngForm" (ngSubmit)="onSubmit()"> <mat-card class="memory-card"> <mat-card-title> Add a memory </mat-card-title> <mat-card-content> <mat-form-field> <input disabled matInput placeholder="Select the date..." [(ngModel)]="memory.date" name="date" [matDatepicker]="date"> <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle> <mat-datepicker disabled="false" #date></mat-datepicker> </mat-form-field> <mat-form-field> <textarea placeholder="Enter your memory..." rows="3" maxlength="300" matInput [(ngModel)]="memory.text" name="memory"></textarea> </mat-form-field> </mat-card-content> <mat-card-actions> <button mat-button type="submit">Save me!</button> </mat-card-actions> </mat-card> </form> <pre> {{ memory | json }} </pre>

Di sini kita menggunakan mat-card dan menambahkan dua bidang, date dan textarea .

Perhatikan bahwa kita menggunakan [(ngModel)] . Arahan Angular ini akan mengikat ekspresi memory.date dan properti memory di kelas satu sama lain, seperti yang akan kita lihat nanti. ( [(ngModel)] adalah sintaksis gula—jalan pintas untuk melakukan pengikatan data dua arah dari kelas ke tampilan dan dari tampilan ke kelas. Ini berarti saat Anda memasukkan teks dalam tampilan, memory.date akan mencerminkan perubahan tersebut di instance kelas, dan jika Anda membuat perubahan ke memory.date di instance kelas, tampilan akan mencerminkan perubahan.)

Di add-memory.component.ts , kodenya akan terlihat seperti ini:

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-add-memory', templateUrl: './add-memory.component.html', styleUrls: ['./add-memory.component.scss'] }) export class AddMemoryComponent implements OnInit { memory: any = {}; constructor() { } ngOnInit() { } onSubmit() { console.log(this.memory); } }

Di sini, kami menginisialisasi properti memory yang terikat melalui ngModel . Ketika komponen AddMemoryComponent dipakai, memory akan menjadi objek kosong. Kemudian ketika direktif ngModel berjalan, ia akan dapat menetapkan nilai input ke memory.date dan memory.text . Jika kita tidak melakukan ini, kita akan mendapatkan kesalahan Cannot set property 'date/text' of undefined .

Sementara itu, add-memory.component.scss harus memiliki:

 .memory-card { min-width: 150px; max-width: 400px; width: 100%; margin: auto; } .mat-form-field { width: 100%; }

Karena kita memiliki <pre> {{ memory | json }} </pre> <pre> {{ memory | json }} </pre> kita dapat melihat status memory saat ini dalam tampilan. Jika kita pergi ke browser, inilah hasilnya sejauh ini:

Dalam tampilan, kami mengikat formulir melalui (ngSubmit)="onSubmit()" ke fungsi onSubmit di kelas.

 onSubmit() { console.log(this.memory); }

Jadi ketika Anda mengklik tombol "Simpan saya!" tombol, Anda akan mendapatkan representasi internal dari input pengguna yang dikirim ke log konsol:

Tutorial Angular 6: Menghubungkan dengan Firebase

Apa yang akan kita lakukan selanjutnya adalah menghubungkan proyek kita ke Firebase untuk menyimpan kenangan kita.

Pertama, kita akan pergi ke konsol Firebase dan membuat proyek di sana.

Kedua, kita akan menginstal paket firebase dan angularfire2 :

 npm install firebase angularfire2 --save

Dan kemudian di masing-masing dari tiga file ini:

1. /src/environments/environment.ts
2. /src/environments/environment.hmr.ts
3. /src/environments/environment.prod.ts

…kami akan menambahkan konfigurasi Firebase kami:

 export const environment = { // ... firebase: { apiKey: '<your-key>', authDomain: '<your-project-authdomain>', databaseURL: '<your-database-URL>', projectId: '<your-project-id>', storageBucket: '<your-storage-bucket>', messagingSenderId: '<your-messaging-sender-id>' } };

Anda bisa mendapatkan detail konfigurasi yang diperlukan untuk file di atas dengan mengklik “Tambahkan Firebase ke aplikasi web Anda” di halaman ringkasan proyek.

Setelah itu, kami akan menyertakan modul Firebase di app.module.ts kami :

 import { AngularFireModule } from 'angularfire2'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { environment } from '../environments/environment'; // ... Imports:[ // ... AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, // ... ]

Dan di add-memory.component.ts , kami menyuntikkan database di konstruktor dan menyimpan nilai dari formulir ke database. Saat push promise dari Firebase berhasil, kami mencatat keberhasilan di konsol dan menyetel ulang model:

 import { AngularFireDatabase } from 'angularfire2/database'; // ... constructor(private db: AngularFireDatabase) { } // ... onSubmit() { this.memory.date = new Date(this.memory.date).valueOf(); this.db.list('memories').push(this.memory) .then(_ => { this.memory = {} console.log('success') }) } 

Anda harus mengizinkan akses publik pada aturan basis data, sehingga pengguna anonim dapat membaca dan menulis ke dalamnya. Harap perhatikan bahwa dengan pengaturan ini, setiap pengguna akan dapat membaca/mengubah/menghapus data aplikasi Anda. Pastikan Anda mengatur aturan Anda sesuai sebelum Anda pergi ke produksi.

Juga, untuk mengambil perubahan lingkungan, Anda harus memulai ulang proses ng serve .

Sekarang, ketika kita kembali ke browser dan mengklik tombol simpan, kita akan melihat memori telah ditambahkan ke database:

Mari kita lihat bagaimana kita dapat mengambil ingatan kita dan menampilkannya di tabel Material.

Kembali ketika kami membuat tabel menggunakan ng generate @angular/material:material-table --name=view-memories', we automatically got a file view-memories/view-memories-datasource.ts`. File ini berisi data palsu, jadi kita harus mengubahnya untuk mulai menarik dari Firebase.

Di view-memories-datasource.ts , kami akan menghapus EXAMPLE_DATA dan menyetel larik kosong:

 export class ViewMemoriesDataSource extends DataSource<ViewMemoriesItem> { data: ViewMemoriesItem[] = []; // ...

Dan di getSortedData kami akan memperbarui nama bidang:

 private getSortedData(data: ViewMemoriesItem[]) { if (!this.sort.active || this.sort.direction === '') { return data; } return data.sort((a, b) => { const isAsc = this.sort.direction === 'asc'; switch (this.sort.active) { case 'text': return compare(a.name, b.name, isAsc); case 'date': return compare(+a.id, +b.id, isAsc); default: return 0; } }); }

Di view-memories.component.html kita akan memperbarui nama kolom menjadi date dan text dari model memori kita. Perhatikan bahwa karena kami menyimpan tanggal dalam format milidetik, di sini kami menggunakan pipa tanggal untuk mengubah nilai tampilan dalam format tanggal yang lebih ramah manusia. Terakhir kami menghapus [length]="dataSource.data.length" dari paginator, karena kami akan memuat data secara asinkron dari Firebase:

 <div class="mat-elevation-z8"> <table mat-table #table [dataSource]="dataSource" matSort aria-label="Elements"> <!-- Id Column --> <ng-container matColumnDef="date"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th> <td mat-cell *matCellDef="let row">{{row.date | date:'short'}}</td> </ng-container> <!-- Name Column --> <ng-container matColumnDef="text"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Text</th> <td mat-cell *matCellDef="let row">{{row.text}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <mat-paginator #paginator [pageIndex]="0" [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]"> </mat-paginator> </div>

Ubah view-memories.component.css menjadi view-memories.component.scss dan atur gaya tabel:

 table{ width: 100%; }

Di view-memories.component.ts , kita akan mengubah styleUrls untuk mencerminkan penggantian nama di atas menjadi ./view-memories.component.scss . Kami juga akan memperbarui larik kolom yang displayedColumns menjadi ['date', 'text'] dan menyiapkan sumber data tabel untuk mendapatkan data dari Firebase.

Apa yang terjadi di sini adalah kita berlangganan daftar kenangan dan ketika kita menerima data, kita membuat ViewMemoriesDataSource dan menyetel properti datanya dengan data dari Firebase.

 this.subscription = this.db.list<ViewMemoriesItem>('memories').valueChanges().subscribe(d=>{ console.log('data streaming'); this.dataSource = new ViewMemoriesDataSource(this.paginator, this.sort); this.dataSource.data = d; });

Firebase mengembalikan larik Observable gaya ReactiveX.

Perhatikan bahwa kami mentransmisi this.db.list<ViewMemoriesItem>('memories') yang diambil dari jalur 'memories' —ke ViewMemoriesItem . Ini ditangani oleh perpustakaan angularfire2 .

Kami juga menyertakan panggilan unsubscribe dalam hook onDestroy dari siklus hidup komponen Angular.

 import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core'; import { MatPaginator, MatSort } from '@angular/material'; import { ViewMemoriesDataSource, ViewMemoriesItem } from './view-memories-datasource'; import { AngularFireDatabase } from 'angularfire2/database'; import { Subscription } from 'rxjs'; import { map, first } from 'rxjs/operators'; @Component({ selector: 'app-view-memories', templateUrl: './view-memories.component.html', styleUrls: ['./view-memories.component.scss'] }) export class ViewMemoriesComponent implements OnInit, OnDestroy{ @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; dataSource: ViewMemoriesDataSource; /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ displayedColumns = ['date', 'text']; subscription: Subscription; constructor(private db: AngularFireDatabase) { } ngOnInit() { this.subscription = this.db.list<ViewMemoriesItem>('memories').valueChanges().subscribe(d=>{ console.log('data streaming'); this.dataSource = new ViewMemoriesDataSource(this.paginator, this.sort); this.dataSource.data = d; }); } ngOnDestroy(): void { this.subscription.unsubscribe(); } }

Menerapkan ke Firebase Hosting

Sekarang, untuk membuat aplikasi kita aktif, mari kita terapkan ke Firebase Hosting. Untuk itu, kita akan menginstal Firebase CLI, yang membuat perintah firebase tersedia:

 npm install -g firebase-tools

Sekarang kita dapat menggunakan Firebase CLI untuk login:

 firebase login

Ini akan meminta Anda untuk memilih akun Google Anda.

Selanjutnya, kita akan menginisialisasi proyek dan mengonfigurasi Firebase Hosting:

 firebase init

Kami hanya akan memilih opsi Hosting.

Selanjutnya, ketika kita dimintai jalurnya, kita akan menyetelnya ke dist/my-memories . Saat kami ditanya apakah akan mengonfigurasinya sebagai aplikasi satu halaman (yaitu menulis ulang semua URL ke /index.html ), kami akan menjawab “ya”.

Terakhir, kita akan menekan, “File dist/my-memories/index.html sudah ada. Timpa?” Di sini kita akan mengatakan "tidak."

Ini akan membuat file konfigurasi Firebase .firebaserc dan firebase.json dengan konfigurasi yang disediakan.

Langkah terakhir adalah menjalankan:

 ng build --prod firebase deploy

Dan dengan itu, kami akan memublikasikan aplikasi ke Firebase, yang menyediakan URL untuk kami navigasi, seperti https://my-memories-b4c52.firebaseapp.com/view-memories, tempat Anda dapat melihat publikasi saya sendiri demo.

Wow, Anda telah melalui tutorial! Saya harap Anda menikmatinya. Anda juga dapat melihat kode lengkapnya di GitHub.

Satu langkah pada satu waktu

Angular adalah kerangka kerja yang sangat kuat untuk membangun aplikasi web. Sudah ada sejak lama dan telah membuktikan dirinya untuk aplikasi kecil, sederhana dan besar, yang kompleks — Angular 6 tidak terkecuali di sini.

Ke depan, Angular berencana untuk terus meningkatkan dan mengikuti paradigma web baru seperti komponen web (Elemen Angular). Jika Anda tertarik untuk membangun aplikasi hybrid, Anda dapat melihat Ionic, yang menggunakan Angular sebagai kerangka dasarnya.

Tutorial ini membahas langkah-langkah yang sangat mendasar untuk mulai menggunakan Angular, Material, dan Firebase. Tetapi Anda harus mempertimbangkan bahwa untuk aplikasi dunia nyata, Anda perlu menambahkan validasi, dan untuk membuat aplikasi Anda lebih mudah dipelihara dan diskalakan, Anda mungkin ingin mengikuti praktik terbaik seperti menggunakan Layanan, komponen yang dapat digunakan kembali, dll. Itu harus menjadi subjek artikel lain — mudah-mudahan, yang ini cukup untuk membangkitkan selera Anda untuk pengembangan Angular!