Pengontrol AngularJS dengan Contoh ng-Controller

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

Controller di AngularJS menyimpan logika bisnis suatu layar. Ia menerima data melalui objek scope, memprosesnya, dan menampilkan hasilnya kembali ke view.ping Markup presentasi yang bebas dari logika aplikasi.

  • 🎯 Tanggung Jawab Utama: Controller mengisi objek scope dan mengekspos metode ke view; controller tidak memanipulasi DOM.
  • 🔗 wiring: Direktif ng-controller mengikat controller bernama ke sebuah elemen, memberikan elemen tersebut dan anak-anaknya akses ke cakupan controller.
  • 🔁 Penjilidan Dua Arah: ng-model menghubungkan kolom formulir ke properti scope, sehingga perubahan pada tampilan akan memperbarui controller dan sebaliknya.
  • 🧩 metode: Fungsi yang terlampir pada cakupan memisahkan bagian-bagian logika yang berbeda dan dapat dipanggil langsung dari ekspresi tampilan.
  • ️ Sintaks controllerAs: Memberikan alias pada controller dan mengikatnya ke this Menghilangkan ambiguitas ketika controller saling bersarang di dalam satu sama lain.
  • 📁 Pemisahan: Memindahkan controller ke dalam file app.js khusus akan menjaga lapisan tampilan tetap independen dari lapisan logika.
Baca Selengkapnya

Controller AngularJS dengan ng-controller

Apa itu Pengontrol di AngularJS?

A pengawas Dalam AngularJS, sebuah controller mengambil data dari View, memproses data tersebut, dan kemudian mengirimkan data tersebut ke View yang ditampilkan kepada pengguna akhir. Controller menyimpan logika bisnis inti Anda. Ia menggunakan model data, melakukan pemrosesan yang diperlukan, dan kemudian meneruskan hasilnya ke View.

⚠️ Catatan versi: AngularJS (cabang 1.x) telah mencapai akhir masa pakainya pada 31 Desember 2021 dan tidak menerima patch keamanan lebih lanjut. Konsep-konsep di bawah ini masih berlaku untuk aplikasi lama; di Angular modern, peran yang sama diisi oleh kelas komponen, bukan pengontrol.

Setelah mengetahui apa itu controller, masih ada satu pertanyaan yang belum terjawab: bagaimana sebenarnya controller berkomunikasi dengan view. Bagian selanjutnya akan menjawab pertanyaan tersebut.

Apa yang dilakukan Controller dari Perspektif Angular

Berikut adalah definisi sederhana tentang cara kerja Controller AngularJS:

Cara Kerja Pengontrol AngularJS
Cara Kerja Pengontrol AngularJS
  • Tanggung jawab utama pengontrol adalah mengontrol data yang diteruskan ke tampilan. Ruang lingkup dan pandangan memiliki komunikasi dua arah.
  • Properti dan peristiwa tampilan dapat memanggil fungsi pada cakupan tersebut. Cuplikan di bawah ini menunjukkan hal tersebut. fungsi($cakupan) dideklarasikan dengan controller ditambah fungsi internal yang mengembalikan $scope.firstName ke $scope.lastName bergabung. Di dalam AngularJS, sebuah fungsi yang didefinisikan sebagai variabel adalah sebuah Metode.

Cara Kerja Pengontrol AngularJS

  • Data mengalir dari controller ke scope, lalu bolak-balik antara scope dan view.
  • Scope mengekspos model ke view. Model dapat dimodifikasi melalui metode yang didefinisikan pada scope, yang dipicu oleh peristiwa dari view.
  • Controller tidak boleh digunakan untuk memanipulasi DOM. Itu adalah tugas dari arahan.
  • Praktik terbaik adalah mendasarkan controller pada fungsionalitas. Jika Anda memiliki formulir input yang membutuhkan controller, buatlah controller bernama "form controller".

Setelah memahami mekanismenya, bagian selanjutnya akan membangun controller dari halaman kosong.

Cara Membangun Pengontrol Dasar di AngularJS

Berikut adalah langkah-langkah untuk membuat controller di AngularJS.

Langkah 1) Buat Halaman HTML dasar

Sebelum membuat controller, halaman HTML dasar harus sudah tersedia. Cuplikan di bawah ini adalah halaman sederhana berjudul “Pendaftaran Acara” yang merujuk pada Bootstrap dan AngularJS.

Bangun Pengontrol Dasar di AngularJS

  1. Referensi ke Bootstrap Lembar gaya CSS, digunakan bersama dengan Bootstrap Perpustakaan.
  2. Referensi ke pustaka AngularJS. Semua hal yang dilakukan dengan AngularJS mulai dari sini akan diselesaikan dari file ini.
  3. Sebuah referensi ke Bootstrap pustaka, yang membuat kontrol tertentu menjadi responsif.

⚠️ Koreksi: Versi asli memuat jQuery dan menyatakan bahwa AngularJS bergantung padanya. Padahal tidak. AngularJS hadir dengan jqLite, subset bawaan dari API jQuery, dan hanya akan melakukan upgrade ke jQuery lengkap jika jQuery dimuat. sebelum Referensi tersebut telah dihapus.

Langkah 2) Periksa file dan struktur file

Bangun Pengontrol Dasar di AngularJS

  1. File-file tersebut dibagi menjadi dua folder seperti pada aplikasi web konvensional lainnya: “css” untuk stylesheet dan “lib” untuk JavaNaskah file.
  2. File bootstrap.css terletak di folder css dan memberikan tampilan serta nuansa pada situs web.
  3. angular.js adalah pustaka utama, diunduh dari situs AngularJS dan disimpan di lib.
  4. app.js akan berisi kode untuk controller.

Langkah 3) Gunakan kode AngularJS untuk menampilkan hasilnya

Tujuannya adalah untuk menampilkan kata-kata “AngularJS” baik sebagai teks biasa maupun di dalam kotak teks saat halaman dibuka di browser.

Bangun Pengontrol Dasar di AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code Penjelasan:

  1. ng-aplikasi menandai elemen ini sebagai akar dari aplikasi AngularJS. Atribut yang diawali dengan ng- adalah arahan bawaan. “DemoApp” adalah nama yang diberikan untuk aplikasi tersebut.
  2. Div membawa ng-pengontrol dengan nama “DemoController”, yang memberikan elemen tersebut dan semua yang ada di dalamnya akses ke cakupan controller.
  3. ng-model membuat pengikatan model, mengaitkan kotak teks Nama Tutorial dengan properti cakupan. tutorialName.
  4. Modul DemoApp dibuat, dan controller menetapkan nilai default "AngularJS" ke tutorialName.

⚠️ Koreksi telah diterapkan. Daftar asli menyatakan chrset="UTF 8", yang bukan merupakan atribut yang valid maupun nama pengkodean yang valid, dan memuat AngularJS dua kali — sekali dari CDN dan sekali dari lib/angular.jsMemuat pustaka dua kali akan mendaftarkan ulang sistem modul dan menghasilkan perilaku yang tidak dapat diprediksi. Anotasi array dependensi ['$scope', function($scope){…}] juga ditambahkan, tanpanya controller akan rusak saat file diminifikasi.

Keluaran:

Bangun Pengontrol Dasar di AngularJS

Karena tutorialName Nilai yang diberikan adalah “AngularJS”, nilai tersebut muncul di kotak teks dan di baris teks biasa. Satu properti saja sudah cukup untuk demonstrasi; controller sebenarnya biasanya juga menampilkan perilaku lain, yang akan dibahas di bagian selanjutnya.

ARTIKEL TERKAIT

Cara Mendefinisikan Metode di Pengontrol AngularJS

Biasanya, seseorang akan mendefinisikan beberapa metode dalam sebuah controller untuk memisahkan logika bisnis. Jika controller harus menambahkan dua angka dan melakukan substitusi...tracUntuk dua angka, Anda akan membuat satu metode untuk setiap operasi.

Contoh di bawah ini mendefinisikan metode kustom di dalam controller AngularJS yang mengembalikan string.

Tentukan Metode di Pengontrol AngularJS

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code Penjelasan:

  1. Sebuah fungsi dilampirkan ke objek cakupan sebagai anggota. tName. Ini mengembalikan nilai saat ini dari tutorialName.
  2. Tampilan tersebut memanggil metode dengan {{tName()}}Tanda kurung itu penting: tanpa tanda kurung, ekspresi tersebut akan mencetak fungsi itu sendiri, bukan hasilnya.

⚠️ Koreksi: metode asli dibaca $scope.tName = function() { return $scope.tName; };Fungsi tersebut mengembalikan dirinya sendiri, bukan nama tutorial, sehingga halaman menampilkan isi fungsi alih-alih teks. Sekarang mengembalikan $scope.tutorialName.

Keluaran:

Tentukan Metode di Pengontrol AngularJS

Sejauh ini semuanya berada dalam satu file. Aplikasi produksi menyimpan controller secara terpisah, yang akan ditunjukkan pada bagian selanjutnya.

Pengontrol AngularJS dengan Contoh ng-Controller

Contoh “HelloWorld” di atas menempatkan semua fungsionalitas dalam satu file. Sekarang saatnya memindahkan kode controller ke file tersendiri.

Langkah 1) Di dalam file app.js, tambahkan kode berikut untuk controller Anda.

Pengontrol AngularJS dengan ng-Controller

angular.module('app', [])
  .controller('HelloWorldCtrl', ['$scope', function($scope) {
    $scope.message = "Hello World";
  }]);

Kode di atas melakukan hal berikut:

  1. Mendefinisikan sebuah modul bernama “app” yang berisi controller.
  2. Membuat sebuah controller bernama “HelloWorldCtrl” yang menampilkan pesan “Hello World”.
  3. Menggunakan objek scope untuk meneruskan informasi dari controller ke view, dalam hal ini sebuah variabel bernama message.

Langkah 2) Di Sample.html, tambahkan div yang berisi direktif ng-controller dan referensi ke variabel anggota. messageIngat untuk merujuk ke app.js, yang berisi kode sumber controller.

Pengontrol AngularJS dengan ng-Controller

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="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="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ Koreksi: app.js harus dimuat setelah angular.js, karena ia memanggil angular.moduleVersi aslinya juga memuat pustaka dua kali dan membawa hal yang sama. chrset salah ketik.

Keluaran:

Pengontrol AngularJS dengan ng-Controller

Setiap contoh sejauh ini telah membaca dan menulis properti secara langsung pada $scopeBagian di bawah ini membahas alternatif yang direkomendasikan oleh tim AngularJS.

Cara Menggunakan Sintaks controllerAs di AngularJS

Terikat langsung ke $scope Berfungsi, tetapi menjadi ambigu begitu controller bersarang. Ekspresi tampilan seperti {{name}} tidak memberikan petunjuk pengontrol mana yang memilikinya name, dan karena cakupan anak mewarisi dari cakupan induk secara prototipe, pengontrol bersarang yang menulis ke primitif yang diwarisi secara diam-diam membuat salinan bayangannya sendiri. controllerAs Sintaks tersebut menghilangkan kedua masalah dengan memberikan alias pada setiap controller.

Langkah 1) Beri alias pada controller di view menggunakan as kata kunci, lalu tambahkan alias tersebut di awal setiap binding.

Langkah 2) Di dalam controller, lampirkan properti ke this daripada ke $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

Tiga keuntungan berikut ini. Pengikatan menjadi terdokumentasi dengan sendirinya, karena demo.tutorialName menyebutkan pemiliknya. Pengontrol bersarang berhenti berbenturan, karena induknya diberi alias. outer dan seorang anak dengan nama samaran inner keduanya dapat mengekspos nameNilai juga terikat melalui sebuah objek, bukan hanya tipe data primitif, sehingga menghindariping jebakan di mana perubahan pada komponen anak tidak pernah sampai ke komponen induk.

💡 olymp trade indonesiaTip: Menangkap this menjadi variabel seperti vm Di bagian atas controller. Di dalam callback, this mengacu pada sesuatu yang sama sekali berbeda, dan referensi yang ditangkap menjaga agar pengikatan tetap benar.

Memilih gaya pengikatan adalah satu keputusan. Memutuskan apa yang seharusnya ada di dalam controller adalah keputusan lain, dan perbandingan di bawah ini menunjukkan batasan tersebut.

Controller vs Service di AngularJS

Para pemula sering kali membebani controller dengan pekerjaan yang seharusnya dilakukan oleh sebuah service. Perbedaannya terletak pada masa hidup dan penggunaan kembali: controller hanya ada selama tampilannya berada di layar, sedangkan service adalah singleton yang hidup selama masa hidup aplikasi.

Aspek pengawas Pelayanan
Lifetime Diciptakan dan dihancurkan dengan pandangan Satu instance untuk keseluruhan aplikasi.
Tujuan Siapkan data untuk satu tampilan. Logika bersama, status, dan panggilan server
Dapat digunakan kembali Tidak, terikat pada pemandangannya Ya, bisa disuntikkan di mana saja.
Mempertahankan status di antara tampilan Tidak, negara bagian tersesat dalam navigasi. Ya, negara tetap ada.
Konten khas Properti cakupan dan metode tampilan Panggilan HTTP, caching, aturan bisnis

Buatlah controller sesederhana mungkin. Jika dua controller membutuhkan logika yang sama, atau jika suatu nilai harus tetap ada saat perpindahan antar view, pindahkan ke dalam sebuah service dan suntikkan service tersebut di tempat yang dibutuhkan. Uji praktisnya adalah dengan menanyakan apakah kode tersebut masih masuk akal jika layar saat ini ditutup. Jika jawabannya ya, maka kode tersebut harus berada di dalam sebuah service.

Pertanyaan Umum Demo Slot

Ya. AngularJS membuat instance terpisah dan scope terpisah untuk setiap elemen yang membawa directive tersebut. Instance tersebut tidak berbagi state, sehingga perubahan pada satu instance tidak akan muncul pada instance lainnya.

Deklarasikan di dalam rute ketika controller tersebut merupakan bagian dari keseluruhan view yang dimuat oleh ruteGunakan ng-controller untuk komponen yang muncul di dalam halaman terlepas dari rute saat ini. Jangan pernah mendeklarasikan keduanya, karena controller akan berjalan dua kali.

Gunakan anotasi array, cantumkan nama dependensi sebagai string sebelum fungsi. Minifier mengubah nama argumen fungsi tetapi tidak pernah mengubah literal string, sehingga injector tetap dapat menyelesaikan $scope dan layanan apa pun dengan benar.

Ya. AI Asisten akan menghasilkan modul, pengontrol, dan pengikatan cakupan dari deskripsi layar yang sederhana. Selalu periksa anotasi dependensi, karena kode yang dihasilkan sering kali mengabaikannya.

Alat AI menulis ulang penugasan cakupan sebagai properti pada variabel vm yang ditangkap dan menambahkan awalan alias pada setiap pengikatan tampilan yang cocok. RevLihat panggilan `$watch` dan pendengar peristiwa secara manual, karena hal itu masih memerlukan objek `scope`.

Ringkaslah postingan ini dengan: