Modul AngularJS
Modul mendefinisikan aplikasi.
Modul adalah wadah untuk berbagai bagian aplikasi.
Modul adalah wadah untuk pengontrol aplikasi.
Pengontrol biasanya milik modul.
Buat modul
Anda dapat membuat modul melalui fungsi Angular.module dari AngularJS:
<div ng-app = "myapp"> ... </div> <script> var app = angular.module ("myapp", []); </script>Parameter "myApp" sesuai dengan elemen HTML yang mengeksekusi aplikasi.
Sekarang Anda dapat menambahkan pengontrol, instruksi, filter, dll. Dalam aplikasi AngularJS Anda.
Tambahkan pengontrol
Anda dapat menggunakan Petunjuk NG-Controller untuk menambahkan pengontrol aplikasi:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> {{firstName + "" + lastName}} </div> <script> var app = angular.module ("myapp", []); app.controller ("myctrl", function ($ scope) {$ scope.firstname = ";"; "Doe";}); </script> </body> </html>Efek Menjalankan:
John Doe
Anda dapat mempelajari lebih lanjut tentang pengontrol di bab pengontrol AngularJS.
Tambahkan perintah
AngularJS memberikan banyak instruksi bawaan yang dapat Anda gunakan untuk menambahkan fungsionalitas ke aplikasi Anda.
Untuk instruksi lengkap, silakan merujuk ke Manual Referensi AngularJS.
Selain itu, Anda dapat menggunakan modul untuk menambahkan instruksi Anda sendiri untuk aplikasi Anda:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip </head> <wead> <drips> <prepsp = "myapp ="> </script> </head> <body> <dr scrips = "myapp ="> </script> </head> <body> <dricr-pricp-pripp = " angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {template: "Saya membuatnya di konstruktor arahan!"};}); </script> </body> </html>Hasil Menjalankan:
Saya membuatnya di konstruktor arahan!
Anda dapat mempelajari lebih lanjut tentang arahan dalam bab Arahan AngularJS.
Modul dan pengontrol termasuk dalam file JS
Biasanya, aplikasi AngularJS mencakup modul dan pengontrol dalam file JavaScript.
Dalam contoh berikut, "myapp.js" berisi definisi modul aplikasi, dan file "myctrl.js" berisi controller:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> {{firstName + "" + lastName}} </div> <script src = "myapp.js"> </script> <script src = "myctrl.js"> </script> </body> </html>Hasil Menjalankan:
John Doe
myapp.js
var app = angular.module ("myapp", []);
Catatan dalam definisi modul, parameter [] digunakan untuk menentukan dependensi modul.
Kurung [] menunjukkan bahwa modul tidak memiliki ketergantungan. Jika ada ketergantungan, nama ketergantungan akan ditulis dalam tanda kurung.
myctrl.js
app.controller ("myctrl", function ($ scope) {$ scope.firstname = "John"; $ scope.lastname = "doe";});Fungsi memengaruhi namespace global
Fungsi global harus dihindari dalam JavaScript. Karena mereka mudah ditimpa oleh file skrip lainnya.
Modul AngularJS memungkinkan semua fungsi untuk dilingkupi di bawah modul ini, menghindari masalah ini.
Kapan perpustakaan akan dimuat?
Catatan: Dalam contoh kami, semua perpustakaan AngularJS dimuat di kepala dokumen HTML.
Untuk aplikasi HTML, umumnya disarankan untuk menempatkan semua skrip di bagian bawah elemen <body>.
Ini akan meningkatkan kecepatan pemuatan halaman web, karena pemuatan HTML tidak dapat dimuat dengan skrip.
Dalam beberapa contoh AngularJS kami, Anda akan melihat bahwa perpustakaan AngularJS dimuat di area <Ead> dokumen.
Dalam contoh kami, AngularJS dimuat dalam elemen <head>, karena panggilan ke Angular.module hanya dapat dibuat setelah perpustakaan dimuat.
Solusi lain adalah memuat pustaka AngularJS di elemen <body>, tetapi harus ditempatkan di depan skrip AngularJS Anda:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> {{firstName + "" + lastName}} </div> <script> var app = angular.module ("myapp", []); app.controller ("myctrl", function ($ scope) {$ scope.firstname = ";"; "Doe";}); </script> </body> </html>Hasil Menjalankan:
John Doe
Di atas adalah kompilasi informasi modul AngularJS, dan kami akan terus menambahkannya nanti. Saya berharap ini dapat membantu pemrograman teman.