Apakah Pengawal di AngularJs?
Pengawal di AngularJs mengambil data dari View, memproses data, dan kemudian mengirimkan data tersebut ke pandangan yang ditampilkan kepada pengguna akhir. Pengawal akan mempunyai logik perniagaan utama anda.
Pengawal akan menggunakan model data, melakukan pemrosesan yang diperlukan dan kemudian menyampaikan output ke tampilan yang seterusnya akan ditunjukkan kepada pengguna akhir.
Dalam tutorial ini, anda akan belajar-
- Apa yang dilakukan oleh Pengawal dari sudut sudut
- Cara membina Pengawal asas
- Cara menentukan Kaedah dalam Pengawal
- Menggunakan pengawal ng dalam Fail Luaran
- Tanggungjawab utama pengawal adalah untuk mengawal data yang disalurkan ke pandangan. Skop dan pandangan mempunyai komunikasi dua hala.
- Sifat-sifat pandangan boleh memanggil "fungsi" pada ruang lingkup. Selain itu acara pada pandangan boleh memanggil "kaedah" pada ruang lingkup. Coretan kod di bawah memberikan contoh ringkas fungsi.
- Fungsi ($ lingkup) yang ditakrifkan ketika menentukan pengawal dan fungsi dalaman yang digunakan untuk mengembalikan penggabungan $ lingkup.firstName dan $ lingkup.lastName $.
- Dalam AngularJS apabila anda menentukan fungsi sebagai pemboleh ubah, ia dikenali sebagai Kaedah.
- Data dengan cara ini berlalu dari pengawal ke ruang lingkup, dan kemudian data tersebut berulang-alik dari ruang lingkup ke pandangan.
- Ruang lingkup digunakan untuk memperlihatkan model pada pandangan. Model dapat dimodifikasi melalui metode yang ditentukan dalam ruang lingkup yang dapat dipicu melalui peristiwa dari pandangan. Kita dapat menentukan model dua arah yang mengikat dari skop ke model.
- Pengawal tidak boleh digunakan secara ideal untuk memanipulasi DOM. Ini harus dilakukan dengan arahan yang akan kita lihat kemudian hari.
- Amalan terbaik adalah mempunyai pengawal berdasarkan fungsi. Contohnya, jika anda mempunyai borang untuk memasukkan dan anda memerlukan pengawal untuk itu, buat pengawal yang dipanggil "pengawal bentuk".
- Kami menambahkan rujukan ke lembaran gaya CSS bootstrap, yang akan digunakan bersama dengan perpustakaan bootstrap.
- Kami menambah rujukan ke perpustakaan angularjs. Jadi sekarang apa sahaja yang kita lakukan dengan angular.js ke depan akan dirujuk dari perpustakaan ini.
- Kami menambahkan rujukan ke perpustakaan bootstrap untuk menjadikan laman web kami lebih responsif untuk kawalan tertentu.
- Kami telah menambahkan rujukan ke perpustakaan jquery yang akan digunakan untuk manipulasi DOM. Ini diperlukan oleh Angular kerana beberapa fungsi di Angular bergantung pada perpustakaan ini.
- Mula-mula kita memisahkan fail kita menjadi 2 folder seperti yang dilakukan dengan mana-mana aplikasi web konvensional. Kami mempunyai folder "CSS". Ia akan mengandungi semua fail helaian gaya lata kami, dan kemudian kami akan mempunyai folder "lib" kami yang akan memiliki semua fail JavaScript kami.
- Fail bootstrap.css diletakkan di folder CSS dan ia digunakan untuk menambahkan penampilan dan nuansa yang baik untuk laman web kami.
- Angular.js adalah fail utama kami yang dimuat turun dari laman web angularJS dan disimpan di folder lib kami.
- Fail app.js akan mengandungi kod kami untuk pengawal.
- Fail bootstrap.js digunakan untuk melengkapkan fail bootstrap.cs untuk menambahkan fungsi bootstrap ke aplikasi web kami.
- Fail jquery akan digunakan untuk menambahkan fungsi manipulasi DOM ke laman web kami.
Apa yang dilakukan oleh Pengawal dari sudut sudut
Berikut adalah definisi ringkas mengenai kerja Angular JS Controller.
Cara membina Pengawal asas
Sebelum kita memulakan dengan membuat pengawal, kita perlu terlebih dahulu menyediakan halaman asas HTML kita.
Coretan kod di bawah adalah halaman HTML ringkas yang mempunyai tajuk "Pendaftaran Acara" dan merujuk kepada perpustakaan penting seperti Bootstrap, jquery dan Angular.
Secara lalai coretan kod di atas akan terdapat dalam semua contoh kami, sehingga kami dapat menunjukkan hanya kod sudut JS tertentu di bahagian berikutnya.
Kedua, mari lihat fail dan struktur fail yang akan kita mulakan sepanjang kursus kita.
Mari lihat contoh cara menggunakan angular.js,
Apa yang ingin kami lakukan di sini adalah hanya dengan memaparkan kata-kata "AngularJS" dalam format teks dan dalam kotak teks ketika halaman dilihat di penyemak imbas.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Penjelasan Kod:
- Kata kunci ng-aplikasi digunakan untuk menunjukkan bahawa aplikasi ini harus dianggap sebagai aplikasi sudut. Apa sahaja yang bermula dengan awalan 'ng' dikenali sebagai arahan. "DemoApp" adalah nama yang diberikan untuk aplikasi Angular.JS kami.
- Kami telah membuat tag div dan dalam tag ini kami telah menambahkan arahan ng-controller bersama dengan nama Controller kami "DemoController". Ini pada asasnya menjadikan tag div kita kemampuan untuk mengakses kandungan Demo Controller. Anda perlu menyebut nama pengawal di bawah arahan untuk memastikan bahawa anda dapat mengakses fungsi yang ditentukan dalam pengawal.
- Kami membuat model mengikat menggunakan arahan model ng. Apa yang dilakukannya ialah mengikat kotak teks untuk Nama Tutorial untuk terikat dengan pemboleh ubah anggota "tutorialName".
- Kami sedang membuat pemboleh ubah anggota yang disebut "tutorialName" yang akan digunakan untuk memaparkan maklumat yang pengguna taipkan di kotak teks untuk Nama Tutorial.
- Kami membuat modul yang akan dilampirkan ke aplikasi DemoApp kami. Oleh itu, modul ini kini menjadi sebahagian daripada aplikasi kami.
- Dalam modul, kami menentukan fungsi yang memberikan nilai lalai "AngularJS" ke pemboleh ubah tutorialName kami.
Sekiranya arahan itu berjaya dilaksanakan, Output berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Oleh kerana kami memberikan pemboleh ubah tutorialName nilai "Angular JS", ini akan dipaparkan di kotak teks dan di baris teks biasa.
Cara menentukan Kaedah dalam Pengawal
Biasanya, seseorang ingin menentukan beberapa kaedah dalam pengawal untuk memisahkan logik perniagaan.
Sebagai contoh, andaikan jika anda mahu pengawal anda melakukan 2 perkara asas,
- Lakukan penambahan 2 nombor
- Lakukan pengurangan 2 nombor
Anda kemudian akan membuat 2 kaedah dengan ideal di dalam alat kawalan anda, satu untuk melakukan penambahan dan yang lain untuk melakukan pengurangan.
Mari lihat contoh mudah bagaimana anda dapat menentukan kaedah tersuai dalam pengawal Angular.JS. Pengawal hanya akan mengembalikan rentetan.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Penjelasan Kod:
- Di sini, kita hanya menentukan fungsi yang mengembalikan rentetan "AngularJS". Fungsi dilampirkan ke objek lingkup melalui pemboleh ubah anggota yang disebut tutorialName.
- Sekiranya arahan itu berjaya dilaksanakan, Output berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Menggunakan pengawal ng dalam Fail Luaran
Mari kita lihat contoh "HelloWorld" di mana semua fungsi diletakkan dalam satu fail. Kini tiba masanya untuk meletakkan kod pengawal dalam fail yang berasingan.
Mari ikuti langkah di bawah untuk melakukan ini.
Langkah 1) Dalam fail app.js, tambahkan kod berikut untuk pengawal anda
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Kod di atas melakukan perkara berikut,
- Tentukan modul yang disebut "aplikasi" yang akan memegang pengawal bersama dengan fungsi pengawal.
- Buat pengawal dengan nama "HelloWorldCtrl". Pengawal ini akan digunakan untuk mempunyai fungsi untuk menampilkan mesej "Hello World".
- Objek skop digunakan untuk menyampaikan maklumat dari pengawal ke pandangan. Jadi dalam kes kita, objek lingkup akan digunakan untuk menahan pemboleh ubah yang disebut "pesan".
- Kami menentukan mesej pemboleh ubah dan memberikan nilai "Hello World" kepadanya.
Langkah 2) Sekarang, dalam fail Sample.html anda tambahkan kelas div yang akan mengandungi arahan ng-pengawal dan kemudian tambahkan rujukan ke pembolehubah anggota "mesej"
Jangan lupa untuk menambahkan rujukan ke app.js fail skrip yang mempunyai kod sumber untuk pengawal anda.
Event Registration Guru99 Global Event
{{message}}
Sekiranya kod di atas dimasukkan dengan betul, Output berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Ringkasan
- Tanggungjawab utama pengawal adalah untuk membuat objek lingkup yang seterusnya diteruskan ke pandangan
- Cara membina pengawal mudah menggunakan arahan ng-app, ng-controller dan ng-model
- Cara menambahkan kaedah khusus ke pengawal yang boleh digunakan untuk memisahkan pelbagai fungsi dalam modul sudut.
- Pengawal dapat ditentukan dalam fail luaran untuk memisahkan lapisan ini dari lapisan Lihat. Ini biasanya merupakan amalan terbaik semasa membuat aplikasi web.