Teman -teman yang akrab dengan HTML tahu bahwa HTML memiliki banyak atribut. Misalnya, atribut HREF dari tag <a> dapat menentukan alamat URL tautan, dan atribut tipe tag <sput> dapat digunakan untuk menentukan jenis input. Arahan AngularJS menambahkan fungsi ke aplikasi AngularJS dengan memperluas atribut HTML.
Arahan AngularJS digunakan untuk memperpanjang HTML. Ini semua adalah properti khusus yang dimulai dengan awalan NG. Kami akan membahas arahan berikut:
Arahan AngularJS yang umum digunakan
Petunjuk NG-APP menginisialisasi aplikasi AngularJS.
NG-Init Directive menginisialisasi data aplikasi.
Ng-Model Directive mengikat nilai elemen (seperti nilai bidang input) ke aplikasi.
Perintah NG-App
Petunjuk NG-APP memulai aplikasi AngularJS. Itu mendefinisikan elemen root. Secara otomatis menginisialisasi atau memulai aplikasi yang memuat halaman web dari aplikasi AngularJS. Ini juga digunakan untuk memuat berbagai aplikasi Modul AngularJS. Dalam contoh berikut, kami mendefinisikan aplikasi AngularJS default menggunakan atribut NG-App dari elemen Div.
<Div ng-app = ""> ... </div>
NG-Init Directive
Arahan NG-Init menginisialisasi data aplikasi AngularJS. Ini digunakan untuk menempatkan nilai dalam aplikasi untuk menggunakan variabel. Dalam contoh berikut, kami akan menginisialisasi array negara. Gunakan sintaks JSON untuk mendefinisikan array negara.
<Div ng-app = "" ng-init = "country = [{locale: 'en-us', nama: 'Amerika Serikat'}, {locale: 'en-gb', nama: 'Inggris'}, {lokal: 'enfr', nama: 'Prancis'}]"> ... </div>Perintah NG-Model
Arahan Model NG mendefinisikan model/variabel yang digunakan dalam aplikasi AngularJS. Dalam contoh berikut, kami mendefinisikan model yang disebut "Nama".
<Div ng-app = ""> ... <p> Masukkan nama Anda: <input type = "text" ng-model = "name"> </p> </div>
NG-Repeat Directive
NG-RePeat Directive mengulangi setiap item dalam koleksi elemen HTML. Dalam contoh berikut, kami telah mengulangi negara -negara array.
<Div ng-app = ""> ... <p> Daftar negara dengan lokal: </p> <ol> <li ng-repeat = "country in country"> {{'country:' + country.name + ', lokal:' + country.locale}} </li> </l> </div>Contoh Arahan AngularJS
<Div ng-app = "" ng-init = "firstName = 'John'"> <p> Coba masuk ke dalam kotak input: </p> <p> Nama: <input type = "Text" ng-model = "FirstName"> </p> <p> Apa yang Anda ketik
Petunjuk NG-APP memberi tahu AngularJS bahwa elemen <SEV> arus adalah aplikasi AngularJS. Petunjuk NG-Init digunakan untuk menginisialisasi data, yang setara dengan variabel definisi dalam JavaScript. Ikatan data dalam AngularJS, menyinkronkan ekspresi AngularJS dan data AngularJS. {{firstName}} disinkronkan oleh ng-model = "firstName". Contoh di atas akan menyinkronkan konten yang Anda masukkan di kotak input pada halaman.
Melihat
Halaman web dapat berisi beberapa aplikasi AngularJS yang berjalan dalam elemen yang berbeda.
Tidak terlalu umum untuk menginisialisasi data menggunakan NG-init. Anda akan belajar cara yang lebih baik untuk menginisialisasi data Anda di bab -bab berikutnya.
NG-Repeat Directive
Petunjuk NG-Repeat akan mengulangi elemen HTML, yang setara dengan setiap loop dalam JavaScript.
<Div ng-app = "" ng-init = "names = ['jani', 'hege', 'kai']"> <p> Gunakan NG-Repeat ke Loop Arrays </p> <ul> <li ng-repeat = "x in name"> {{x}} </li> </ul> </div>Contoh di atas akan diuraikan ke HTML berikut
<ul> <li> Jani </li> <li> Hege </li> <li> kai </li> </ul>
NG-REPEAT Bekerja pada array objek:
<Div ng-app = "" ng-init = "names = [{name: 'jani', country: 'norwegia'}, {name: 'hege', country: 'swedia'}, {name: 'kai', country: 'Denmark'}]"> <p> Obyek loop: </p> <ul> <li ng-repeat '} "> <p> Object loop: </p> <ul> <li ng-repeat'" name "name" name "name {p> </p> <uR> <'' nePeat '> x.country}} </li> </ul> </div>Ini akan diuraikan ke html berikut:
<ul> <li> Jani, Norwegia </li> <li> Hege, Swedia </li> <li> Kai, Denmark </li> </ul>
Perintah khusus
Selain arahan bawaan di AngularJS, kami juga dapat membuat arahan khusus. Anda dapat menggunakan fungsi. Direktif untuk menambahkan arahan khusus. Untuk menghubungi Petunjuk Kustom, Anda perlu menambahkan nama Petunjuk Kustom ke elemen HTML. Gunakan metode unta untuk menyebutkan arahan, askh5directive, tetapi saat menggunakannya, Anda perlu berpisah dengan - askh5 -directive
<body ng-app = "myapp"> <askh5-sirective> </askh5-disrective> <script> var app = angular.module ("myapp", []); app.directive ("askh5directive", function () {return {template: "<h1> custom directive! </h1>"};Contoh di atas diuraikan sebagai:
<h1> perintah khusus! </h1>
Perintah dapat dipanggil dengan cara berikut:
Nama Elemen: <Kkesh5-Directive> </askh5-sirektif>
Atribut: <Div Askh5-Directive> </Div>
Nama Kelas: <SEV> </Div>
Komentar: <!-Directive: askh5-directive->
Batasi penggunaan pembatasan
Nilai pembatasan bisa menjadi sebagai berikut:
E hanya menggunakan nama elemen
Properti hanya tersedia
C Hanya gunakan nama kelas
M hanya tersedia untuk komentar
Nilai default dari pembatasan adalah EA, yaitu, perintah dapat dipanggil melalui nama elemen dan nama atribut.
var app = angular.module ("myapp", []); app.directive ("askh5directive", function () {return {batasi: "a", template: "<h1> arahan khusus! </h1>"};});AngularJs di atas hanya akan mengizinkan panggilan properti.
Bacaan terkait:
Tutorial Pengantar AngularJS: Ekspresi AngularJS
Konten di atas adalah tutorial pengantar AngularJS dari AngularJS yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!