Baru -baru ini saya membaca panduan AngularJS otoritatif. Karena berbagai alasan (terutama karena saya tidak punya uang, saya benci, jadi saya memilih untuk mengunduh versi elektronik secara online (karena tidak memerlukan biaya uang, haha ...). Font cukup jelas dan efek keseluruhannya cukup bagus. Namun, ketika saya melihat jumlah halaman total di bagian kiri atas, 479 halaman yang ditembakan? Belajar tetapi tidak ingin mempelajari nomor halaman tetapi tidak ingin mempelajarinya?
Untungnya, sebelum membaca e-book, saya sedikit mendasar. Saya telah belajar sedikit waktu menonton video, dari data dua arah yang mengikat ke layanan, dan kemudian ke sistem instruksi, saya memiliki lebih atau kurang kontak. Selain itu, selama penugasan pemilihan kursus khusus Web, sistem manajemen kelas siswa yang sederhana dibangun melalui AngularJS di ujung depan dan nodeJs di backend dan mongoose di backend. Karena saya tidak punya uang, saya hanya bisa menempatkannya di GitHub. Alamat GitHub: Sistem Manajemen Siswa, Selamat Datang di Fork, mari kita ke topik di bawah ini ...
================================================================================================================================================================
Biasanya ada tiga cara agar suatu objek mendapatkan kendali atas ketergantungannya:
(1) membuat dependensi secara internal;
(2) referensi melalui variabel global;
(3) Lewati parameter jika diperlukan.
Injeksi ketergantungan dicapai dengan cara ketiga. Dua metode lainnya akan membawa berbagai masalah, seperti mencemari ruang lingkup global, membuat isolasi sangat sulit, dll. Injeksi ketergantungan adalah pola desain yang menghilangkan ketergantungan yang dikodekan dengan keras, sehingga dependensi dapat diubah atau bahkan dihapus saat runtime.
Kemampuan untuk memodifikasi dependensi saat runtime sangat ideal untuk pengujian karena memungkinkan kita untuk menciptakan lingkungan yang terisolasi di mana objek yang diejek dapat digunakan sebagai pengganti objek nyata di lingkungan produksi.
Dari perspektif fungsional, injeksi ketergantungan akan secara otomatis menemukan ketergantungan terlebih dahulu dan menginformasikan sumber daya dependen dari target injeksi, sehingga sumber daya dapat disuntikkan segera ketika target membutuhkannya.
Saat menulis komponen yang bergantung pada objek atau perpustakaan lain, kita perlu menggambarkan ketergantungan antara komponen. Selama runtime, injektor menciptakan contoh ketergantungan dan bertanggung jawab untuk menyerahkannya kepada konsumen yang tergantung.
// Excellent example from Angular documentation function SomeClass(greeter) {this.greeter = greeter;}SomeClass.prototype.greetName = function(name) {this.greeter.greet(name);};//Note that the sample code creates a controller on the global scope, which is not a good idea, it is just for the convenience of the demonstration.Someclass dapat mengakses penyambut internal saat runtime, tetapi tidak peduli bagaimana mendapatkan referensi ke penyambut. Untuk mendapatkan referensi ke instance penyambut, pencipta someclass bertanggung jawab untuk membangun ketergantungannya dan meneruskannya.
Untuk alasan di atas, AngularJS menggunakan $ cedera (layanan injektor) untuk mengelola pertanyaan dan instantiasi dependensi. Faktanya, $ Injetor bertanggung jawab untuk instantiasi semua komponen di AngularJS, termasuk modul aplikasi, instruksi, dan pengontrol.
Pada saat runtime, $ Injetor bertanggung jawab untuk membuat instantiasi modul apa pun saat dimulai dan melewati semua dependensi yang dibutuhkan.
Misalnya, kode berikut. Ini adalah aplikasi sederhana yang menyatakan modul dan pengontrol:
angular.module ('myApp', []). factory ('greinger', function () {return {salam: function (msg) {waspada (msg);}}). controller ('mycontroller', function ($ scope, greeker) {$ scope.sayhello = function () {quake);Ketika AngularJS membuat modul ini, ia mencari penyambut dan secara alami meneruskan referensi untuk itu:
<div ng-app = "myapp"> <div ng-controller = "mycontroller"> <tombol ng-click = "sayhello ()"> halo </button> </div> </div>
Secara internal, proses pemrosesan AngularJS adalah sebagai berikut:
// Gunakan injektor untuk memuat aplikasi var injector = angular.Injector (['ng', 'myapp']); // Muat layanan $ pengontrol melalui injektor var $ controller = injektor.get ('$ controller'); // Muat pengontrol dan lewati dalam cakupan, seperti yang dilakukan AngularJS pada runtime var scope =. MyController = $ controller ('mycontroller', {$ scope: scope});Kode di atas tidak menentukan bagaimana menemukan penyambut, tetapi berfungsi dengan baik karena $ injektor akan bertanggung jawab untuk menemukan dan memuatnya untuk kita.
AngularJS mengekstrak daftar parameter dari fungsi yang ditularkan selama instantiasi melalui fungsi anotasi. Masukkan kode berikut ke alat pengembang Chrome untuk melihat fungsi ini:
> injector.annotate (fungsi ($ q, sore) {}) ["$ q", "sore"]Dalam aplikasi AngularJS apa pun, $ injektor berfungsi, apakah kita tahu atau tidak. Saat menulis pengontrol, jika tidak ada tag yang digunakan atau deklarasi eksplisit, $ injektor mencoba untuk menyimpulkan dependensi berdasarkan nama parameter.
Pernyataan injeksi yang disimpulkan
Jika tidak ada deklarasi eksplisit, AngularJS mengasumsikan bahwa nama parameter adalah nama ketergantungan. Oleh karena itu, secara internal akan memanggil metode ToString () dari objek fungsi, menganalisis dan mengekstrak daftar parameter fungsi, dan menyuntikkan parameter ini ke dalam instance objek melalui $ injektor. Proses injeksi adalah sebagai berikut:
injector.invoke (fungsi ($ http, sore) {});Perhatikan bahwa proses ini hanya berlaku untuk kode yang tidak terkompresi dan dikaburkan, karena AngularJS membutuhkan daftar parameter yang tidak terkompresi mentah untuk penguraian. Dengan proses menyimpulkan berdasarkan nama parameter, urutan parameter tidak signifikan, karena AngularJs akan membantu kita menyuntikkan sifat dalam urutan yang benar.
Secara eksplisit menyuntikkan deklarasi
AngularJS menyediakan metode eksplisit untuk mendefinisikan secara jelas ketergantungan yang perlu digunakan suatu fungsi saat dipanggil. Mendeklarasikan dependensi dengan cara ini masih dapat berfungsi dengan baik bahkan jika kode sumber dikompresi dan nama parameter berubah. Properti $ injeksi dapat digunakan untuk mengimplementasikan fungsi injeksi deklarasi eksplisit. Properti $ suntikan dari objek fungsi adalah array, jenis elemen array adalah string, dan nilainya adalah nama layanan yang perlu disuntikkan.
Ini kode sampelnya:
var acontrollerFactory = function acontroller ($ scope, greinger) {console.log ("Loaded controller", sore); // ... controller}; acontrollerFactory. $ inject = ['$ scope', 'greek']; // Console Service Console.log ("Layanan Penyambut");} // Pengontrol Aplikasi kami Angular.Module ('MyApp', []). Controller ('MyController', AcontrollerFactory). Factory ('Greek', Greeterservice); // Dapatkan Injector dan Buat New Injeksi ('GreingerService); = injector.get ('$ controller'), rootscope = injector.get ('$ rootscope'), newscope = rootscope. $ new (); // call controller ('mycontroller', {$ scope: newscope});Untuk metode deklarasi ini, urutan parameter sangat penting, karena urutan elemen array $ injeksi harus sesuai satu per satu dengan urutan parameter yang disuntikkan. Metode deklarasi ini dapat dijalankan dalam kode terkompresi karena informasi yang relevan dari deklarasi sudah terikat pada fungsi itu sendiri.
Pernyataan injeksi intra-line
Cara terakhir untuk menyuntikkan deklarasi yang disediakan oleh AngularJS adalah deklarasi injeksi inline yang dapat digunakan kapan saja. Metode ini sebenarnya adalah gula sintaksis, yang persis sama dengan prinsip yang disebutkan di atas untuk menyuntikkan deklarasi melalui properti $ suntikan, tetapi memungkinkan kita untuk melewati parameter dari dalam garis ketika fungsi ditentukan. Selain itu, ia menghindari penggunaan variabel sementara selama proses definisi.
Saat mendefinisikan objek AngularJS, deklarasi in-line memungkinkan kita untuk melewati array parameter secara langsung alih-alih suatu fungsi. Unsur -unsur array adalah string, yang mewakili nama -nama dependensi yang dapat disuntikkan ke dalam objek. Parameter terakhir adalah objek objek itu sendiri dari injeksi ketergantungan.
Contohnya adalah sebagai berikut:
angular.module ('myApp'). controller ('mycontroller', ['$ scope', 'greinger', function ($ scope, greinger) {}]);Karena apa yang perlu diproses adalah daftar string, deklarasi injeksi inline juga dapat berjalan secara normal dalam kode terkompresi. Biasanya digunakan oleh tanda kurung dan simbol [] yang menyatakan array.
Injeksi ketergantungan AngularJS di atas adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.