Arahan AngularJS: ng-init, ng-app, ng-model & ng-repeat

Oleh: James Hartman James Hartman
Hours Updated

Apa itu Direktif di AngularJS?

A Direktif di AngularJS adalah perintah yang memberikan fungsionalitas baru pada HTML. Ketika Angular menelusuri kode HTML, pertama-tama Angular akan menemukan arahan di halaman tersebut dan kemudian mengurai halaman HTML yang sesuai. Contoh sederhana dari direktif AngularJS, yang telah kita lihat di bab sebelumnya adalah “direktif ng-model”. Arahan ini digunakan untuk mengikat model data ke tampilan kita.

Catatan: Anda dapat memiliki kode sudut dasar di halaman HTML dengan arahan ng-init, ng-repeat, dan ng-model tanpa perlu memiliki Pengendali. Logika arahan ini ada di file Angular.js yang disediakan oleh Google. Pengontrol adalah konstruksi pemrograman sudut tingkat berikutnya yang memungkinkan logika bisnis, tetapi seperti yang disebutkan agar aplikasi menjadi aplikasi sudut, tidak wajib memiliki pengontrol.

Cara Membuat Direktif di AngularJS

Seperti yang kami definisikan di pendahuluan, arahan AngularJS adalah cara untuk memperluas fungsionalitas HTML.

Ada 4 arahan yang didefinisikan dalam AngularJS.

Di bawah ini adalah daftar arahan AngularJS beserta contoh yang diberikan untuk menjelaskan masing-masing arahan tersebut.

ng-aplikasi di AngularJS

Ini digunakan untuk menginisialisasi aplikasi Angular.JS. Ketika arahan ini ditempatkan di halaman HTML, pada dasarnya ia memberitahu Angular bahwa halaman HTML ini adalah aplikasi Angular.js.

Contoh aplikasi np

Contoh di bawah ini menunjukkan cara menggunakan direktif ng-app. Dalam contoh ini, kami hanya akan menunjukkan cara membuat aplikasi HTML normal menjadi aplikasi AngularJS.

ng-aplikasi di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

Penjelasan Kode:

  1. Direktif “ng-app” ditambahkan ke tag div kami untuk menunjukkan bahwa aplikasi ini adalah aplikasi sudut.js. Perhatikan bahwa direktif ng-app dapat diterapkan ke tag apa pun, sehingga dapat juga dimasukkan ke dalam tag body.
  2. Karena kita telah mendefinisikan aplikasi ini sebagai aplikasi Angular.js, sekarang kita dapat menggunakan fungsionalitas Angular.js. Dalam kasus kami, kami menggunakan ekspresi untuk menggabungkan 2 string.

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

Keluaran:

ng-aplikasi di AngularJS

Outputnya dengan jelas menunjukkan output dari ekspresi yang hanya dimungkinkan karena kami mendefinisikan aplikasi tersebut sebagai aplikasi AngularJS.

ng-init di AngularJS

Ini digunakan untuk menginisialisasi data aplikasi. Terkadang Anda mungkin memerlukan beberapa data lokal untuk aplikasi Anda, hal ini dapat dilakukan dengan direktif ng-init.

Contoh ng-init

Contoh di bawah ini menunjukkan cara menggunakan direktif ng-init.

Dalam contoh ini, kita akan membuat variabel bernama “TutorialName” menggunakan direktif ng-init dan menampilkan nilai variabel tersebut di halaman.

ng-init di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Penjelasan Kode:

  1. Direktif ng-init ditambahkan ke tag div kami untuk mendefinisikan variabel lokal yang disebut “TutorialName” dan nilai yang diberikan untuk ini adalah “AngularJS”.
  2. Kami menggunakan ekspresi di AngularJs untuk menampilkan output dari nama variabel "TutorialName" yang didefinisikan dalam direktif ng-init kami.

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

Keluaran:

ng-init di AngularJS

Dalam keluarannya,

  • Hasilnya dengan jelas menunjukkan output dari ekspresi yang berisi string “AngularJS”. Hal ini disebabkan oleh string “AngularJS” yang ditugaskan ke variabel 'TutorialName' di bagian ng-init.

ARTIKEL TERKAIT

ng-model di AngularJS

Dan terakhir, kita memiliki direktif ng-model, yang digunakan untuk mengikat nilai kontrol HTML ke data aplikasi. Contoh di bawah ini menunjukkan cara menggunakan direktif ng-model.

Contoh model-ng

Dalam contoh ini,

  • Kita akan membuat 2 variabel yang disebut “kuantitas” dan “harga”. Variabel-variabel ini akan terikat pada 2 kontrol input teks.
  • Kami kemudian akan menampilkan jumlah total berdasarkan perkalian nilai harga dan kuantitas.

ng-model di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Penjelasan Kode:

  1. Direktif ng-init ditambahkan ke tag div kami untuk mendefinisikan 2 variabel lokal; yang satu disebut “kuantitas” dan yang lainnya disebut “harga”.
  2. Sekarang kita menggunakan perintah ng-model untuk mengikat kotak teks “Orang” dan “Harga pendaftaran” ke variabel lokal kita “jumlah” dan “harga”.
  3. Terakhir, kami menampilkan Total melalui ekspresi, yang merupakan perkalian variabel kuantitas dan harga.

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

Keluaran:

ng-model di AngularJS

  • Outputnya dengan jelas menunjukkan perkalian nilai Orang dan harga Pendaftaran.

Sekarang, jika Anda masuk ke kotak teks dan mengubah nilai harga Orang dan Pendaftaran, Total akan otomatis berubah.

ng-model di AngularJS

  • Output di atas hanya menunjukkan kekuatan pengikatan data di AngularJs, yang dicapai dengan penggunaan arahan model-ng.

ng-ulangi di AngularJS

Ini digunakan untuk mengulang elemen HTML. Contoh di bawah ini menunjukkan cara menggunakan arahan ng-ulangi.

Contoh ng-ulangi

Dalam contoh ini,

  • Kita akan memiliki array nama bab dalam variabel array dan
  • lalu gunakan direktif ng-repeat untuk menampilkan setiap elemen array sebagai item daftar

ng-ulangi di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Penjelasan Kode:

  1. Direktif ng-init ditambahkan ke tag div kita untuk mendefinisikan variabel bernama “bab” yang merupakan variabel array yang berisi 3 string.
  2. Elemen ng-repeat digunakan dengan mendeklarasikan variabel inline yang disebut “nama” dan menelusuri setiap elemen dalam array bab.
  3. Terakhir, kami menunjukkan nilai variabel lokal sebaris 'names'.

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

Keluaran:

ng-ulangi di AngularJS

  • Output di atas hanya menunjukkan bahwa direktif ng-repeat mengambil setiap nilai dalam array yang disebut "bab" dan membuat item daftar HTML untuk setiap item dalam array.

Ringkasan

  • Arahan digunakan untuk memperluas fungsionalitas HTML. Angular menyediakan arahan bawaan seperti
    • ng-app – Ini digunakan untuk menginisialisasi aplikasi sudut.
    • ng-init – Ini digunakan untuk membuat variabel aplikasi
    • ng-model – Ini digunakan untuk mengikat kontrol HTML ke data aplikasi
    • ng-repeat – Digunakan untuk mengulang elemen menggunakan sudut.