Arahan AngularJS

AngularJS memanjangkan HTML dengan atribut baharu yang dipanggil Arahan.

AngularJS menambah fungsi pada aplikasi anda melalui arahan terbina dalam.

AngularJS membolehkan anda menyesuaikan arahan.

Arahan AngularJS

Arahan AngularJS ialah atribut HTML lanjutan yang diawali dengan ng-. Arahan

ng-app memulakan aplikasi AngularJS. Arahan

ng-init memulakan data aplikasi. Arahan

ng-model mengikat nilai elemen (seperti nilai medan input) pada aplikasi.

Untuk arahan lengkap, sila rujuk Manual Rujukan AngularJS.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

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

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

</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Arahan

ng-app memberitahu AngularJS bahawa elemen <div> ialah "pemilik" AngularJS aplikasi.

Halaman web boleh mengandungi berbilang aplikasi AngularJS yang dijalankan dalam elemen berbeza.

	一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

Pengikatan data

{{ firstName }} ungkapan dalam contoh di atas ungkapan ialah ungkapan mengikat data AngularJS.

Pengikatan data dalam AngularJS menyegerakkan ungkapan AngularJS dan data AngularJS.

{{ firstName }} disegerakkan melalui ng-model="firstName".

Dalam contoh seterusnya, dua medan teks disegerakkan melalui dua arahan model ng:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div data-ng-app="" data-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>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan instance" untuk melihat contoh dalam talian

Gunakan

	使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

ng-init<🎜> Tidak begitu biasa. Anda akan mempelajari cara yang lebih baik untuk memulakan data dalam bab Pengawal.

Ulang elemen HTML

ng-ulang arahan akan mengulangi elemen HTML:

Instance

rreee

Jalankan instance»

Klik butang "Run instance" untuk melihat contoh dalam talian

ng-repeat arahan digunakan pada tatasusunan objek :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li data-ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat dalam talian instance

AngularJS dengan sempurna menyokong pangkalan data CRUD (tambah Cipta, baca Baca, kemas kini Kemas kini, padam Padam) aplikasi.

	AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。把实例中的对象想象成数据库中的记录。

Fikirkan objek dalam contoh sebagai rekod dalam pangkalan data.

Arahan ng-app Arahan

ng-app mentakrifkan elemen akar bagi aplikasi AngularJS. Perintah

ng-app akan secara automatik but (memulakan secara automatik) aplikasi apabila halaman web dimuatkan.

Nanti anda akan belajar cara ng-app menyambung ke modul kod melalui nilai (seperti ng-app="myModule").

arahan ng-init

ng-init arahan mentakrifkan nilai awal untuk aplikasi AngularJS.

Biasanya, ng-init tidak digunakan. Anda akan menggunakan pengawal atau modul sebagai gantinya.

Anda akan mengetahui lebih lanjut tentang pengawal dan modul kemudian.

arahan ng-model

ng-model arahan Mengikat elemen HTML pada data aplikasi. Arahan

ng-model juga boleh:

Menyediakan pengesahan jenis (nombor, e-mel, diperlukan) untuk data aplikasi.
Berikan status (tidak sah, kotor, tersentuh, ralat) untuk data aplikasi.
Menyediakan kelas CSS untuk elemen HTML.
Ikat elemen HTML pada borang HTML.

arahan ng-repeat

ng-repeat arahan akan Mengklon elemen HTML sekali.

Buat arahan tersuai

Selain arahan terbina dalam AngularJS, kami juga boleh mencipta arahan tersuai.

Anda boleh menggunakan fungsi .directive untuk menambah arahan tersuai.

Untuk memanggil perintah tersuai, nama perintah tersuai perlu ditambahkan pada elemen HTML.

Gunakan bekas unta untuk menamakan arahan, phpDirective, tetapi apabila menggunakannya anda perlu membahagikannya dengan -, php-directive:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<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>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Anda boleh memanggil arahan dengan cara berikut:

Nama elemen
Atribut
Nama Kelas
Ulasan

Kaedah contoh berikut juga boleh mengeluarkan hasil yang sama:

Nama elemen

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat dalam talian instance

Properties

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<php-directive></php-directive>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Nama kelas

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<div php-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Ulasan

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<div class="php-directive"></div>

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "C",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Sekatan Menggunakan

anda boleh mengehadkan arahan anda untuk dipanggil dengan cara tertentu sahaja.

kejadian

dengan menambahkan atribut sekat dan menetapkan nilai kepada "A", Untuk menetapkan arahan, ia hanya boleh dipanggil melalui atribut:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<!-- directive: php-directive -->

<script>
var app = angular.module("myApp", []);
app.directive("phpDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>

</body>
</html>

Run instance»

Klik " Jalankan butang "Instance" untuk melihat contoh dalam talian

sekat Nilainya boleh seperti berikut:

E sebagai nama elemen Gunakan
A sebagai penggunaan atribut
C sebagai nama kelas gunakan
M digunakan sebagai ulasan

sekat Nilai lalai ialah EA, iaitu arahan boleh dipanggil melalui nama elemen dan nama atribut.

Arahan AngularJS

Arahan AngularJS

Instance

Pengikatan data

Contoh

Ulang elemen HTML

Instance

Instance

Arahan ng-app Arahan

arahan ng-init

arahan ng-model

arahan ng-repeat

Buat arahan tersuai

Instance

Instance

Instance

Instance

Instance

Sekatan Menggunakan

kejadian

Instance

Laman web PHP Cina