Get best of the week

10 fitur sudut berguna yang Anda lewatkan


Jika Anda secara teratur menulis aplikasi dalam Angular dan telah menghabiskan lebih dari seratus jam untuk itu, kemungkinan besar Anda tahu tentang fungsi-fungsi ini. Tapi, bagaimanapun, untuk memastikan - baca :)

Sebelum kita beralih ke fungsi Angular, satu alat yang sangat berguna patut disebutkan. Bit (Github) memudahkan untuk mengerjakan komponen Angular bersama dan membaginya. Saya sungguh-sungguh merekomendasikannya untuk menjaga antarmuka yang konsisten, mempercepat pengembangan dan meminimalkan jumlah kesalahan dalam kode.


Contoh: Circular loader untuk Angular dengan bit.dev


1. Judul


Tag judul adalah elemen HTML yang mendefinisikan judul halaman web. Judul muncul di halaman hasil pencarian (SERP) sebagai judul yang dapat diklik untuk hasilnya. Mereka sangat penting untuk kegunaan, SEO, dan promosi sosial. jaringan.

Aplikasi sudut mengambil judul dari tag ... di index.html. Secara default, transisi antar komponen di Angular tidak mengubah header ini.

Tahukah Anda bahwa judul dapat diatur secara terpisah dari setiap komponen?

Angular memiliki layanan Judul dibersudut/ platform-browser. Anda dapat dengan mudah menanamkannya di komponen lain dan menggunakan metode setTitle untuk mengganti judul.

import { Title } from "@angular/platform-browser"@Component({
   ...
})
export class LoginComponent implements OnInit {
   constructor(private title: Title) {}    ngOnInit() {
       title.setTitle("Login")
   }
}

Saat menavigasi ke komponen Login dalam aplikasi, judul jendela browser akan berubah menjadi "Login".

Hal yang sama dapat dilakukan dalam komponen apa pun dan, karenanya, saat Anda menavigasi di dalam aplikasi, judul akan berubah, merespons tindakan pengguna.

2. Meta


Tag meta aplikasi sudut juga diambil dari file index.html. Dan untuk mengaturnya dari komponen, layanan Meta daribersudut/ platform-browser.

Dan lagi: penggunaan tag meta berguna dalam hal SEO dan promosi halaman di sosial. jaringan, mereka berisi informasi tentang halaman web yang digunakan mesin pencari untuk memberi peringkat dan tampilan yang benar dalam hasil pencarian.

Untuk menggunakan komponen tag meta, impor Meta daribersudut/ platform-browser dan sematkan komponen yang diinginkan.

import { Meta } from "@angular/platform-browser"@Component({
    ...
})
export class BlogComponent implements OnInit {
    constructor(private meta: Meta) {}    ngOnInit() {
        meta.updateTag({name: "title", content: ""})
        meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
        meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
        meta.updateTag({name: "site", content: "My Site"})
    }
}

BlogComponent sekarang dapat ditampilkan dengan benar di Twitter, Facebook, dll. Pada saat yang sama menampilkan deskripsi, judul dan gambar dalam bentuk yang benar dan mudah dibaca.
Pernahkah Anda mendengar tentang ini juga? Maka ada sesuatu yang lebih menarik.

3. Interpolasi pola utama


Interpolator standar dalam pola adalah {{}}. Jika Anda memasukkan variabel antara {{dan}}, nilainya akan ditampilkan di DOM akhir.

Apakah Anda tahu bahwa mungkin untuk menimpa pembatas enkapsulasi standar pada karakter apa pun? Itu mudah. Anda hanya perlu menentukan nilai-nilai baru di properti interpolasi di dekorator Komponen.

@Component({
   interpolation: ["((","))"]
})
export class AppComponent {}

Interpolasi yang digunakan dalam templat AppComponent telah berubah menjadi (()), dan {{}} tidak lagi berfungsi.

@Component({
   template: `
       <div>
           ((data))
       </div>
   `,
   interpolation: ["((","))"]
})
export class AppComponent {
   data: any = "dataVar"
}

Di browser, Anda akan melihat bahwa string "dataVar" akan ditampilkan di tempat ((data)).

4. Lokasi


Kami dapat membuka URL halaman saat ini di browser menggunakan layanan Lokasi. Bergantung pada LocationStrategy mana yang digunakan, Lokasi akan disimpan baik oleh jalur di URL (/ example / halaman /) atau oleh bagian dari URL setelah pound (# test / halaman /).

Dengan Lokasi, kita dapat pergi ke URL, maju dalam cerita, kembali, mengubah URL saat ini, atau mengganti item teratas dalam cerita.

Layanan Lokasi dari CommonModule akan membantu di sini.

import { Location } from "@angular/common"@Component({
   ...
})
export class AppComponent {
   constructor(private location: Location) {}    navigateTo(url) {
       this.location.go(url)
   }    goBack() {
       location.back()
   }    goForward() {
       location.forward()
   }
}


5. Dokumen


Terkadang Anda perlu mendapatkan model dokumen untuk melakukan operasi DOM langsung dari aplikasi Angular.

DOCUMENT hanya melayani tujuan ini. DOCUMENT adalah token DI yang mewakili konteks render utama. Di browser, ini adalah Dokumen DOM. Ini memberikan operasi DOM terlepas dari runtime.

Catatan: Dokumen mungkin tidak tersedia dalam konteks aplikasi jika konteks aplikasi dan rendering tidak cocok (misalnya, ketika memulai aplikasi di pekerja web).

Katakanlah kita memiliki beberapa jenis elemen HTML:

<canvas id="canvas"></canvas>


Untuk mendapatkan HTMLElement kanvas, terapkan DOKUMEN:

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}
}


Dapatkan kanvas HTMLElement menggunakan getElementById ()

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}    renderCanvas() {
       this._doc.getElementById("canvas")
   }
}


Peringatan: gunakan DOCUMENT dengan hati-hati! Berinteraksi dengan DOM secara langsung berbahaya dan meningkatkan risiko XSS.

6. Dekorator @Attribute


Pada dasarnya, dalam aplikasi Angular, mereka menggunakan dekorator Komponen, Modul, dan Direktif.

Namun, ada juga dekorator Atribut yang memungkinkan Anda untuk melewatkan string statis tanpa overhead kinerja yang tidak perlu, melewati pemeriksaan perubahan.

Nilai dekorator atribut hanya diperiksa satu kali. Digunakan seperti dekoratorMemasukkan:

@Component({
   ...
})
export class BlogComponent {
   constructor(@Attribute("type") private type: string ) {}
}


7. HttpInterceptor


HttpInterceptor adalah fitur yang sangat kuat di Angular yang memungkinkan Anda untuk mencegat permintaan HttpRequest dan memprosesnya.

Sebagian besar pencegat mengonversi permintaan keluar sebelum meneruskannya ke pencegat berikutnya dalam rantai dengan memanggil next.handle (transformedReq).

Dalam kasus yang jarang terjadi, pencegat dapat sepenuhnya memproses permintaan itu sendiri, dan tidak mendelegasikan sisa rantai lebih lanjut. Perilaku ini diizinkan.

HttpInterceptor paling sering digunakan di:

  • Autentikasi
  • Caching
  • Backend palsu
  • Transformasi URL
  • Subversi Header

Untuk menggunakan interseptor ini, Anda perlu membuat layanan dan mengimplementasikan antarmuka HttpInterceptor.

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
   constructor() {}    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       ...
   }
}

Masukkan ke modul utama:
@NgModule({
   ...
   providers: [
       {
           provide: HTTP_INTERCEPTORS,
           useClass: MockBackendInterceptor,
           multi: true
       }
   ]
   ...
})
export class AppModule {}


8. AppInitializer


Kadang-kadang, ketika meluncurkan aplikasi Angular, perlu menginisialisasi sepotong kode tertentu. Misalnya, memuat pengaturan, memuat cache, memuat konfigurasi apa pun, atau melakukan pemeriksaan. Token AppInitialzer dibuat khusus untuk ini.
APP_INITIALIZER: fungsi dijalankan segera setelah peluncuran aplikasi.
Misalkan kita perlu menjalankan beberapa fungsi runSettings ketika memulai aplikasi Angular:

function runSettingsOnInit() {
   ...
}

Untuk melakukan ini, mari kita beralih ke modul AppModule utama dan menambahkannya ke bagian penyedia dekorator NgModule:

@NgModule({
   providers: [
       { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
   ]
})

9. Pendengar Bootstrap


Dengan analogi dengan AppInitialzer, Angular memiliki fungsi yang memungkinkan Anda melacak pemuatan komponen. Ini adalah APP_BOOTSTRAP_LISTENER.

Semua panggilan balik yang dikembalikan oleh token ini akan dipanggil untuk setiap komponen yang dapat diunduh.

Anda dapat menggunakan fitur ini untuk melacak boot komponen dalam banyak kasus. Sebagai contoh, modul Router menggunakannya untuk menghancurkan dan membuat komponen berdasarkan navigasi rute.

Untuk menggunakan APP_BOOTSTRAP_LISTENER, Anda perlu menambahkannya ke bagian penyedia di AppModule dengan fungsi panggilan balik:

@NgModule({
   {
       provide: APP_BOOTSTRAP_LISTENER, multi: true,
       useExisting: runOnBootstrap
   }
   ...
})
export class AppModule {}


10. NgPlural


Jamak adalah sakit kepala bagi para programmer. Tugas penyesuaian tata bahasa bentuk kata tergantung pada penggunaan bentuk tunggal / jamak muncul terus-menerus. Beberapa situs cukup menggunakan akhiran untuk ini. Contohnya:

1 component(s) removed
3 component(s) removed

Artinya, pembaca sendiri harus memahami angka apa yang tersirat :)

Angular menyarankan pemecahan masalah ini dengan cara yang lebih beradab, menggunakan arahan NgPlural.

NgPlural menambah atau menghapus cabang DOM berdasarkan nilai numerik. Untuk pluralisasi, inilah yang Anda butuhkan.

Untuk menggunakan arahan ini, Anda harus mengatur atribut [ngPlural] ke wadah elemen sebagai ekspresi sakelar. Elemen internal dengan atribut [ngPluralCase] ​​akan ditampilkan tergantung pada kondisi yang ditentukan:

<p [ngPlural]="components">
   <ng-template ngPluralCase="=1">1 component removed</ng-template>   
   <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>   
</p>


Sekarang Anda dapat membuang "(-s)". Arahan NgPlural akan membantu menurunkan bentuk kata yang benar tergantung pada artinya. Total:

// if 1 component
1 component removed

// if 5 components
5 components removed


Source: https://habr.com/ru/post/undefined/

More articles:


All Articles