1. Apa itu modul?
Banyak aplikasi memiliki metode utama untuk inisialisasi, pemuatan (apakah kabel berarti?) Dan meluncurkan aplikasi. Aplikasi Angular tidak memerlukan metode utama. Sebagai gantinya, Modul menyediakan formulir deklaratif dengan tujuan tertentu, deskripsi deskriptif tentang bagaimana aplikasi dimulai. Ada beberapa keuntungan untuk melakukan ini:
2. Dasar -dasar
Kami sangat ingin tahu cara membuat modul Hello World berfungsi. Berikut adalah beberapa hal penting yang harus diperhatikan:
Modul API (http://code.angularjs.org/1.0.2/docs/api/angular.module)
Perhatikan modul MYAPP yang disebutkan dalam <html ng-app = "myApp">, yang memungkinkan peluncur memulai modul MYAPP yang kami tentukan.
<! Doctype html> <html lang = "zh-cn" ng-app = "myApp"> <adap> <meta charset = "utf-8"> <title> dasar </itement> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <div> {{'kitty' | Salam}} </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var simplemodule = angular.module ("myapp", []); SimpleMoDule.filter ("salam", function () {return function (name) {return "hello" + name + "!";}}); </script> </body> </html>3. (pengaturan yang disarankan) pengaturan yang disarankan
Meskipun contoh di atas sederhana, ini bukan aplikasi skala besar. Kami merekomendasikan pemisahan aplikasi Anda menjadi beberapa modul sebagai berikut:
Alasan pembagian ini adalah bahwa ketika kita menguji, kita sering perlu mengabaikan kode inisialisasi yang membuat tes sulit. Dengan membagi kode menjadi modul terpisah, mudah untuk mengabaikan kode itu dalam tes. Dengan cara ini, kita dapat lebih fokus pada pemuatan modul yang sesuai untuk pengujian.
Di atas hanyalah sebuah saran, Anda bisa membuatnya seperti yang Anda inginkan.
4. Modul pemuatan & dependensi (pemuatan modul dan dependensi)
Modul adalah kumpulan konfigurasi yang menjalankan blok yang diterapkan dalam proses memulai aplikasi. Dalam bentuknya yang paling sederhana, ini terdiri dari dua jenis blok:
1. Blok Konfigurasi: Dieksekusi selama proses pendaftaran dan konfigurasi penyedia. Hanya penyedia dan konstan (konstan?) Yang dapat disuntikkan ke blok konfigurasi. Ini untuk menghindari kecelakaan bahwa layanan dijalankan sebelum layanan dikonfigurasi.
2. Jalankan Blok: Jalankan setelah injektor dibuat dan digunakan untuk memulai aplikasi. Hanya contoh dan konstanta yang dapat disuntikkan ke blok lari. Ini untuk menghindari eksekusi konfigurasi sistem lebih lanjut selama operasi program.
angular.module ('mymodule', []). config (function (injectable) {// penyedia-injector // Berikut ini adalah contoh blok konfigurasi // kita bisa mendapatkan n hal-hal seperti yang diperlukan // kita dapat menyuntikkan penyedia (bukan instance, bukan instance) ke dalam blok konfigurasi}). run (function (injectable) {// instance-injector // Berikut adalah contoh run block // kita bisa mendapatkan n hal-hal seperti yang diperlukan // kita hanya dapat menyuntikkan instance (instance) (bukan penyedia) ke dalam blok run});a) Blok konfigurasi
Ada cara yang nyaman untuk melakukannya dalam modul, yang setara dengan blok konfigurasi. Misalnya:
angular.module ('mymodule', []). nilai ('A', 123). factory ('a', function () {return 123;}). Directive ('DirectiveName', ...). filter ('filtername', ...); // setara dengan angular.module ('mymodule', []). config (function ($ invice, $ compileProvider, $ filterprovider) {$ astance.value ('a', 123) $ astancy.factory ('a', function () {return 123;}) $ compileProvider.directive ('DirectVERame', ...). $ filterprovider.register ('Filinname', ...););); $ filterprovider.register ('filternname');Urutan di mana blok konfigurasi diterapkan konsisten dengan urutan di mana mereka terdaftar. Untuk definisi konstan, ini adalah kasus tambahan, yaitu, definisi konstan ditempatkan di awal blok konfigurasi.
b) Jalankan blok (blok aplikasi)
Jalankan blok adalah hal terdekat dengan metode utama dalam sudut. Blok RUN adalah kode yang harus dieksekusi untuk memulai aplikasi. Ini akan dieksekusi setelah semua konfigurasi layanan dan injektor dibuat. Jalankan blok biasanya berisi kode yang lebih sulit untuk unit test. Untuk alasan ini, kode -kode ini harus didefinisikan dalam modul terpisah sehingga mereka dapat diabaikan dalam tes unit.
c) dependensi (dependensi)
Modul dapat mencantumkan modul lain yang tergantung pada. Mengandalkan modul berarti bahwa modul yang diminta (dapat diandalkan) harus dimuat sebelum meminta modul (modul yang perlu bergantung pada modul lain, pemohon) dimuat. Dengan kata lain, blok konfigurasi dari modul yang diminta akan dieksekusi sebelum blok konfigurasi atau modul yang membutuhkan, bagaimana menjelaskan atau di sini?). Hal yang sama berlaku untuk run block. Setiap modul hanya dapat dimuat sekali, bahkan jika ada beberapa modul lain yang memerlukannya.
d) Pemuatan asinkron (pemuatan asinkron)
Modul adalah salah satu cara untuk mengelola konfigurasi $ injector, tanpa melakukan apa pun dengan memuat skrip ke VM. Sekarang ada proyek siap pakai yang dirancang khusus untuk pemuatan skrip, dan juga dapat digunakan dalam sudut. Karena modul tidak melakukan apa pun selama pemuatan, mereka dapat dimuat ke VM dalam urutan apa pun. Loader skrip dapat menggunakan fitur ini untuk melakukan pemuatan paralel.
5. Pengujian Unit
Dalam bentuk paling sederhana dari pengujian unit, seseorang adalah untuk membuat instantiate subset aplikasi dalam tes dan kemudian menjalankannya. Yang penting, kita perlu menyadari bahwa untuk setiap injektor, setiap modul hanya akan dimuat sekali. Biasanya, aplikasi hanya memiliki satu injektor. Tetapi dalam pengujian, setiap test case memiliki injektornya, yang berarti bahwa di setiap VM, modul akan dimuat beberapa kali. Membangun modul dengan benar akan membantu pengujian unit, seperti pada contoh berikut:
Dalam contoh ini, kami bersiap untuk berasumsi bahwa modul berikut didefinisikan:
angular.module ('salam', []). factory ('waspada', function ($ window) {return function (teks) {$ window.alert (teks);};}). value ('salam', 'halo'). Factory ('salam', function (waspada, salam) {return function (name) {warniMari kita tulis beberapa kasus tes:
describe('myApp', function() { // Load the module of the application response, and then load the specified test module that rewrites $window to the mock version. // Do this, when window.alert() is performed, the tester will not stop because it is blocked by the real alert window // Here is an example of overwriting configuration information in the test beforeEach(module('greetMod', function($provide) {// It seems that the real $ window akan menggantikan $ astance.value ('$ window', {waspada: jasmine.createspy ('waspada')}); {salam (dunia '); $ value ('waspada', alertspy);