AngularJS Pendahuluan
AngularJS adalah kerangka JavaScript. Hal ini dapat ditambahkan ke halaman HTML melalui tag <script>.
AngularJS oleh direktif meluas HTML, dan melalui ekspresi data yang mengikat HTML.
AngularJS adalah kerangka JavaScript
AngularJS adalah kerangka JavaScript. Ini adalah perpustakaan yang ditulis dalam JavaScript.
File AngularJS JavaScript bentuk rilis dapat ditambahkan dengan tag script ke halaman:
 | Kami mengusulkan script pada bagian bawah <body> elemen. Hal ini akan meningkatkan kecepatan loading halaman, karena HTML tidak dikenakan memuat script untuk memuat. |
|---|
Setiap versi angular.js Download: https://github.com/angular/angular.js/releases
AngularJS meluas HTML
AngularJS oleh ng-arahan diperpanjang HTML.
ng-aplikasi direktif mendefinisikan aplikasi AngularJS.
ng-Model perintah nilai-nilai elemen (seperti nilai dari field input) terikat ke aplikasi.
perintah ng-mengikat untuk mengikat data aplikasi ke tampilan HTML.
AngularJS contoh
<Html>
<Head>
<Meta charset = "utf-8 ">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Kepala>
<Body>
<Div ng-app = "" >
<P> Nama: <input type = "text" ng-model = "nama"> </ p>
<H1> Hello {{nama} } </ h1>
</ Div>
</ Body>
</ Html>
Coba »
Contoh untuk menjelaskan:
Ketika halaman dibuka, AngularJS otomatis.
ng-aplikasi direktif memberitahu AngularJS, <div> unsur adalah aplikasi AngularJS dari "pemilik."
ng-Model direktif mengikat nilai field input ke aplikasi nama variabel.
ng-mengikat perintah untuk nama variabel aplikasi terikat untuk sebuah paragraf innerHTML.
| Jika Anda menghapus direktif ng-aplikasi, HTML akan ditampilkan langsung ke ekspresi, tidak untuk mengevaluasi ekspresi hasil. |
|---|
Apa AngularJS?
AngularJS membuat perkembangan modern aplikasi satu halaman (SPA: Halaman Aplikasi Single) lebih mudah.
- AngularJS data aplikasi mengikat elemen HTML.
- AngularJS elemen HTML dapat dikloning dan ulangi.
- AngularJS dapat menyembunyikan dan menampilkan elemen HTML.
- AngularJS dapat menambahkan kode untuk elemen HTML "di belakang."
- AngularJS mendukung validasi input.
AngularJS arahan
Seperti yang Anda lihat, instruksi AngularJS diawali atribut HTML ng.
perintah ng-init untuk menginisialisasi variabel aplikasi AngularJS.
AngularJS contoh
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
Coba »
| HTML5 memungkinkan Anda untuk memperpanjang (buatan sendiri) properti untuk awal data-. AngularJS properti ng- awal, tapi Anda dapat menggunakan data-ng- untuk membuat halaman web untuk HTML5 yang valid. |
|---|
Dengan HTML5 yang valid:
AngularJS contoh
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
Coba »
ekspresi AngularJS
AngularJS ekspresi ditulis dalam kurung keriting: {{ekspresi}}.
ekspresi AngularJS untuk mengikat data ke HTML, yang perintah ng-mengikat memiliki tujuan yang sama.
AngularJS ekspresi dalam posisi menulis data "output".
AngularJS ekspresi seperti ekspresi JavaScript: mereka dapat berisi teks, operator, dan variabel.
Contoh 5 + 5 {{}} atau {{firstName + "" + lastName}}
AngularJS contoh
<Html>
<Head>
<Meta charset = "utf-8">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Kepala>
<Body>
<Div ng-app = "">
<P> ekspresi pertama saya: {{5 + 5}} </ p>
</ Div>
</ Body>
</ Html>
Coba »
AngularJS Aplikasi
AngularJS modul (Modul) mendefinisikan aplikasi AngularJS.
AngularJS Controller (Controller) untuk mengendalikan aplikasi AngularJS.
ng-aplikasi direktif mendefinisikan aplikasi, ng-controller mendefinisikan controller.
AngularJS contoh
Nama: <input type = "text" ng-model = "firstName"> Situs
Nama asli: <input type = "text" ng-model = "lastName"> Situs
Situs
Nama: {{firstName + "" + lastName}}
</ Div>
<Script>
var aplikasi = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ lingkup) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
</ Script>
Coba »
AngularJS definisi modul aplikasi:
modul AngularJS
AngularJS aplikasi controller:
AngularJS Controller
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
Dalam tutorial berikutnya Anda akan belajar lebih banyak pengetahuan dan aplikasi modul.