Aplikasi AngularJS Hello World: Program Contoh Pertama Anda

Oleh: James Hartman James Hartman
Hours Updated

Cara terbaik untuk melihat kekuatan Aplikasi AngularJS adalah dengan membuat program dasar pertama Anda, aplikasi “Hello World” di Angular.JS.

Ada banyak lingkungan pengembangan terintegrasi yang dapat Anda gunakan untuk pengembangan AngularJS, beberapa di antaranya yang populer disebutkan di bawah. Dalam contoh kami, kami menggunakan Webstorm sebagai IDE kami.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Halo dunia, AngularJS

Contoh di bawah ini menunjukkan cara termudah untuk membuat aplikasi “Hello world” pertama Anda di AngularJS.

Program AngularJS Halo Dunia

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Penjelasan Kode:

  1. The "ng-aplikasiKata kunci ” digunakan untuk menunjukkan bahwa aplikasi ini harus dianggap sebagai aplikasi js sudut. Nama apa pun dapat diberikan untuk aplikasi ini.
  2. Pengontrol inilah yang digunakan untuk menampung logika bisnis. Pada tag h1 kita ingin mengakses controller yang akan memiliki logika untuk menampilkan “HelloWorld”, jadi kita dapat mengatakan, dalam tag ini kita ingin mengakses controller bernama “HelloWorldCtrl”.
  3. Kami menggunakan variabel anggota yang disebut “pesan” yang tidak lain hanyalah pengganti untuk menampilkan pesan “Halo Dunia”.
  4. "Tag skrip" digunakan untuk mereferensikan skrip Angular.js yang memiliki semua fungsi yang diperlukan untuk Angular js. Tanpa referensi ini, jika kita mencoba menggunakan fungsi AngularJS apa pun, fungsi tersebut tidak akan berfungsi.
  5. "Pengontrol" adalah tempat di mana kita sebenarnya menciptakan logika bisnis, yaitu pengontrol kita. Spesifikasi masing-masing kata kunci akan dijelaskan pada bab selanjutnya. Yang penting untuk diperhatikan adalah kita mendefinisikan metode pengontrol yang disebut 'HelloWorldCtrl' yang direferensikan pada Langkah 2.
  6. Kami membuat "fungsi" yang akan dipanggil ketika kode kami memanggil pengontrol ini. Objek $scope adalah objek khusus di AngularJS yang merupakan objek global yang digunakan dalam Angular.js. Objek $scope digunakan untuk mengelola data antara pengontrol dan tampilan.
  7. Kami membuat variabel anggota yang disebut "pesan", memberinya nilai "HelloWorld" dan melampirkan variabel anggota ke objek cakupan.

CATATAN: Direktif ng-controller adalah kata kunci yang didefinisikan di AngularJS (langkah#2) dan digunakan untuk mendefinisikan pengontrol di aplikasi Anda. Di sini, di aplikasi kita, kita telah menggunakan kata kunci ng-controller untuk mendefinisikan pengontrol bernama 'HelloWorldCtrl'. Logika sebenarnya untuk pengontrol akan dibuat pada (langkah#5).

Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Pesan 'Halo Dunia' akan ditampilkan.

Program AngularJS Halo Dunia