Penjelasan terperinci tentang kaedah Modul AngularJS_AngularJS

Apakah AngularJS?

AngularJs (selepas ini dirujuk sebagai ng) ialah rangka kerja struktur untuk mereka bentuk aplikasi web dinamik. Pertama sekali, ia adalah rangka kerja, bukan perpustakaan kelas Seperti EXT, ia menyediakan satu set lengkap penyelesaian untuk mereka bentuk aplikasi web. Ia lebih daripada sekadar rangka kerja javascript, kerana terasnya sebenarnya adalah peningkatan tag HTML.

Apakah peningkatan teg HTML? Malah, ia membolehkan anda menggunakan teg untuk melengkapkan sebahagian daripada logik halaman Kaedah khusus adalah melalui teg tersuai, atribut tersuai, dsb. Teg/atribut ini yang bukan asli kepada HTML mempunyai nama dalam arahan ng:. Lebih lanjut mengenai ini kemudian. Jadi, apakah itu aplikasi web dinamik? Berbeza daripada sistem web tradisional, aplikasi web boleh menyediakan pengguna dengan operasi yang kaya dan boleh mengemas kini paparan secara berterusan dengan operasi pengguna tanpa lompatan url. ng official juga menyatakan bahawa ia lebih sesuai untuk membangunkan aplikasi CRUD, iaitu aplikasi dengan lebih banyak operasi data, berbanding permainan atau aplikasi pemprosesan imej.

Untuk mencapai matlamat ini, ng telah memperkenalkan beberapa ciri hebat, termasuk mekanisme templat, pengikatan data, modul, arahan, suntikan pergantungan dan penghalaan. Melalui pengikatan data dan templat, kami boleh menyingkirkan operasi DOM yang membosankan dan menumpukan pada logik perniagaan.

Soalan lain, adakah rangka kerja MVC? Atau rangka kerja MVVM? Laman web rasmi menyebut bahawa reka bentuk ng menggunakan idea asas MVC, tetapi ia tidak sepenuhnya MVC, kerana semasa menulis kod, kami sememangnya menggunakan arahan pengawal ng (sekurang-kurangnya dari namanya, ia adalah MVC ), tetapi ini Perniagaan yang dikendalikan oleh pengawal pada dasarnya berinteraksi dengan pandangan, yang nampaknya sangat dekat dengan MVVM. Marilah kita beralih perhatian kepada tajuk yang tidak menarik perhatian tapak web rasmi: "AngularJS — Rangka Kerja MVW JavaScript Superheroik".

Kelas Modul dalam AngularJS bertanggungjawab untuk menentukan cara aplikasi dimulakan. Ia juga boleh mentakrifkan pelbagai serpihan dalam aplikasi melalui pengisytiharan. Mari kita lihat bagaimana ia melaksanakan fungsi ini.

1. Di manakah kaedah Utama

Jika anda datang dari bahasa pengaturcaraan Java atau Python, maka anda mungkin ingin tahu di mana kaedah utama dalam AngularJS? Di manakah kaedah yang memulakan segala-galanya dan dilaksanakan terlebih dahulu? Di manakah kaedah dalam kod JavaScript yang membuat seketika dan meletakkan semuanya bersama-sama dan kemudian mengarahkan aplikasi untuk mula berjalan?

Sebenarnya, AngularJS tidak mempunyai kaedah utama AngularJS menggunakan konsep modul untuk menggantikan kaedah utama. Modul membolehkan kami menerangkan secara deklaratif kebergantungan dalam aplikasi dan cara memasang dan memulakannya. Sebab untuk menggunakan kaedah ini adalah seperti berikut:

1. Modul adalah deklaratif. Ini bermakna lebih mudah untuk menulis dan lebih mudah difahami - membacanya sama seperti membaca bahasa Inggeris biasa!

2. Ia adalah modular. Ini memaksa anda untuk berfikir tentang cara untuk menentukan komponen dan kebergantungan anda, menjadikannya lebih jelas.

3. Ia menjadikan ujian lebih mudah. Dalam ujian unit, anda boleh menambah modul secara terpilih dan mengelakkan kandungan dalam kod yang tidak boleh diuji unit. Pada masa yang sama, dalam ujian senario, anda boleh memuatkan modul tambahan lain supaya ia boleh berfungsi dengan lebih baik dengan komponen lain.

Sebagai contoh, terdapat modul yang dipanggil "MyAwesomeApp" dalam aplikasi kami. Dalam HTML, hanya tambahkan yang berikut pada teg (atau secara teknikal, pada mana-mana teg):

Salin kod Kod adalah seperti berikut:

Arahan ng-app akan memberitahu AngularJS untuk menggunakan modul MyAwesomeApp untuk melancarkan aplikasi anda. Jadi, bagaimanakah modul harus ditakrifkan? Sebagai contoh, kami mengesyorkan agar anda menentukan modul berasingan untuk perkhidmatan, arahan dan penapis. Modul utama anda kemudiannya boleh mengisytiharkan kebergantungan pada modul ini.

Ini menjadikan pengurusan modul lebih mudah, kerana semuanya bagus, blok kod lengkap, dan setiap modul mempunyai satu dan hanya satu fungsi. Pada masa yang sama, ujian unit hanya boleh memuatkan modul yang mereka fokuskan, jadi bilangan permulaan boleh dikurangkan dan ujian unit akan menjadi lebih halus dan fokus.

2. Memuatkan dan kebergantungan

Tindakan pemuatan modul berlaku dalam dua peringkat berbeza, yang boleh dicerminkan daripada nama fungsi Ia adalah blok kod konfigurasi dan blok kod Jalankan (atau dipanggil peringkat).

1.Konfigurasi blok kod

Dalam peringkat ini, AngularJS akan menyambung dan mendaftar semua sumber data. Oleh itu, hanya sumber data dan pemalar boleh disuntik ke dalam blok Config. Perkhidmatan yang tidak pasti sama ada ia telah dimulakan tidak boleh disuntik.

2. Jalankan blok kod

Blok kod Run digunakan untuk memulakan aplikasi anda dan memulakan pelaksanaan selepas penyuntik dibuat. Untuk mengelak daripada mengkonfigurasi sistem selepas titik ini, hanya contoh dan pemalar boleh disuntik ke dalam blok Run. Anda akan mendapati bahawa dalam AngularJS, blok Run adalah perkara yang paling serupa dengan kaedah utama.

3. Kaedah pantas

Apa yang boleh anda lakukan dengan modul? Kami boleh menggunakannya untuk membuat instantiate pengawal, arahan, penapis dan perkhidmatan, tetapi banyak lagi yang boleh anda lakukan dengan kelas modul. Kaedah API dikonfigurasikan seperti berikut:

1.config(configFn)

Anda boleh menggunakan kaedah ini untuk melakukan beberapa kerja pendaftaran, yang perlu diselesaikan apabila modul dimuatkan.

2.malar(nama, objek)

Kaedah ini akan dijalankan dahulu, jadi anda boleh menggunakannya untuk mengisytiharkan pemalar seluruh aplikasi dan menjadikannya tersedia dalam semua kaedah konfigurasi (kaedah konfigurasi) dan contoh (semua kaedah berikutnya, seperti pengawal, perkhidmatan, dll.) kaedah .

3.pengawal(nama,pembina)

Fungsi asasnya adalah untuk mengkonfigurasi pengawal untuk kegunaan kemudian.

4.directive(nama,directiveFactory)

Anda boleh menggunakan kaedah ini untuk membuat arahan dalam apl anda.

5.filter(nama,filterFactory)

Membolehkan anda mencipta penapis AngularJS bernama, seperti yang dibincangkan dalam bahagian sebelumnya.

6.run(initializationFn)

Anda boleh menggunakan kaedah ini jika anda ingin melakukan beberapa tindakan selepas penyuntik dimulakan, tetapi tindakan ini perlu dilakukan sebelum halaman tersedia kepada pengguna.

7.value(nama,objek)

- Membenarkan nilai disuntik sepanjang aplikasi.

8.kilang(nama,kilangFn)

Jika anda mempunyai kelas atau objek dan perlu menyediakannya dengan beberapa logik atau parameter sebelum ia boleh dimulakan, maka anda boleh menggunakan antara muka kilang di sini. Kilang ialah fungsi yang bertanggungjawab untuk mencipta beberapa nilai tertentu (atau objek). Mari lihat contoh fungsi penyambut Fungsi ini memerlukan ucapan untuk memulakan:

function Greeter(salutation) {
 this.greet = function(name) {
 return salutation + ' ' + name;
};
}

Contoh fungsi penyambut adalah seperti berikut:

myApp.factory('greeter', function(salut) {
 return new Greeter(salut);
});

Kemudian anda boleh memanggilnya seperti ini:

var myGreeter = greeter('Halo');

9.service(nama,objek)

Perbezaan antara kilang dan perkhidmatan ialah kilang akan memanggil terus fungsi yang diserahkan kepadanya, dan kemudian mengembalikan hasil pelaksanaan manakala perkhidmatan akan menggunakan kata kunci "baharu" untuk memanggil pembina yang dihantar kepadanya, dan kemudian Kembalikan hasil. Oleh itu, Kilang penyambut sebelumnya boleh digantikan dengan Perkhidmatan penyambut berikut:

myApp.service('greeter', Greeter);

每当我们需要一个greeter实例的时候，AngularJS就会调用新的Greeter()来返回一个实例。

10.provider(name,providerFn)

provider是这几个方法中最复杂的部分（显然，也是可配置性最好的部分）。provider中既绑定了factory也绑定了service，并且在注入系统准备完毕之前，还可以享受到配置provider函数的好处（也就是config块）。

我们来看看使用provider改造之后的greeter Service是什么样子：

myApp.provider('greeter', function() {
 var salutation = 'Hello';
 this.setSalutation = function(s) {
 salutation = s;
}
 function Greeter(a) {
 this.greet = function() {
 return salutation + ' ' + a;
}
}
 this.$get = function(a) {
 return new Greeter(a);
};
});

这样我们就可以在运行时动态设置问候语了（例如，可以根据用户使用的不同语言进行设置）。

var myApp = angular.module(myApp, []).config(function(greeterProvider) {
greeterProvider.setSalutation('Namaste');
});