Latest web development tutorials

AngularJS arahan

Properti baru ini disebut oleh AngularJS arahan untuk memperpanjang HTML.

AngularJS instruksi built-in untuk aplikasi untuk menambah fungsionalitas.

AngularJS memungkinkan Anda untuk menyesuaikan instruksi.

AngularJS arahan

instruksi AngularJS adalah perluasan dari HTML atribut dengan ng- awalan.

instruksi ng-aplikasi untuk menginisialisasi aplikasi AngularJS.

perintah ng-init untuk menginisialisasi data aplikasi.

ng-Model perintah nilai-nilai elemen (seperti nilai dari field input) terikat ke aplikasi.

Petunjuk lengkap dapat ditemukan dalam isi panduan AngularJS referensi .

AngularJS contoh

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>

</div>

Coba »

ng-aplikasi direktif memberitahu AngularJS, <div> unsur adalah aplikasi AngularJS dari "pemilik."

catatan Sebuah halaman web dapat berisi beberapa aplikasi run AngularJS dalam elemen yang berbeda.

Data Binding

Dalam contoh di atas {{firstName}} AngularJS ekspresi adalah ekspresi data-mengikat.

AngularJS binding data, disinkronkan dengan AngularJS AngularJS data ekspresi.

{{FirstName}} oleh ng-model = "firstName" sinkronisasi.

Pada contoh berikut, dua bidang teks dihitung melalui dua sinkronisasi instruksi ng-Model:

AngularJS contoh

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

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

Coba »

catatan Gunakan ng-init tidak sangat umum. Anda akan belajar untuk menjadi cara yang lebih baik untuk menginisialisasi data dalam bab kontroler.

elemen HTML ulangi

instruksi ng-repeat mengulangi elemen HTML:

AngularJS contoh

<Div ng-app = "" ng-init = "nama = [ 'Jani', 'Hege', 'Kai']">
<P> Gunakan ng-ulangi loop melalui array </ p>
<Ul>
<Li ng-repeat = "x dalam nama">
{{X}}
</ Li>
</ Ul>
</ Div>

Coba »

instruksi ng-repeat digunakan dalam array obyek:

AngularJS contoh

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

Coba »

catatan CRUD AngularJS dukungan database yang sempurna (meningkatkan Buat, baca Baca, Update Update, Delete Delete) aplikasi.
Pikirkan contoh benda ke catatan dalam database.

ng-aplikasi direktif

ng-aplikasi direktif mendefinisikan akar AngularJS elemen aplikasi.

instruksi ng-aplikasi saat halaman dimuat secara otomatis boot (inisialisasi otomatis) aplikasi.

Kemudian Anda akan belajar bagaimana ng-aplikasi dengan nilai (misalnya, ng-app = "mymodule") yang terhubung ke modul kode.

ng-init perintah

ng-init AngularJS instruksi aplikasi mendefinisikan nilai awal.

Dalam keadaan normal, tidak menggunakan ng-init. Anda akan menggunakan controller atau modul untuk menggantinya.

Kemudian Anda akan belajar lebih banyak tentang pengendali dan modul.

ng-Model direktif

ng model elemen direktif mengikat HTML ke data aplikasi.

ng-Model direktif juga dapat:

  • Memberikan verifikasi dari jenis aplikasi data (nomor, email, diperlukan).
  • Memberikan status data aplikasi (yang tidak valid, kotor, menyentuh, error).
  • Menyediakan kelas CSS untuk elemen HTML.
  • elemen HTML mengikat bentuk HTML.

ng-repeat instruksi

instruksi ng-ulang untuk koleksi (array) dari setiap item akan mengkloning elemen HTML.


Membuat perintah kustom

AngularJS Selain petunjuk built-in, kami juga bisa membuat perintah kustom.

.directive Fungsi dapat Anda gunakan untuk menambahkan perintah kustom.

Untuk memanggil perintah kustom, Anda perlu menambahkan nama perintah kustom pada elemen HTML.

Gunakan metode punuk untuk namadirektif, w3bigDirective, tetapi ketika Anda perlu menggunakannya -segmentasi, w3big-direktif:

AngularJS contoh

<Tubuh ng-app = "myApp ">

<W3big-direktif> </ w3big -directive>

<Script>
var aplikasi = angular.module ( "myApp", []);
app.directive ( "w3bigDirective", function () {
kembali {
Template: "<h1> Instruksi </ h1>!"
};
});
</ Script>

</ Body>

Coba »

Anda dapat menghubungi instruksi dengan cara berikut:

  • nama elemen
  • milik
  • Nama kelas
  • catatan

Berikut dengan cara misalnya dapat output hasil yang sama:

nama elemen

<W3big-direktif> </ w3big -directive>

Coba »

milik

<Div w3big-direktif> </ div>

Coba »

Nama kelas

<Class Div = "w3big-direktif "> </ div>

Coba »

catatan

<- Instruksi :! W3big-direktif ->

Coba »

Pembatasan Gunakan

Anda dapat membatasi instruksi Anda hanya dapat dipanggil oleh cara tertentu.

contoh

Dengan menambahkanmembatasi properti dan menetapkan nilai hanya "A" , untuk mengatur perintah hanya dapat disebut dengan cara properti:

var aplikasi = angular.module ( "myApp" , []);
app.directive ( "w3bigDirective", function ( ) {
kembali {
membatasi: "A",
Template: "<h1> Instruksi </ h1>!"
};
});

Coba »

membatasi nilai mungkin berikut:

  • E digunakan sebagai nama elemen
  • A digunakan sebagai atribut
  • C digunakan sebagai nama kelas
  • M sebagai komentar

membatasi default adalah EA , yang dapat dipanggil oleh unsur perintah dan nama atribut.