Pengontrol AngularJS dengan Contoh ng-Controller
James Hartman
Apa itu Pengontrol di AngularJS?
A pengawas di AngularJS mengambil data dari Tampilan, memproses data, dan kemudian mengirimkan data tersebut ke tampilan yang ditampilkan ke pengguna akhir. Pengontrol akan memiliki logika bisnis inti Anda. Pengontrol akan menggunakan model data, melakukan pemrosesan yang diperlukan dan kemudian meneruskan keluarannya ke tampilan yang selanjutnya ditampilkan kepada pengguna akhir.
Apa yang dilakukan Pengendali dari Perspektif Angular?
Berikut ini adalah definisi sederhana cara kerja AngularJS Controller:
- 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. Terlebih lagi kejadian pada tampilan dapat memanggil “metode” pada ruang lingkup. Cuplikan kode di bawah ini memberikan contoh sederhana dari suatu fungsi.
- fungsi($cakupan) yang didefinisikan ketika mendefinisikan pengontrol dan fungsi internal yang digunakan untuk mengembalikan rangkaian $scope.firstName dan $scope.lastName.
- In AngularJS, ketika Anda mendefinisikan suatu fungsi sebagai variabel, itu dikenal sebagai Metode.
- Data dengan cara ini diteruskan dari pengontrol ke cakupan, lalu data diteruskan bolak-balik dari cakupan ke tampilan.
- Cakupan digunakan untuk mengekspos 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.
- Kontroler sebaiknya tidak digunakan untuk memanipulasi DOM. Hal 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, buatlah pengontrol yang disebut “pengontrol formulir”.
Cara Membangun Pengontrol Dasar di AngularJS
Berikut langkah-langkah membuat controller di AngularJS:
Langkah 1) Buat Halaman HTML dasar
Sebelum kita mulai membuat pengontrol, pertama-tama kita harus menyiapkan halaman HTML dasar.
Cuplikan kode di bawah ini adalah halaman HTML sederhana yang memiliki judul "Pendaftaran Acara" dan memiliki referensi ke perpustakaan penting seperti Bootstrap, jquery dan Sudut.
- Kami menambahkan referensi ke stylesheet CSS bootstrap, yang akan digunakan bersama dengan perpustakaan bootstrap.
- Kami menambahkan referensi ke perpustakaan AngularJs. Jadi sekarang apapun yang kita lakukan dengan Angular.js kedepannya akan direferensikan dari perpustakaan ini.
- Kami menambahkan referensi ke perpustakaan bootstrap untuk membuat halaman web kami lebih responsif terhadap kontrol tertentu.
- Kami telah menambahkan referensi ke perpustakaan jquery yang akan digunakan untuk manipulasi DOM. Ini diperlukan oleh Angular karena beberapa fungsi di Angular bergantung pada perpustakaan ini.
Secara default, cuplikan kode di atas akan ada di semua contoh kita, sehingga kita hanya bisa menampilkan kode AngularJS spesifik di bagian selanjutnya.
Langkah 2) Periksa file dan struktur file
Kedua, mari kita lihat file dan struktur file yang akan kita mulai selama kursus kita.
- Pertama kita memisahkan file kita ke dalam 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 menyimpan semua file kita. JavaNaskah file.
- File bootstrap.css ditempatkan di folder CSS dan digunakan untuk menambahkan tampilan dan nuansa yang bagus untuk situs web kita.
- 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.
Langkah 3) Gunakan kode AngularJS untuk menampilkan hasilnya
Yang ingin kita lakukan di sini hanyalah menampilkan kata-kata “AngularJS” dalam format teks dan kotak teks saat halaman dilihat di browser. Mari kita lihat contoh tentang cara menggunakan angular.js untuk melakukan ini:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoController', function($scope){
$scope.tutorialName = "Angular JS";
});
</script>
</body>
</html>
Penjelasan Kode:
- ng-aplikasi kata kunci digunakan untuk menunjukkan bahwa aplikasi ini harus dianggap sebagai aplikasi sudut. Apa pun yang dimulai dengan awalan 'ng' dikenal sebagai a Direktif. “DemoApp” adalah nama yang diberikan untuk aplikasi Angular.JS kami.
- Kami telah membuat tag div dan dalam tag ini kami telah menambahkan direktif ng-controller bersama dengan nama Controller kami “DemoController”. Ini pada dasarnya membuat tag div kita 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 pengikatan model menggunakan direktif ng-model. Fungsinya adalah mengikat kotak teks untuk Nama Tutorial agar 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, kita mendefinisikan fungsi yang memberikan nilai default “AngularJS” ke variabel tutorialName kita.
Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Karena kita menetapkan variabel tutorialName dengan nilai “Angular JS”, ini akan ditampilkan di kotak teks dan di baris teks biasa.
Cara Mendefinisikan Metode di Pengontrol AngularJS
Biasanya, seseorang ingin mendefinisikan beberapa metode di pengontrol untuk memisahkan logika bisnis.
Misalnya, jika Anda ingin pengontrol melakukan 2 hal dasar,
- Lakukan penjumlahan 2 angka
- Lakukan pengurangan 2 angka
Idealnya Anda membuat 2 metode di dalam pengontrol Anda, satu untuk melakukan penambahan dan yang lainnya untuk melakukan pengurangan.
Mari kita lihat contoh sederhana bagaimana Anda dapat mendefinisikan metode khusus dalam pengontrol Angular.JS. Pengontrol hanya akan mengembalikan sebuah string.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name :<input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName}}
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
$scope.tutorialName = "Angular JS";
$scope.tName = function() {
return $scope.tName;
};
});
</script>
</body>
</html>
Penjelasan Kode:
- Di sini, kita hanya mendefinisikan fungsi yang mengembalikan string “AngularJS”. Fungsi tersebut dilampirkan ke objek cakupan melalui variabel anggota yang disebut namatutorial.
- Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Pengontrol AngularJS dengan Contoh ng-Controller
Mari kita lihat contoh “HelloWorld” di mana semua fungsi ditempatkan dalam satu file. Sekarang saatnya menempatkan kode pengontrol di file terpisah.
Mari ikuti langkah-langkah di bawah ini untuk melakukannya:
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 bernama "aplikasi" yang akan menampung pengontrol bersama dengan fungsionalitas pengontrol.
- Buat pengontrol dengan nama “HelloWorldCtrl”. Kontroler ini akan digunakan untuk memiliki fungsi menampilkan pesan “Hello World”.
- Objek lingkup digunakan untuk meneruskan informasi dari pengontrol ke tampilan. Jadi dalam kasus kita, objek lingkup akan digunakan untuk menampung variabel yang disebut “pesan”.
- Kami mendefinisikan pesan variabel dan memberikan nilai "Halo Dunia" padanya.
Langkah 2) Sekarang, di file Sample.html Anda, tambahkan kelas div yang akan berisi direktif ng-controller dan kemudian tambahkan referensi ke variabel anggota “message”
Juga jangan lupa untuk menambahkan referensi ke file skrip app.js yang memiliki kode sumber untuk pengontrol Anda.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Jika kode di atas dimasukkan dengan benar, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Kesimpulan
- Tanggung jawab utama pengontrol adalah membuat objek cakupan yang selanjutnya diteruskan ke tampilan
- Cara membuat pengontrol sederhana menggunakan arahan ng-app, ng-controller, dan ng-model
- Bagaimana cara menambahkan metode khusus ke pengontrol yang dapat digunakan untuk memisahkan berbagai fungsi dalam modul sudutjs.
- Pengontrol dapat didefinisikan dalam file eksternal untuk memisahkan lapisan ini dari lapisan Tampilan. Ini biasanya merupakan praktik terbaik saat membuat aplikasi web.
