Aplikasi AngularJS Hello World: Program Contoh Pertama Anda

Daftar Isi:

Anonim

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

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

  1. Badai web
  2. Teks Sublim
  3. AngularJS Eclipse
  4. Studio visual

Halo dunia, AngularJS

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

Guru99

{{message}}

Penjelasan Kode:

  1. Kata kunci " ng-app " 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 menahan logika bisnis. Di tag h1, kita ingin mengakses kontroler, yang akan memiliki logika untuk menampilkan "HelloWorld", jadi kita dapat mengatakan, di tag ini kita ingin mengakses kontroler bernama "HelloWorldCtrl".
  3. Kami menggunakan variabel anggota yang disebut "message" yang tidak lain adalah placeholder untuk menampilkan pesan "Hello World".
  4. "Tag skrip" digunakan untuk mereferensikan skrip angular.js yang memiliki semua fungsionalitas yang diperlukan untuk angular js. Tanpa referensi ini, jika kami mencoba menggunakan fungsi AngularJS apa pun, mereka tidak akan berfungsi.
  5. "Controller" adalah tempat di mana kita benar-benar membuat logika bisnis kita, yang merupakan pengendali kita. Secara spesifik setiap kata kunci akan dijelaskan pada bab-bab selanjutnya. Yang penting untuk dicatat bahwa kami mendefinisikan metode pengontrol yang disebut 'HelloWorldCtrl' yang direferensikan pada Langkah2.
  6. Kami membuat "fungsi" yang akan dipanggil saat 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 controller dan view.
  7. Kami membuat variabel anggota yang disebut "message", memberikan nilai "HelloWorld" dan melampirkan variabel anggota ke objek cakupan.

CATATAN : Direktif ng-controller adalah kata kunci yang ditentukan di AngularJS (langkah # 2) dan digunakan untuk menentukan pengontrol dalam aplikasi Anda. Di sini, di aplikasi kami, kami telah menggunakan kata kunci ng-controller untuk mendefinisikan sebuah controller bernama 'HelloWorldCtrl'. Logika aktual untuk pengontrol akan dibuat di (langkah # 5).

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

Keluaran:

Pesan 'Hello World' akan ditampilkan.