Sebelum berbicara tentang modul AngularJS, mari kita pertama kali perkenalkan beberapa titik pengetahuan Angular:
AngularJS adalah teknologi klien murni, sepenuhnya ditulis dalam JavaScript. Ini menggunakan teknologi konvensional pengembangan web (HTML, CSS, JavaScript) untuk membuat pengembangan aplikasi web lebih cepat dan lebih mudah.
AngularJS menyederhanakan pengembangan aplikasi adalah untuk mengemas beberapa operasi pengembangan tingkat rendah yang umum untuk memberikannya kepada pengembang. AngularJS akan secara otomatis menangani operasi tingkat rendah ini. Itu termasuk:
1. Operasi Dom
2. Siapkan mendengarkan acara
3. Verifikasi input, karena AngularJS akan menangani sebagian besar operasi ini, pengembang dapat lebih fokus pada logika bisnis aplikasi dan menulis kode tingkat yang kurang berulang, rawan kesalahan, dan rendah.
Sementara AngularJS sedang menyederhanakan pengembangan, itu juga membawa beberapa teknologi yang indah ke klien, termasuk:
1. Pemisahan data, logika bisnis, dan tampilan
2. Pengikatan data dan tampilan otomatis
3. Layanan Umum
4. Injeksi ketergantungan (terutama digunakan untuk layanan agregasi)
5. Compiler HTML yang Diperluas (ditulis seluruhnya oleh JavaScript)
6. Mudah diuji
7. Permintaan klien untuk teknologi ini sebenarnya sudah ada sejak lama.
Pada saat yang sama, Anda juga dapat menggunakan AngularJS untuk mengembangkan aplikasi satu halaman atau multi-halaman, tetapi terutama digunakan untuk mengembangkan aplikasi halaman tunggal. AngularJS mendukung operasi riwayat browser, tombol ke depan dan belakang, dan operasi favorit dalam aplikasi satu halaman.
Selanjutnya, mari kita jelaskan secara rinci modul AngularJS.
Sebagian besar aplikasi memiliki metode utama untuk membuat instantiating, mengatur, dan meluncurkan aplikasi. Aplikasi AngularJS tidak memiliki metode utama, tetapi gunakan modul untuk menyatakan bagaimana aplikasi harus dimulai. Metode ini memiliki keunggulan berikut:
1. Proses startup adalah deklaratif, sehingga lebih mudah dipahami.
2. Dalam pengujian unit, tidak perlu memuat semua modul, jadi metode ini membantu menulis tes unit.
3. Modul tambahan dapat ditambahkan ke tes dalam situasi tertentu. Modul-modul ini dapat mengubah konfigurasi dan dapat membantu dengan pengujian ujung ke ujung.
4. Kode pihak ketiga dapat dikemas ke dalam modul yang dapat digunakan kembali.
5. Modul dapat dimuat dalam urutan urutan atau paralelisme apa pun (karena eksekusi modul itu sendiri tertunda).
Misalnya:
<! Doctype html> <html ng-app = "myapp"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script> var myappmodule = angular.module ('myapp', []); // Konfigurasikan modul. // Dalam contoh ini kita akan membuat filter ucapan myappmodule.filter ('salam', function () {return function (name) {return 'hello,' + name + '!';};}); </script> </head> <body> <div> {{'world' | Salam}} </div> </body> </html>Dalam contoh di atas, kami menggunakan modul myApp untuk memulai aplikasi dengan menentukannya di <html ng-app = "myapp">.
Contoh di atas sangat mudah ditulis, tetapi tidak cocok untuk menulis aplikasi besar dengan cara yang sama. Rekomendasi kami adalah membagi aplikasi Anda menjadi modul berikut:
1. Modul layanan yang digunakan untuk membuat deklarasi layanan.
2. Modul instruksi yang digunakan untuk membuat deklarasi instruksi.
3. Modul filter yang digunakan untuk membuat deklarasi filter.
4. Modul tingkat aplikasi yang bergantung pada modul di atas, yang berisi kode inisialisasi.
Misalnya:
<! Doctype html> <html ng-app = "xmpl"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <cript src = "script.js"> </script> </head> <cript> "script src =" script.js "> </script> </head> <cript>" script src = "script.js"> </script> </head> <cript> "script src =" script.js "> </script> </head> <cript>" script src = "script.js"> </script> </head> <cript> "body-" script = "script. salam }}! </div> </body> </html> [/code] Script.js: [kode] Angular.module ('xmpl.service', []). // Nilai Modul Layanan ('Salam', {// Salam objek penyapa khusus: 'halo', localize: function (lokalisasi) {this.salutation = localization.salutation;}, salam: fungsi (nama) {return this.salutation + '' + name + '!';}}). value ('user', {// Kustom Pengguna Load: Function (Name) {this.name = name;}}); angular.module ('xmpl.directive', []); // modul instruksi angular.module ('xmpl.filter', []); // Saring modul angular.module ('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']). //Module xmpl depends on the module run(function(greeter, user) in the array { // Initialize the code. When the application starts, greeter.localize({ salutation: 'Bonjour' }); user.load('World'); })// A Controller for your appvar XmplController = function($scope, greeter, user) { $scope.greeting = wreek.greet (user.name);}Alasan untuk perpecahan ini adalah bahwa Anda sering perlu mengabaikan kode inisialisasi dalam pengujian Anda, karena kode -kode ini lebih sulit untuk diuji. Dengan membelahnya, dapat dengan mudah diabaikan dalam pengujian. Tes ini juga bisa lebih spesifik dengan memuat hanya modul yang terkait dengan tes saat ini. Di atas hanyalah sebuah saran, Anda dapat yakin untuk menyesuaikannya sesuai dengan situasi spesifik Anda.
Modul adalah kumpulan serangkaian konfigurasi dan blok kode yang dilampirkan pada aplikasi pada tahap startup. Modul paling sederhana terdiri dari dua set blok kode:
Blok Kode Konfigurasi - Jalankan selama fase injeksi dan konfigurasi penyedia injeksi. Hanya penyedia injeksi dan konstanta yang dapat disuntikkan ke blok konfigurasi. Ini untuk mencegah layanan diinisialisasi terlebih dahulu sebelum dikonfigurasi.
Jalankan Blok Kode - Jalankan setelah injektor dibuat dan digunakan untuk memulai aplikasi. Hanya contoh dan konstanta yang dapat disuntikkan ke blok lari. Ini untuk mencegah konfigurasi sistem terjadi setelah operasi.
Implementasi Kode:
angular.module ('mymodule', []). config (function (injectable) {// blok kode konfigurasi penyedia-injector // Ini adalah contoh blok konfigurasi. // Anda dapat memiliki sebanyak ini yang Anda inginkan. // Anda hanya dapat menyuntikkan penyedia (bukan instance) // ke dalam blok konfigurasi.}). run (function (injectable) {// blok kode konfigurasi injector instance // Ini adalah contoh blok run. // Anda dapat memiliki sebanyak ini yang Anda inginkan. // Anda hanya dapat menyuntikkan instance (bukan penyedia) // ke dalam blok run});Modul juga memiliki beberapa cara mudah untuk dikonfigurasi, dan menggunakannya setara dengan menggunakan blok kode. Misalnya:
angular.module ('mymodule', []). nilai ('A', 123). factory ('a', function () {return 123;}). Directive ('DirectiveName', ...). filter ('filtername', ...); // sama asangular.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');Blok konfigurasi akan diterapkan dalam urutan pendaftaran dalam $ berikan, $ compileProvider, $ filterprovider, dan $ filterprovider. Satu -satunya pengecualian adalah definisi konstanta, yang harus selalu ditempatkan di awal blok konfigurasi.
Blok yang berjalan adalah yang paling mirip dengan metode utama di AngularJS. Blok Jalankan adalah sepotong kode yang digunakan untuk memulai aplikasi. Dijalankan setelah semua layanan dikonfigurasi dan semua injektor dibuat. Blok berjalan biasanya berisi beberapa kode yang sulit diuji, sehingga harus ditulis dalam modul terpisah sehingga mereka dapat diabaikan selama pengujian unit.
Modul dapat mencantumkan modul lain sebagai dependensinya. "Bergantung pada modul tertentu" berarti bahwa modul dependen perlu dimuat sebelum modul. Dengan kata lain, blok konfigurasi modul dependen akan dieksekusi sebelum blok konfigurasi modul ini. Hal yang sama berlaku untuk menjalankan blok. Modul apa pun hanya dapat dimuat sekali, bahkan jika itu tergantung pada beberapa modul.
Modul adalah metode yang digunakan untuk mengelola konfigurasi $ injector dan tidak ada hubungannya dengan pemuatan skrip. Ada banyak perpustakaan untuk memuat modul kontrol di internet, yang dapat digunakan dengan AngularJS. Karena modul tidak melakukan apa pun selama pemuatan, mereka dapat dimuat dalam urutan apa pun atau secara paralel