API tidak ditemukan?
AngularJS menyediakan beberapa enkapsulasi fungsi, tetapi ketika Anda mencoba mengakses fungsi -fungsi ini melalui sudut objek global, Anda menemukan bahwa mereka sangat berbeda dari perpustakaan yang Anda temui di masa lalu.
$ http
Misalnya, di jQuery, kita tahu bahwa API -nya diekspos melalui objek global: $. Ketika Anda perlu melakukan panggilan AJAX, gunakan $ .AJAX (). API seperti itu sangat konsisten dengan harapan berpikir.
AngularJS juga memperlihatkan objek global: Angular, yang juga merangkum panggilan AJAX dan menyediakan objek $ http. Namun, ketika Anda mencoba mengakses Angular. $ Http menggunakan pengalaman lama, Anda menemukan bahwa bukan itu masalahnya!
Setelah dengan hati -hati memeriksa dokumentasi $ HTTP, saya tidak dapat menemukan petunjuk. Di mana saya bisa mendapatkan $ http ini?
Injeksi Ketergantungan/DI
Faktanya, AngularJS mengatur semua komponen fungsional dalam injeksi ketergantungan:
Dalam mode injeksi ketergantungan, semua komponen harus melewati wadah untuk mengakses satu sama lain, yang mengarah pada fakta bahwa di AngularJS, Anda harus menggunakan perantara untuk mendapatkan objek instance komponen:
var injector = angular.Injector (['ng']); injector.invoke (fungsi ($ http) {// do sth. dengan $ http});Perantara ini adalah wadah dalam mode injeksi ketergantungan. Dalam AngularJS, itu disebut: injektor.
Dalam contoh → _ →, kita dapat melihat bahwa kita telah mendapatkan objek $ http, yang sebenarnya merupakan fungsi.
Injektor/injektor
Injektor adalah kunci untuk implementasi kerangka kerja AngularJS dan pengembangan aplikasi, yang merupakan implementasi wadah DI/IOC.
AngularJS membagi fungsi menjadi berbagai jenis komponen dan mengimplementasikannya secara terpisah. Komponen -komponen ini memiliki nama kolektif - penyedia/penyedia. Gambar berikut mencantumkan beberapa layanan bawaan yang umum digunakan untuk AngularJS:
Komponen AngularJS tidak dapat dipanggil langsung dari satu sama lain. Satu komponen harus melewati injektor untuk memanggil komponen lain. Manfaat ini adalah bahwa komponen dipisahkan satu sama lain, dan manajemen seluruh siklus hidup objek dilemparkan ke injektor.
Injektor mengimplementasikan dua fungsi penting:
Resep Store secara terpusat untuk semua penyedia
Resepnya sebenarnya: nama + konstruktor kelas. Ketika AngularJS dimulai, penyedia ini pertama kali terdaftar di injektor menggunakan resep mereka. Misalnya, komponen layanan permintaan HTTP dienkapsulasi dalam kelas $ httpprovider, dan terdaftar di injektor melalui nama '$ http'.
Memberikan contoh komponen fungsional sesuai permintaan
Komponen lain, seperti pengontrol pengguna, jika Anda perlu menggunakan fungsi HTTP, gunakan nama '$ http' untuk meminta injektor, Anda bisa mendapatkan instance layanan HTTP.
Cobalah untuk memodifikasi kode → _ → untuk melihat apa layanan $ kompilasi?
Daftar Komponen Layanan
Dari perspektif injektor, komponen adalah penyedia fungsi, jadi itu disebut penyedia/penyedia. Dalam AngularJS, penyedia dienkapsulasi dalam bentuk kelas JavaScript (konstruktor).
Nama layanan biasanya diidentifikasi oleh string, seperti '$ http' untuk layanan panggilan http, '$ rootscope' untuk objek lingkup root, '$ compile' untuk layanan kompilasi ...
Kelas penyedia membutuhkan fungsi $ get (pabrik kelas). Dengan memanggil fungsi ini, injektor dapat memperoleh contoh komponen layanan.
Informasi kombinasi nama dan fungsi kelas disebut resep. Injektor memelihara perpustakaan resep terpusat untuk membuat komponen yang berbeda sesuai permintaan. Perpustakaan resep ini sebenarnya adalah objek hash, kunci adalah nama layanan, dan nilainya adalah definisi kelas.
Dalam contoh → _ →, kami mendefinisikan kelas layanan sederhana, dan contoh kelas layanan ini adalah string: "Halo, dunia!". Kami menggunakan 'Ezhello' sebagai nama layanannya untuk mendaftar di injektor dan menampilkan instance ini melalui injektor.
Dapatkan objek injektor
Untuk menggunakan fungsionalitas AngularJS, Anda harus terlebih dahulu mendapatkan injektor. Ada dua cara untuk mendapatkan injektor.
Buat injektor baru
Anda dapat membuat injektor baru menggunakan Angular.Injector ():
Angular.Injector (Modul, [Strictdi]); Dapatkan injektor yang sudah dibuat
Jika kerangka kerja AngularJS telah dimulai, Anda dapat menggunakan metode injektor () dari objek DOM untuk mendapatkan injektor yang sudah dibuat:
var elemen = angular.element (dom_element);
var injector = element.Injector ();
Memanggil API melalui injektor
Injektor memiliki dua metode untuk panggilan API: Invoke () dan get ().
memohon()
Menggunakan metode Invoke () dari injektor, Anda dapat secara langsung memanggil badan fungsi yang ditentukan pengguna dan menyuntikkan objek layanan dependen melalui parameter fungsi. Ini adalah penggunaan rekomendasi dan konvensi AngularJS:
Angular.Injector (['ng']). Invoke (function ($ http) {// do sth. Dengan $ http}); mendapatkan()Anda juga dapat menggunakan metode GET () dari injektor untuk mendapatkan instance layanan dengan nama yang ditentukan:
var my $ http = angular.Injector (['ng']). get ('$ http'); // do sth. dengan $ http saya→ _ → Contoh kali ini, saya menggunakan metode get () untuk secara langsung mendapatkan instance layanan dan merasakannya!
Metode dan prinsip injeksi
Ada dua cara untuk menginformasikan injektor objek layanan yang perlu disuntikkan: injeksi nama parameter dan injeksi array ketergantungan.
Injeksi nama parameter
Ketika AngularJS menjalankan fungsi Invoke (), ia mengubah definisi fungsi yang akan disuntikkan ke dalam string, memeriksa tabel parameternya melalui ekspresi reguler, dan dengan demikian menemukan dan menyuntikkan objek layanan yang tergantung pada:
// myfunc menyatakan fungsi ini untuk bergantung pada layanan '$ http' var myfunc = fungsi ($ http) {// do sth. dengan $ http}; injector.invoke (myfunc); // definisi myfunc akan dikonversi menjadi string untuk memeriksa nama parameter.Ada masalah dengan ini, yaitu, ketika kita mengompres kode JavaScript, $ http dapat diubah menjadi nama lain, yang akan menyebabkan injeksi gagal.
Bergantung pada suntikan array
AngularJS menggunakan metode array ketergantungan untuk menyelesaikan masalah yang disebabkan oleh kebingungan kompresi kode. Pada saat ini, Invoke () diteruskan ke dalam array. Item terakhir dari array adalah fungsi yang benar -benar dieksekusi, dan item lainnya menunjukkan nama layanan yang perlu disuntikkan ke dalam fungsi. Injektor akan menyuntikkan objek yang bergantung ke fungsi dalam urutan dalam array.
Dengan metode ini, nama tabel parameter yang akan disuntikkan tidak relevan:
// myfunc tergantung pada '$ http' dan '$ compile' layanan var myfunc = ['$ http', '$ compile', function (p1, p2) {// do sth. dengan p1 ($ http), p2 ($ compile)}]; injector.invoke (myfunc);Contoh → _ → disuntikkan dengan metode yang bergantung pada array. Kali ini, instance layanan Ezhello disuntikkan. Anda dapat mengubah nama parameter untuk melihat apakah itu mempengaruhi hasilnya?
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.