Angular 6 Eğitimi: Yeni Güçle Yeni Özellikler

Açısal 6 çıktı! En göze çarpan değişiklikler, CLI'sinde ve hizmetlerin nasıl enjekte edildiğidir. Bu eğitimde ilk Angular 6 uygulamanızı veya Angular/Firebase uygulamanızı yazmak istiyorsanız, ilk kurulumun temel adımlarını gözden geçireceğiz ve küçük bir günlük uygulaması oluşturacağız.

Açısal 6: Temel Bilgiler

Angular'ı daha önce hiç kullanmadıysanız, size kısa bir açıklamasını ve nasıl çalıştığını anlatayım.

Angular, hem masaüstü hem de mobil cihazlar için tek sayfalık uygulamaların (SPA) oluşturulmasını desteklemek için tasarlanmış bir JavaScript çerçevesidir.

Çerçeve, gezinme, yetkilendirme, formlar ve raporlama gibi bir web uygulaması için en yaygın senaryolardan bazılarını kolayca uygulamanıza olanak tanıyan eksiksiz bir yönergeler ve modüller paketi içerir. Ayrıca Jasmine çerçevesini kullanarak testler eklemek ve bunları Karma veya İletki test koşucularını kullanarak çalıştırmak için gerekli tüm paketlerle birlikte gelir.

Açısal mimari, bileşenlere, şablonlara, yönergelere ve hizmetlere dayanmaktadır. Hizmetleriniz için yerleşik bir bağımlılık ekleme mekanizmasının yanı sıra görünümlerinizi bileşen kodunuzla bağlamak için iki yönlü veri bağlama sağlar.

Angular, JS'nin yazılı bir üst kümesi olan TypeScript'i kullanır ve özellikle yazılı bir dil arka planından geliyorsanız bazı şeyleri kolaylaştırır.

Angular 6: Yeni Özellikler

Angular 6'daki yeni özelliklerin kısa bir özeti:

• Çerçeve paketleri ( @angular/core , @angular/common , @angular/compiler , vb.), CLI, Material ve CDK için ana sürüm numaralarını senkronize etme politikası. Bu, ileriye dönük olarak çapraz uyumluluğu daha net hale getirmeye yardımcı olacaktır: Sürüm numarasına hızlı bir bakış atarak, anahtar paketlerin birbiriyle uyumlu olup olmadığını anlayabilirsiniz.
• Yeni ng CLI komutları:
  • Paket sürümlerini akıllıca yükseltmek, bağımlılık sürümlerini ng update ve bunları senkronize halde tutmak için güncelleme. (Örn. ng update @angular/core çalıştırıldığında, tüm çerçeveler RxJS ile birlikte güncellenecektir.) Paket bunları içeriyorsa, şemaları da çalıştıracaktır. (Daha yeni bir sürüm, kodda değişiklik gerektiren son değişiklikleri içeriyorsa, şema sizin için kodunuzu güncelleyecektir.)
  • yeni paketler ng add için ekleyin (ve varsa komut dosyalarını çalıştırın)
• Servisler, eskiden olduğu gibi, servislere referans veren modüller yerine artık onları sağlayacak modüllere referans veriyor.

Bu son değişikliğin ne anlama geldiğine bir örnek olarak, kodunuzun eskiden nasıl göründüğü:

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

…Angular 6'daki bu özel değişiklikle, şöyle görünecek:

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

Bunlara ağaç sallanabilir sağlayıcılar denir ve derleyicinin daha küçük boyutlu paketlerle sonuçlanan referanssız hizmetleri kaldırmasına izin verir.

Açısal 6 CLI

ng komut satırı arayüzü, Angular'ın çok önemli bir parçasıdır ve uygulamanızı kodlarken daha hızlı hareket etmenizi sağlar.

CLI ile ilk uygulama kurulumunuzu çok kolay bir şekilde destekleyebilir, yeni bileşenler, yönergeler vb. oluşturabilir ve uygulamanızı yerel ortamınızda oluşturup çalıştırabilirsiniz.

Angular 6 Projesi Oluşturma

Tamam, yeterince konuşma. Ellerimizi kirletelim ve kodlamaya başlayalım.

Başlamak için, makinenizde Node.js ve npm kurulu olmalıdır.

Şimdi devam edelim ve CLI'yi yükleyelim:

 npm install -g @angular/cli

Bu, -g anahtarı nedeniyle ng CLI komutunu global olarak yükleyecektir.

Bunu elde ettikten sonra, ng new ile uygulamamız için ilk iskeleyi alabiliriz:

 ng new my-memories --style=scss

Bu, bir my-memories klasörü oluşturacak, ilk kurulumunuzu başlatmaya hazır hale getirmek için gerekli tüm dosyaları oluşturacak ve gerekli tüm paketleri kuracaktır. --style=scss anahtarı isteğe bağlıdır ve derleyiciyi SCSS dosyalarını daha sonra ihtiyaç duyacağımız CSS'de derlemek üzere ayarlayacaktır.

Kurulum tamamlandıktan sonra, cd my-memories edebilir ve ng serve çalıştırabilirsiniz. Bu, oluşturma işlemini ve uygulamanıza http://localhost:4200 hizmet veren yerel bir web sunucusunu başlatacaktır.

Sahne arkasında olan şey, CLI'nin tüm .ts (TypeScript dosyalarını) Vanilla JS'ye aktarması, gerekli tüm bağımlılıkları node_modules paket klasöründen toplaması ve sonucu yerel bir web sunucusu aracılığıyla sunulan bir dizi dosyada vermesidir. 4200 numaralı bağlantı noktasında çalışır.

Proje Dosyaları

Angular'ın proje klasör yapısına aşina değilseniz, bilmeniz gereken en önemli şey, uygulama ile ilgili tüm kodların src klasörünün içine girmesidir. Genellikle tüm modüllerinizi ve yönergelerinizi uygulamanızın mimarisine göre (örn. kullanıcı, sepet, ürün) bu klasörde oluşturacaksınız.

İlk kurulum

Tamam, şimdiye kadar uygulamamız için ilk kuruluma sahibiz. Bazı değişiklikler yapmaya başlayalım.

Başlamadan önce, biraz src klasörüne girelim. İlk sayfa 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>

Burada bazı temel HTML ve <app-root> etiketini görüyoruz. Bu bir Angular bileşenidir ve Angular 6'nın bileşen kodumuzu eklediği yer.

index.html dosyasındakiyle eşleşmesi için app-root seçicisine sahip app/app.component.ts dosyasını bulacağız.

Bileşen, dekore edilmiş bir TypeScript sınıfıdır ve bu durumda, title özelliğini içerir. @Component dekoratörü, Angular'a bileşen davranışını sınıfa dahil etmesini söyler. Seçiciye ek olarak, hangi HTML dosyasının oluşturulacağını ve hangi stil sayfalarının kullanılacağını belirtir.

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

app.component.html bakarsak, {{title}} enterpolasyon bağlamasını görürüz. İşte tüm sihirli bağlamanın gerçekleştiği yer ve Angular, sınıf başlık özelliğinin değerini oluşturacak ve her değiştiğinde güncelleyecektir.

 <!--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>

Devam edelim ve sınıfın title 'My Memories!' olarak güncelleyelim. .

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

Derleyicinin değişikliğimizi ve tarayıcının güncellenmiş başlığımızı göstermek için yenileme işlemini yaptığını göreceğiz.

Bu, Angular 6'nın ng serve dosya değişikliklerimizi izlediği ve herhangi bir dosyaya her değişiklik yapıldığında işlendiği anlamına gelir.

Kodlamayı daha kolay hale getirmek ve her değişiklik yaptığımızda tam sayfa yenilemeyi önlemek için, tam bir yenileme üretmek yerine yalnızca değiştirilen JS/CSS yığınını güncelleyen web paketi Sıcak Modül Değiştirme'den (HMR) yararlanabiliriz. değişikliklerinizi gösterin.

HMR'yi Yapılandırma

Öncelikle ortamı hazırlamamız gerekiyor.

Aşağıdaki içeriğe sahip bir src/environments/environment.hmr.ts dosyası oluşturun:

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

src/environments/environment.prod.ts dosyasını güncelleyin ve ortama hmr: false bayrağını ekleyin:

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

Ardından src/environments/environment.ts dosyasını güncelleyin ve oradaki ortama hmr: false bayrağını ekleyin:

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

angular.json dosyasının sonraki bölümünde bu bölümü güncelleyin:

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

Ve projects altında → my-memories → architect → serve → configurations :

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

Şimdi tsconfig.app.json gerekli types içerecek şekilde güncelleyin (iyi, yazın) bunu compilerOptions altına ekleyin:

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

Ardından, geliştirme bağımlılığı olarak @angularclass/hmr modülünü kuracağız:

 npm install --save-dev @angularclass/hmr

Ardından, src/hmr.ts dosyasını oluşturarak yapılandırın:

 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(); }); };

Ardından, yukarıdaki işlevi kullanmak için src/main.ts güncelleyin:

 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)); }

Burada yaptığımız şey, bootstrap çağrısını isimsiz bir fonksiyon haline getirmek ve ardından environment.hmr bayrağının doğru olup olmadığını sormaktır. Eğer öyleyse, sıcak modül değişimini etkinleştiren hmr.ts önceden tanımlanmış işlevi çağırırız; aksi takdirde, onu eskisi gibi önyükleriz.

Şimdi, ng serve --hmr --configuration=hmr çalıştırdığımızda, hmr yapılandırmasını çağırıyor olacağız ve dosyalarda değişiklik yaptığımızda, güncellemeleri tam bir yenileme olmadan alacağız. İlk --hmr paketi içindir ve --configuration=hmr , hmr ortamını kullanması içindir.

Aşamalı Web Uygulaması (PWA)

Angular 6 PWA desteği ng add ve uygulama için çevrimdışı yüklemeyi etkinleştirmek için yeni CLI komutlarından birini kullanabiliriz:

 ng add @angular/[email protected]

Sürümü eklediğimi unutmayın, çünkü bu öğreticiyi yazarken en son sürüm bir hata veriyordu. (Onsuz deneyebilir ve basitçe ng add @angular/pwa kullanarak sizin için çalışıp çalışmadığını kontrol edebilirsiniz.)

Tamam, komutu çalıştırdıktan sonra projemizde birçok değişiklik göreceğiz. En önemli değişiklikler, eklenmiş olmasıdır:

• angular.json varlık dosyasındaki manifest.json bir referans, böylece yapı çıktısına ve ayrıca "serviceWorker": true
• Uygulamanın çalışması için gerekli tüm dosyaları önbelleğe almak için ilk kuruluma sahip ngsw-config.json dosyası
• index.html dosyasındaki bir manifest.json meta etiketi
• Uygulama için temel bir yapılandırmayla manifest.json dosyasının kendisi
• ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }) uygulama modülündeki hizmet çalışanı yükü (hizmet çalışanının yalnızca üretim ortamlarında etkinleştirileceğini unutmayın)

Bu, artık kullanıcı URL'ye ilk eriştiğinde dosyaların indirileceği anlamına gelir. Bundan sonra, kullanıcı ağ hizmeti olmadan URL'ye erişmeye çalışırsa, uygulama bu önbelleğe alınmış dosyaları çekerek çalışmaya devam eder.

Material Angular 6 UI kitaplığını ekleme

Şimdiye kadar ilk kuruluma sahibiz ve uygulamamızı oluşturmaya başlamaya hazırız. Halihazırda oluşturulmuş bileşenleri kullanmak için Material'ın Angular 6 versiyonunu kullanabiliriz.

material paketini uygulamamıza kurmak için tekrar ng add 'i kullanacağız:

 ng add @angular/material

Bunu çalıştırdıktan sonra, eklenen bazı yeni paketler ve bazı temel stil yapılandırmaları göreceğiz:

• index.html , Roboto yazı tipini ve Malzeme simgelerini içerir
• BrowserAnimationsModule , AppModule eklendi
• angular.json zaten bizim için dahil edilmiş çivit pembesi temaya sahip

Temayı almak için ng serve yeniden başlatmanız gerekecek veya önceden oluşturulmuş başka bir tema seçebilirsiniz.

Temel Düzen

İlk yan navigasyon düzenine sahip olmak için Material ile birlikte gelen şemaları kullanacağız. Ancak farklı bir düzen kullanmak istiyorsanız sorun değil.

(Özetle, şemalar bir projeye dönüşümler uygulamanıza izin verir: Dosyaları gerektiği gibi oluşturabilir, değiştirebilir veya silebilirsiniz. Bu durumda, uygulamamız için bir yan navigasyon düzenini oluşturur.)

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

Bu, minimum kurulumun başlamaya hazır olduğu bir sidenav bileşeni oluşturacaktır. Bu harika değil mi?

Ayrıca app.module.ts gerekli tüm modülleri dahil etmiştir.

SCSS kullandığımız için, my-nav.component.css dosyasını my-nav.component.scss -nav.component.scss olarak yeniden adlandırmamız ve my-nav.component.ts dosyasında yeni adı kullanmak için ilgili referans my-nav.component.ts güncellememiz styleUrls .

Şimdi yeni bileşeni kullanmak için, app.component.html ve ilk kodun tamamını kaldıralım, sadece şunu bırakalım:

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

Tarayıcıya geri döndüğümüzde, göreceğimiz şey:

Bağlantıları sadece istediğimiz iki seçeneğe sahip olacak şekilde güncelleyelim.

İlk olarak, iki yeni bileşen oluşturalım:

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

(İkincisi, bir tablo oluşturmak için kullanılan bir Malzeme şemasıdır.)

Daha sonra, my-nav bağlantıları kurmak için güncelleme yapacağız ve içerik bileşenlerimizi görüntülemek için <router-outlet> 'i dahil edeceğiz:

 <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>

Ayrıca, app.component.html onu yalnızca ana <router-outlet> olacak şekilde güncellememiz gerekiyor (yani, <my-nav> kaldırın):

 <router-outlet></router-outlet>

Ardından, AppModule rotaları ekleyeceğiz:

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

MyNavComponent üst öğe olarak ve oluşturduğumuz iki bileşeni de alt öğe olarak ayarladığımızı unutmayın. Bunun nedeni, <router-outlet> MyNavComponent içine dahil etmemiz ve bu iki yoldan birine ulaştığımızda, alt bileşeni <router-outlet> router-outlet> öğesinin yerleştirildiği yerde oluşturacağız.

Bundan sonra, uygulamayı sunduğumuzda görmeliyiz:

Uygulamayı Oluşturun (Bir Anılar Günlüğü)

Tamam, şimdi yeni anıları günlüğümüze kaydetmek için formu oluşturalım.

Bazı malzeme modüllerini ve form modülünü app.module.ts :

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

Ardından add-memory.component.html şu formu ekleyeceğiz:

 <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>

Burada bir mat-card kullanıyoruz ve iki alan, bir date ve bir textarea ekliyoruz.

[(ngModel)] kullandığımızı unutmayın. Bu Angular yönergesi, daha sonra göreceğimiz gibi, class içindeki memory.date ifadesini ve memory özelliğini birbirine bağlar. ( [(ngModel)] sözdizimsel şekerdir—sınıftan görünüme ve görünümden sınıfa iki yönlü veri bağlama gerçekleştirmek için bir kısayol. Bu, görünüme metin girdiğinizde, memory.date bu değişiklikleri yansıtacağı anlamına gelir. sınıf örneğinde ve sınıf örneğinde memory.date üzerinde değişiklik yaparsanız, görünüm değişiklikleri yansıtır.)

add-memory.component.ts kod şöyle görünecektir:

 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); } }

Burada, ngModel ile bağlı olan memory özelliğini başlatıyoruz. AddMemoryComponent bileşeni başlatıldığında, memory boş bir nesne olacaktır. Ardından ngModel yönergesi çalıştığında, girdi değerini memory.date ve memory.text . Bunu yapmazsak Cannot set property 'date/text' of undefined hatası alırdık.

Bu arada, add-memory.component.scss olmalıdır:

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

<pre> {{ memory | json }} </pre> <pre> {{ memory | json }} </pre> görünümde memory mevcut durumunu görebiliriz. Tarayıcıya gidersek, şu ana kadarki sonuç:

Görünümde, formu (ngSubmit)="onSubmit()" aracılığıyla sınıftaki onSubmit işlevine bağladık.

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

Yani “Beni kaydet!” düğmesine tıkladığınızda düğmesini tıkladığınızda, konsol günlüğüne gönderilen kullanıcı girişinin dahili temsilini alırsınız:

Angular 6 Eğitimi: Firebase ile Bağlanma

Bundan sonra yapacağımız şey, anılarımızı kurtarmak için projemizi Firebase'e bağlamak.

İlk olarak Firebase konsoluna gideceğiz ve orada bir proje oluşturacağız.

İkinci olarak, firebase ve angularfire2 paketlerini kuracağız:

 npm install firebase angularfire2 --save

Ve sonra bu üç dosyanın her birinde:

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

…Firebase yapılandırmamızı ekleyeceğiz:

 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>' } };

Projeye genel bakış sayfasındaki "Firebase'i web uygulamanıza ekleyin" seçeneğine tıklayarak yukarıdaki dosyalar için gerekli yapılandırma ayrıntılarını alabilirsiniz.

Bundan sonra, Firebase modüllerini app.module.ts :

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

Ve add-memory.component.ts içinde, yapıcıya veritabanını enjekte ediyoruz ve formdaki değerleri veritabanına kaydediyoruz. Firebase'den gelen push sözü başarılı olduğunda, konsolda başarıyı günlüğe kaydeder ve modeli sıfırlarız:

 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') }) } 

Anonim kullanıcıların okuyabilmesi ve yazabilmesi için veritabanı kurallarına genel erişime izin vermeniz gerekir. Lütfen bu kurulumla, herhangi bir kullanıcının uygulama verilerinizi okuyabileceğini/değiştirebileceğini/silebileceğini unutmayın. Üretime geçmeden önce kurallarınızı buna göre ayarladığınızdan emin olun.

Ayrıca, ortam değişikliklerini almak için ng serve verme sürecini yeniden başlatmanız gerekir.

Şimdi, tarayıcıya geri dönüp kaydet butonumuza tıkladığımızda, hafızanın veritabanına eklendiğini göreceğiz:

Hatıralarımızı nasıl geri alabileceğimize ve bunları Material tablosunda nasıl görüntüleyebileceğimize bir göz atalım.

Tabloyu ng generate @angular/material:material-table --name=view-memories', we automatically got a file . Bu dosya sahte veriler içeriyor, bu nedenle Firebase'den çekmeye başlamak için onu değiştirmemiz gerekecek.

view-memories-datasource.ts dosyasında, EXAMPLE_DATA kaldıracağız ve boş bir dizi ayarlayacağız:

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

Ve getSortedData alan adlarını güncelleyeceğiz:

 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; } }); }

view-memories.component.html sütunların adlarını date ve bellek modelimizdeki text göre güncelleyeceğiz. Tarihi milisaniye biçiminde kaydettiğimiz için, burada değeri görüntülemek için daha insan dostu bir tarih biçimine dönüştürmek için bir tarih çubuğu kullandığımızı unutmayın. Son olarak, verileri Firebase'den eşzamansız olarak yükleyeceğimizden, sayfalayıcıdan [length]="dataSource.data.length" öğesini kaldırıyoruz:

 <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>

view-memories.component.css dosyasını view-memories.component.scss view-memories.component.css olarak değiştirin ve tablo stilini ayarlayın:

 table{ width: 100%; }

view-memories.component.ts içinde, ./view-memories.component.scss yukarıdaki yeniden adlandırmayı styleUrls olarak yansıtacak şekilde değiştireceğiz. Ayrıca displayedColumns dizisini ['date', 'text'] olacak şekilde güncelleyeceğiz ve tablo veri kaynağını Firebase'den veri alacak şekilde ayarlayacağız.

Burada olan şey, anılar listesine abone oluyoruz ve verileri aldığımızda ViewMemoriesDataSource somutlaştırıyoruz ve veri özelliğini Firebase'den gelen verilerle ayarlıyoruz.

 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, ReactiveX tarzı bir Observable dizisi döndürür.

this.db.list<ViewMemoriesItem>('memories') — 'memories' yolundan çekilen değerler— ViewMemoriesItem . Bu, angularfire2 kütüphanesi tarafından halledilir.

Angular bileşen yaşam döngüsünün onDestroy kancasına unsubscribe çağrısını da ekledik.

 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(); } }

Firebase Hosting'e Dağıtma

Şimdi uygulamamızı canlı hale getirmek için onu Firebase Hosting'e dağıtalım. Bunun için firebase komutunu kullanılabilir hale getiren Firebase CLI'yi yükleyeceğiz:

 npm install -g firebase-tools

Artık oturum açmak için Firebase CLI'yi kullanabiliriz:

 firebase login

Bu, Google hesabınızı seçmenizi isteyecektir.

Ardından, projeyi başlatacağız ve Firebase Hosting'i yapılandıracağız:

 firebase init

Sadece Hosting seçeneğini seçeceğiz.

Ardından, yol sorulduğunda, onu dist/my-memories olarak ayarlayacağız. Tek sayfalık bir uygulama olarak yapılandırılıp yapılandırılmayacağı sorulduğunda (yani, tüm URL'leri /index.html olarak yeniden yazın), "evet" yanıtını vereceğiz.

Son olarak, “Dosya dist/my-memories/index.html zaten var. Üzerine yaz?” Burada “hayır” diyeceğiz.

Bu, sağlanan yapılandırmayla birlikte .firebaserc ve firebase.json Firebase yapılandırma dosyalarını oluşturacaktır.

Son adım çalıştırmaktır:

 ng build --prod firebase deploy

Ve bununla birlikte, uygulamayı https://my-memories-b4c52.firebaseapp.com/view-memories gibi, kendi yayınlananlarımı görebileceğiniz bir URL sağlayan Firebase'de yayınlamış olacağız. demo.

Vay canına, eğitimden geçtiniz! Umarım keyif almışsındır. Bunun için tam kodu GitHub'da da kontrol edebilirsiniz.

Adım adım

Angular, web uygulamaları oluşturmak için çok güçlü bir çerçevedir. Uzun süredir piyasada ve hem küçük, basit uygulamalar hem de büyük, karmaşık uygulamalar için kendini kanıtladı - Angular 6 burada bir istisna değil.

Angular, ileriye dönük olarak, web bileşenleri (Angular Elements) gibi yeni web paradigmalarını geliştirmeye ve takip etmeye devam etmeyi planlıyor. Hibrit uygulamalar oluşturmakla ilgileniyorsanız, temel çerçevesi olarak Angular'ı kullanan Ionic'e göz atabilirsiniz.

Bu eğitimde Angular, Material ve Firebase'i kullanmaya başlamak için çok temel adımlar ele alındı. Ancak, gerçek dünyadaki uygulamalar için doğrulama eklemeniz gerekeceğini ve uygulamanızın bakımını ve ölçeklenmesini kolaylaştırmak için muhtemelen Hizmetler, yeniden kullanılabilir bileşenler vb. gibi en iyi uygulamaları takip etmek isteyeceğinizi dikkate almalısınız. Bu, başka bir makalenin konusu olacak - umarız bu makale Angular geliştirme konusundaki iştahınızı açmaya yetmiştir!