AngularJS adalah kerangka pengembangan MVC front-end kelas atas yang dikembangkan oleh Google.
Situs Resmi AngularJS: https://angularjs.org/ Situs web resmi memiliki demo, dan FQ mungkin diminta untuk mengaksesnya
Komunitas Cina AngularJS: http://www.angularjs.cn/ cocok untuk pemula
File referensi: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Catatan Saat Menggunakan Angular
Kutip Perpustakaan AngularJS: https: //github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 .... Anda dapat mengunduhnya di github dalam contoh di bagian ini.
Anda perlu menambahkan NG-App = "AppName" ke area yang Anda gunakan, atau langsung NG-App (Global).
Atur controller ng-controller = "ctrl".
Harap perhatikan poin berikut saat menguji contoh
Anda perlu memperkenalkan kode AngularJS sebelum kepala. Penulis menggunakan Angular-1.0.1.min.js. Harap perhatikan perbedaan versi.
Semua contoh kecil dijalankan di area berikut, ingatlah untuk menambahkan APP-APP ke area aktif.
Berikut ini adalah beberapa kasus kecil untuk menggambarkan instruksi umum dan penggunaan default AngularJS.
Hello World Program (Dual Data Binding)
Gunakan ng-model = {{name}} untuk mengikat data
Salinan kode adalah sebagai berikut:
<label untuk = "name"> Nama: </label>
<input type = "text" ng-model = "name" id = "name"/>
<Hr>
halo: {{name || 'liteng'}}
http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html
Kasing kecil penggunaan ikatan acara
Salinan kode adalah sebagai berikut:
<div>
Harga Unit: <Input Type = "Number" Min = 0 NG-Model = "Harga" Ng-Init = "Harga = 299">
Kuantitas: <input type = "number" min = 0 ng-model = "kuantitas" ng-init = "kuantitas = 1">
<br>
Total harga: {{(harga) * (kuantitas)}}
<dt>
<dl> Catatan: </ll>
<dd> input yang melibatkan html5: <a href = "http://www.w3school.com.cn/html5/att_input_type.asp"> http://www.w3school.com.cn/html5/att_input.asp.aspool.com
<dd> ng-init: Tetapkan nilai awal </dd>
</dt>
</div>
http://2.liteng.sinaapp.com/angularjstest/event-bind.html
NG-INIT: Nilai atribut dapat ditentukan secara default
Salinan kode adalah sebagai berikut:
<p ng-init = "value = 'hello world'"> {{value}} </p>
http://2.liteng.sinaapp.com/angularjstest/ng-init.html
NG-REPEAT: Digunakan untuk mengulangi data yang mirip dengan I untuk info di JS
Salinan kode adalah sebagai berikut:
<Div ng-init = "friends = [{name: 'jhon', usia: 25}, {name: 'mary', usia: 28}]"> </div>
<p> Saya punya {{friends.length}} teman. Mereka </p>
<ul>
<li ng-repeat = "friend in friends">
[{{$ index+1}}]: {{friend.name}} usia adalah: {{friend.age}}
</li>
</ul>
http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html
NG-Klik: Acara klik Dom
Salinan kode adalah sebagai berikut:
<Div ng-controller = "ctrl">
<tombol ng-dblClick = 'showmsg ()'> {{a}} </button>
</div>
<script>
fungsi ctrl ($ scope) {
$ scope.a = 'halo';
$ scope.showmsg = function () {
$ scope.a = 'dunia';
}
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ng-click.html
NG-Show: Setel Elemen Tampilan
Catatan: ng-show = "! Xx": Tambahkan sebelum nilai atribut! Itu berarti itu pasti akan ditampilkan, jika tidak ditambahkan! Tidak ditampilkan jika tidak pasti
Salinan kode adalah sebagai berikut:
<Div ng-show = "! Show">
ng-show = "!
</div>
<Div ng-show = "show">
ng-show = "show"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-show.html
NG-HIDE: atur elemen bersembunyi
Salinan kode adalah sebagai berikut:
<Div ng-hide = "aaa">
ng-hide = "aaa"
</div>
<div ng-hide = "! aaa">
ng-show = "! aaa"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-hide.html
Gunakan NG-Show untuk membuat efek sakelar
Salinan kode adalah sebagai berikut:
<h2> sakelar </h2>
<a href ng-click = "showlog =! showlog"> Tampilkan logo </a>
<Div ng-show = "showlog">
<img ng-src = "http://liteng.org/sites/default/files/logo.png">
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html
NG-gaya: Mirip dengan gaya default
Harap perhatikan format penulisan di sini: string perlu dimasukkan dalam kutipan
Salinan kode adalah sebagai berikut:
<Div ng-style = "{width: 100+'px', tinggi: 200+'px', latar belakangcolor: 'merah'}">
kotak
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-style.html
Filter: Bidang filter
Salinan kode adalah sebagai berikut:
<verv> {{9999 | Number}} </Div> <!-9.999->
<verv> {{9999+1 | Angka: 2}} </div> <!-10.000.00->
<div> {{9*9 | Mata Uang}} </Div> <!-$ 81.00->
<verv> {{'Hello World' | Uppercase}} </Div> <!-Halo dunia->
http://2.liteng.sinaapp.com/angularjstest/filter.html
ng-template: dapat memuat template
Salinan kode adalah sebagai berikut:
<Div ng-include = "'tpl.html'"> </div>
tpl.html
Salinan kode adalah sebagai berikut:
<h1> halo </h1>
http://2.liteng.sinaapp.com/angularjstest/show-tpl.html
$ http: Metode yang mirip dengan AJAX bekerja dengan sangat baik
Salinan kode adalah sebagai berikut:
<Div ng-controller = "testctrl">
<H2> HTTP Method 1 </h2>
<ul>
<li ng-repeat = "x in name">
{{x.name}}+{{x.country}}
</li>
</ul>
</div>
<h2> Metode 2 </h2>
<Div ng-controller = "testctrl2">
<ul>
<li ng-repeat = "y in info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<script>
// Metode 1
var testctrl = fungsi ($ scope, $ http) {
var p = $ http ({
Metode: 'dapatkan',
URL: 'json/date.json'
});
p.success (fungsi (respons, status, header, config) {
$ scope.names = respons;
});
P.Error (function (status) {
console.log (status);
});
}
// Metode 2
fungsi testctrl2 ($ scope, $ http) {
$ http.get ('json/yiqi_article.json'). Success (function (response) {
$ scope.info = respons;
});
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ajax.html
Semua kode di atas: https://github.com/litengdesign/angularjstest
Demo yang diimplementasikan: http://2.liteng.sinaapp.com/angularjstest/index.html
Adapun router dan arahan AngularJS, saya akan mengeluarkannya secara terpisah di lain waktu.