1. Injeksi ketergantungan
Injeksi Ketergantungan (DI) adalah pola desain perangkat lunak yang berkaitan dengan bagaimana kode mendapatkan sumber daya yang diandalkan.
Untuk diskusi yang lebih dalam tentang DI, Anda dapat mengunjungi injeksi ketergantungan (http://en.wikipedia.org/wiki/dependency_ynection), inversi kontrol (http://martinfowler.com/articles/Injection.html), atau Anda dapat mengunjungi buku tentang pola desain perangkat lunak.
1. Di Singkatnya (Cukup Berbicara Di)
Objek atau fungsi hanya dapat memperoleh sumber daya yang mereka andalkan dalam tiga cara berikut:
1) Anda dapat membuat sumber daya dependen melalui operator baru.
2) Anda dapat menemukan sumber daya dependen melalui variabel global.
3) Sumber daya dependen dapat dilewatkan melalui parameter.
Kedua metode 1 dan 2 bukan yang terbaik, karena mereka membuat kode dependensi, yang membuatnya bukan tidak mungkin untuk memodifikasi dependensi, tetapi akan menjadi lebih rumit. Ini terutama menjadi masalah untuk pengujian, dan biasanya ketika pengujian secara mandiri, diinginkan untuk memberikan ketergantungan tiruan.
Metode ketiga relatif paling layak karena menghilangkan tanggung jawab menemukan ketergantungan dari komponen. Reliance hanya diserahkan kepada komponen.
function someclass (sreapher) {this.greeter = sreapher} someclass.prototype.dosomething = function (name) {this.greeter.greet (name);}Dalam contoh di atas, someclass tidak perlu peduli menemukan ketergantungan penyambut, itu hanya melewati penyambut saat runtime.
Ini lebih tepat, tetapi meninggalkan tanggung jawab untuk mendapatkan sumber daya ketergantungan ke kode yang bertanggung jawab untuk membangun someclass.
Untuk mengelola tanggung jawab untuk membuat dependensi, setiap aplikasi sudut memiliki injektor (http://code.angularjs.org/1.0.2/docs/api/angular.injector). Injektor adalah pencari layanan yang bertanggung jawab untuk menemukan dan menciptakan sumber daya yang bergantung.
Permintaan dependensi, memecahkan masalah kode keras, tetapi itu berarti bahwa injektor perlu dijalankan melalui seluruh aplikasi. Lewat injektor akan menghancurkan Law of Demeter (http://baike.baidu.com/view/823220.htm). Untuk memperbaiki masalah ini, kami mentransfer tanggung jawab untuk pencarian ketergantungan ke injektor.
Saya telah mengatakan begitu banyak di atas. Lihatlah contoh -contoh yang telah saya modifikasi di bawah ini. Saya telah menggabungkan dua contoh teks asli, menggunakan suntikan di dalam dan di luar sudut:
<! Doctype html> <html lang = "zh-cn" ng-app = "MainApp"> <head> <meta charset = "utf-8"> <itement> injektor </iteme> </head> <body> <v ng-controller = "mycontroller"> <button ng-click = "sayhello () <e wee" </wee controller "> </sayscroller"> <preps/Saytrollo (myCholler "> <preps ng-controller =" myController "> src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> // Buat modul OtherModule, yang setara dengan modul eksternal var OtherModule = angular.module ("OtherModule", []); // Teach Injector Cara Membuat "Penyambut" // Perhatikan bahwa Penyambut itu sendiri perlu mengandalkan $ window OtherModule.Factory ("Greek", Function ($ window) {// Ini adalah metode pabrik, bertanggung jawab untuk membuat layanan salam pengembalian {salam: teks) {$ window.alert (teks);}};};}); // Berikut ini menunjukkan bahwa dalam modul non-arus, panggil metode salam melalui injektor: // Buat injektor baru dari modul // langkah ini biasanya dilakukan secara otomatis ketika sudut dimulai. // 'ng', hal -hal sudut harus diperkenalkan // Urutan sengaja dibalik, dan sementara dikonfirmasi bahwa urutan hal ini tidak masalah. . var injector = angular.Injector (['OtherModule', 'ng']); // Minta ketergantungan penyambut. var g = injector.get ("salam"); // Sebut saja ~ g.greet ("Hai ~ dada kecilku ~"); // Ini adalah aplikasi utama saat ini, dan Anda harus mengandalkan OtherModule var MainApp = Angular.module ("MainApp", ["OtherModule"]); // Perhatikan parameter fungsi definisi pengontrol, dan secara langsung menyuntikkan $ SCOPE dan Salam di sini. // Layanan penyambut adalah Mainapp.Controller ("myController", function mycontroller ($ scope, greeker) {$ scope.sayhello = function () {sore.greet ("Hello Kitty ~~");};}); // ng-controller telah melakukan hal ini secara diam-diam di belakang layar //injector.instantiate(mycontroller); </script> </body> </html>Perhatikan bahwa karena ada NG-Controller, MyController diinisialisasi, ia dapat memenuhi semua dependensi MyController, sehingga MyController tidak perlu mengetahui keberadaan injektor. Ini adalah hasil terbaik. Kode aplikasi hanya meminta dependensi yang dibutuhkan tanpa menangani injektor. Pengaturan ini tidak akan melanggar hukum Demeter.
2. Anotasi ketergantungan (komentar ketergantungan, menjelaskan cara ketergantungan)
Bagaimana injektor tahu layanan apa yang perlu disuntikkan?
Pengembang aplikasi perlu memberikan informasi anotasi yang digunakan oleh injektor sebagai solusi untuk dependensi. Semua fungsi API yang ada di sudut merujuk pada injektor, dan ini adalah kasus dengan API yang disebutkan dalam setiap dokumen. Berikut adalah tiga cara yang setara untuk memberi anotasi kode kami dengan informasi nama layanan.
1. Menyimpulkan dependensi
Ini adalah cara termudah untuk mendapatkan sumber daya dependen, tetapi perlu untuk mengasumsikan bahwa nama parameter fungsi konsisten dengan nama sumber daya dependen.
function mycontroller ($ scope, greinger) {...}Injektor suatu fungsi dapat menebak nama layanan yang perlu disuntikkan (functionName.tostring (), regexp) dengan memeriksa definisi fungsi dan mengekstraksi nama fungsi. Dalam contoh di atas, $ SCOPE dan GREESTER adalah dua layanan yang perlu disuntikkan ke dalam fungsi (nama juga sama).
Meskipun ini sederhana, metode ini tidak akan berfungsi setelah kompresi pengayaan JavaScript, karena nama parameter akan diubah. Ini membuat metode ini hanya berguna untuk pretotyping (metode uji simulasi prototipe kegunaan produk, http://www.cartotyping.org/, http://tech.qq.com/a/20120217/000320.htm) dan aplikasi demo.
2. $ Suntikan Anotasi ($ Suntikan Komentar)
Untuk mengizinkan kompresor skrip untuk mengganti nama metode fungsi dan masih dapat menyuntikkan layanan yang benar, fungsi harus mengomentari ketergantungan melalui properti $ injeksi. Properti $ injeksi adalah array dari nama -nama layanan yang perlu disuntikkan.
var mycontroller = fungsi (berganti nama $ scope, renamedgreeter) {...} // Jika hal yang tergantung di sini tidak ada dalam modul saat ini, ia masih tidak mengenalinya. // Anda harus terlebih dahulu mengandalkan modul yang sesuai dalam modul saat ini. Ini mirip dengan contoh sebelumnya. Tapi saya tidak tahu apakah ini cara yang benar.
Mycontroller. $ Inject = ['$ scope', 'greinger'];
Seharusnya berhati -hati bahwa urutan $ suntikan harus konsisten dengan urutan argumen yang dinyatakan oleh fungsi tersebut.
Metode anotasi ini berguna untuk deklarasi pengontrol karena menentukan informasi anotasi dengan fungsi tersebut.
3. Anotasi inline (komentar inline)
Terkadang, tidak nyaman untuk menggunakan metode anotasi $ suntikan, seperti saat berkomentar secara langsung.
Misalnya:
somemodule.factory ('sore', function ($ window) {...;});Karena variabel sementara diperlukan (mencegahnya tidak dapat digunakan setelah kompresi), kode akan kembung sebagai:
var wreeterfactory = function (ganti nama $ window) {...;}; wreekherfactory. $ inject = ['$ window']; somemodule.factory ('greeker', wreekerfactory);Karena ini (kode kembung), Angular juga menyediakan gaya komentar ketiga:
somemodule.factory ('sore', ['$ window', function (ganti nama $ window) {...;}]);Ingatlah bahwa semua gaya komentar setara dan dapat digunakan di mana saja dalam sudut yang mendukung injeksi.
3. Di mana saya bisa pengguna DI?
Di seluruh sudut. Biasanya digunakan dalam metode pengontrol dan pabrik.
1. Di dalam pengontrol
Pengontrol adalah kelas yang bertanggung jawab untuk perilaku aplikasi (menggambarkan). Metode deklarasi pengontrol yang disarankan adalah:
var mycontroller = function (dep1, dep2) {...} mycontroller. $ inject = ['dep1', 'dep2']; mycontroller.prototype.amethod = function () {...}2. Metode pabrik
Metode pabrik bertanggung jawab untuk membuat sebagian besar objek sudut. Misalnya, arahan, layanan, filter. Metode pabrik terdaftar dalam modul. Metode deklarasi pabrik yang disarankan adalah:
angualar.module ('mymodule', []). config (['depprovider', function (depprovider) {...}]). factory ('serviceId', ['depservice', function (depservice) {...}]). Directive ('DirectiveName', ['DepService', Function (DepService) {...}]). filter ('filtername', ['depservice', function (depservice) {...}]);Di atas adalah ringkasan informasi injeksi ketergantungan AngularJS. Terima kasih atas dukungan Anda untuk situs ini!