Apa itu Controller di AngularJs?
Pengontrol di AngularJs mengambil data dari Tampilan, memproses data, dan kemudian mengirimkan data tersebut ke tampilan yang ditampilkan kepada pengguna akhir. Pengendali akan memiliki logika bisnis inti Anda.
Pengontrol akan menggunakan model data, melakukan pemrosesan yang diperlukan dan kemudian meneruskan output ke tampilan yang kemudian ditampilkan ke pengguna akhir.
Dalam tutorial ini, Anda akan belajar-
- Apa yang Controller lakukan dari sudut pandang Angular
- Cara membangun Pengontrol dasar
- Bagaimana mendefinisikan Metode di Controller
- Menggunakan ng-controller di File Eksternal
- Tanggung jawab utama pengontrol adalah mengontrol data yang diteruskan ke tampilan. Ruang lingkup dan pandangan memiliki komunikasi dua arah.
- Properti tampilan dapat memanggil "fungsi" pada cakupan. Selain itu, peristiwa pada tampilan dapat memanggil "metode" pada cakupan. Potongan kode di bawah ini memberikan contoh sederhana dari sebuah fungsi.
- Fungsi ($ scope) yang didefinisikan saat mendefinisikan controller dan fungsi internal yang digunakan untuk mengembalikan penggabungan dari $ scope.firstName dan $ scope.lastName.
- Di AngularJS ketika Anda mendefinisikan fungsi sebagai variabel, itu dikenal sebagai Metode.
- Data dengan cara ini diteruskan dari pengontrol ke cakupan, lalu data diteruskan bolak-balik dari ruang lingkup ke tampilan.
- Ruang lingkup digunakan untuk memaparkan model ke tampilan. Model dapat dimodifikasi melalui metode yang ditentukan dalam cakupan yang dapat dipicu melalui peristiwa dari tampilan. Kita dapat mendefinisikan pengikatan model dua arah dari ruang lingkup ke model.
- Pengontrol tidak boleh digunakan secara ideal untuk memanipulasi DOM. Ini harus dilakukan dengan arahan yang akan kita lihat nanti.
- Praktik terbaik adalah memiliki pengontrol berdasarkan fungsionalitas. Misalnya, jika Anda memiliki formulir untuk masukan dan Anda memerlukan pengontrol untuk itu, buat pengontrol yang disebut "pengontrol bentuk".
- Kami menambahkan referensi ke lembar gaya CSS bootstrap, yang akan digunakan bersama dengan pustaka bootstrap.
- Kami menambahkan referensi ke perpustakaan angularjs. Jadi sekarang apa pun yang kita lakukan dengan angular.js selanjutnya akan direferensikan dari pustaka ini.
- Kami menambahkan referensi ke pustaka bootstrap untuk membuat halaman web kami lebih responsif untuk kontrol tertentu.
- Kami telah menambahkan referensi ke perpustakaan jquery yang akan digunakan untuk manipulasi DOM. Ini diperlukan oleh Angular karena beberapa fungsionalitas di Angular bergantung pada pustaka ini.
- Pertama kami memisahkan file kami menjadi 2 folder seperti yang dilakukan dengan aplikasi web konvensional. Kami memiliki folder "CSS". Ini akan berisi semua file cascading style sheet kita, dan kemudian kita akan memiliki folder "lib" yang akan memiliki semua file JavaScript kita.
- File bootstrap.css ditempatkan di folder CSS dan digunakan untuk menambahkan tampilan dan nuansa yang bagus untuk situs kami.
- Angular.js adalah file utama kami yang diunduh dari situs angularJS dan disimpan di folder lib kami.
- File app.js akan berisi kode kami untuk pengontrol.
- File bootstrap.js digunakan untuk melengkapi file bootstrap.cs untuk menambahkan fungsionalitas bootstrap ke aplikasi web kita.
- File jquery akan digunakan untuk menambahkan fungsionalitas manipulasi DOM ke situs kami.
Apa yang Controller lakukan dari sudut pandang Angular
Berikut ini adalah definisi sederhana cara kerja Angular JS Controller.
Cara membangun Pengontrol dasar
Sebelum kita mulai dengan pembuatan sebuah controller, pertama-tama kita harus memiliki pengaturan halaman HTML dasar kita.
Potongan kode di bawah ini adalah halaman HTML sederhana yang memiliki judul "Pendaftaran Acara" dan memiliki referensi ke pustaka penting seperti Bootstrap, jquery dan Angular.
Secara default, potongan kode di atas akan ada di semua contoh kami, sehingga kami hanya dapat menampilkan kode angularJS tertentu di bagian selanjutnya.
Kedua, mari kita lihat file dan struktur file yang akan kita mulai selama kursus kita.
Mari kita lihat contoh bagaimana menggunakan angular.js,
Yang ingin kami lakukan di sini hanyalah menampilkan kata "AngularJS" dalam format teks dan dalam kotak teks saat halaman ditampilkan di browser.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Penjelasan Kode:
- Kata kunci ng-app digunakan untuk menunjukkan bahwa aplikasi ini harus dianggap sebagai aplikasi bersudut. Apa pun yang dimulai dengan awalan 'ng' dikenal sebagai arahan. "DemoApp" adalah nama yang diberikan untuk aplikasi Angular.JS kami.
- Kami telah membuat tag div dan di tag ini kami telah menambahkan arahan ng-controller bersama dengan nama Controller kami "DemoController". Ini pada dasarnya membuat tag div kami memiliki kemampuan untuk mengakses konten Pengontrol Demo. Anda perlu menyebutkan nama pengontrol di bawah arahan untuk memastikan bahwa Anda dapat mengakses fungsionalitas yang ditentukan dalam pengontrol.
- Kami membuat model binding menggunakan direktif ng-model. Apa yang dilakukannya adalah mengikat kotak teks untuk Nama Tutorial untuk terikat ke variabel anggota "tutorialName".
- Kami membuat variabel anggota yang disebut "tutorialName" yang akan digunakan untuk menampilkan informasi yang diketik pengguna di kotak teks untuk Nama Tutorial.
- Kami membuat modul yang akan dilampirkan ke aplikasi DemoApp kami. Jadi modul ini sekarang menjadi bagian dari aplikasi kita.
- Dalam modul, kami mendefinisikan fungsi yang memberikan nilai default "AngularJS" ke variabel tutorialName kami.
Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Karena kita menugaskan variabel tutorialName nilai "Angular JS", ini akan ditampilkan di kotak teks dan di baris teks biasa.
Bagaimana mendefinisikan Metode di Controller
Biasanya, seseorang ingin mendefinisikan beberapa metode dalam pengontrol untuk memisahkan logika bisnis.
Misalnya, jika Anda ingin pengontrol Anda melakukan 2 hal dasar,
- Lakukan penjumlahan 2 angka
- Lakukan pengurangan 2 angka
Anda kemudian akan idealnya membuat 2 metode di dalam pengontrol Anda, satu untuk melakukan penjumlahan dan yang lainnya untuk melakukan pengurangan.
Mari kita lihat contoh sederhana bagaimana Anda dapat mendefinisikan metode kustom dalam pengontrol Angular.JS. Pengontrol hanya akan mengembalikan string.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Penjelasan Kode:
- Di sini, kami hanya mendefinisikan fungsi yang mengembalikan string "AngularJS". Fungsi dilampirkan ke objek lingkup melalui variabel anggota yang disebut tutorialName.
- Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Menggunakan ng-controller di File Eksternal
Mari kita lihat contoh "HelloWorld" di mana semua fungsionalitas ditempatkan dalam satu file. Sekarang saatnya menempatkan kode untuk pengontrol di file terpisah.
Mari ikuti langkah-langkah di bawah ini untuk melakukan ini.
Langkah 1) Di file app.js, tambahkan kode berikut untuk pengontrol Anda
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Kode di atas melakukan hal-hal berikut,
- Tentukan modul yang disebut "app" yang akan menampung pengontrol bersama dengan fungsionalitas pengontrol.
- Buat pengontrol dengan nama "HelloWorldCtrl". Kontroler ini akan digunakan untuk memiliki fungsionalitas untuk menampilkan pesan "Hello World".
- Objek lingkup digunakan untuk meneruskan informasi dari pengontrol ke tampilan. Jadi dalam kasus kami, objek lingkup akan digunakan untuk menampung variabel yang disebut "pesan".
- Kami mendefinisikan pesan variabel dan memberikan nilai "Hello World" padanya.
Langkah 2) Sekarang, di file Sample.html Anda tambahkan kelas div yang akan berisi arahan ng-controller dan kemudian tambahkan referensi ke variabel anggota "message"
Juga jangan lupa untuk menambahkan referensi ke file script app.js yang memiliki kode sumber untuk pengontrol Anda.
Event Registration Guru99 Global Event
{{message}}
Jika kode di atas dimasukkan dengan benar, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Ringkasan
- Tanggung jawab utama pengontrol adalah membuat objek lingkup yang pada gilirannya akan diteruskan ke tampilan
- Cara membuat pengontrol sederhana menggunakan arahan ng-app, ng-controller, dan ng-model
- Cara menambahkan metode kustom ke pengontrol yang dapat digunakan untuk memisahkan berbagai fungsi dalam modul angularjs.
- Pengontrol dapat ditentukan dalam file eksternal untuk memisahkan lapisan ini dari lapisan Tampilan. Ini biasanya merupakan praktik terbaik saat membuat aplikasi web.