Ringkasan pengetahuan asas Angularjs dan contoh_AngularJS

angularjs ialah rangka kerja pembangunan mvc hadapan mewah yang dibangunkan oleh Google.

Tapak web rasmi Angularjs: https://angularjs.org/ Laman web rasmi mempunyai demo, akses mungkin memerlukan FQ

Komuniti Cina Angularjs: http://www.angularjs.cn/ Sesuai untuk pemula

Fail rujukan: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

Berhati-hati apabila menggunakan sudut

Petik pustaka angularjs: https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... Anda boleh memuat turunnya dari github contoh dalam bahagian ini
Anda perlu menambah ng-app="appName" di kawasan yang anda gunakan, atau terus ng-app (global).
Tetapkan pengawal ng-controller="Ctrl".
Sila ambil perhatian perkara berikut semasa menguji contoh

Anda perlu memperkenalkan kod angularjs sebelum kepala Pengarang menggunakan angular-1.0.1.min.js.
Semua contoh kecil dijalankan di kawasan berikut. Ingat untuk menambah ng-app dalam skop.
Berikut menggunakan beberapa kes kecil untuk menggambarkan arahan biasa lalai dan penggunaan angularjs.

program helo world (pengikatan data berganda)

Gunakan ng-model={{name}} untuk mengikat data

Salin kod Kod adalah seperti berikut:

nama:

---

helo:{{name ||. 'liteng'}}

http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

Kes kecil menggunakan pengikatan acara

Salin kod Kod adalah seperti berikut:

Harga seunit:
Kuantiti:

Jumlah harga: {{(harga) * (kuantiti)}}

Nota:

Input yang melibatkan html5: http://www.w3school.com.cn/ html5 /att_input_type.asp

http://www.w3school.com.cn/html5/att_input_type.asp">>

ng-init: Tetapkan nilai awal

http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

ng-init: nilai atribut boleh ditentukan secara lalai

Salin kod Kod adalah seperti berikut:

{{value}}

http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

ng-repeat: digunakan untuk mengulang data yang serupa dengan i untuk maklumat dalam js

Salin kod Kod adalah seperti berikut:

Saya mempunyai {{friends.length}} kawan. Mereka ialah

• 
  [{{$index 1}}]: Umur {{friend.name}} ialah: {{friend.age}}
  

http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

ng-click:acara klik dom

Salin kod Kod adalah seperti berikut:

{{a}}

Fungsi ctrl($skop){
$scope.a='hello';
         $scope.showMsg=function(){
          $scope.a='world';
}
}

http://2.liteng.sinaapp.com/angularjsTest/ng-click.html

ng-show: Tetapkan paparan elemen

Nota: ng-show="!xx": Tambahkan di hadapan nilai atribut! Menunjukkan pengesahan paparan, jika tidak ditambah! Jika tidak pasti, jangan paparkan

Salin kod Kod adalah seperti berikut:

ng-show="!show"

ng-show="show"

http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

ng-hide: Tetapkan elemen untuk disembunyikan

Salin kod Kod adalah seperti berikut:

ng-hide="aaa"

ng-show="!aaa"

http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

Gunakan ng-show untuk mencipta kesan togol

Salin kod Kod adalah seperti berikut:

togol

Tunjukkan logo

http://liteng.org/sites/default/files/logo.png" alt="">

http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html

gaya ng: serupa dengan gaya lalai

Sila beri perhatian kepada format penulisan di sini: rentetan perlu disertakan dalam petikan

Salin kod Kod adalah seperti berikut:

kotak

http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

penapis: medan penapis

Salin kod Kod adalah seperti berikut:

{{9999|nombor}}

{{9999 1 |nombor:2}}

{{9*9|mata wang}}

{{'hello world' |. huruf besar}}

http://2.liteng.sinaapp.com/angularjsTest/filter.html

ng-template: Templat boleh dimuatkan

Salin kod Kod adalah seperti berikut:

tpl.html

Salin kod Kod adalah seperti berikut:

hello

http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$http: Kaedah seperti ajax berfungsi dengan baik

Salin kod Kod adalah seperti berikut:

kaedah permintaan HTTP 1

          
• 
  {{x.Nama}} {{x.Negara}}
                                                                                                                                                                                                                                     

Kaedah 2

         
• 
  {{y.aid}} {{y.title}}
                                                                                                                                                                                                                                     

//Kaedah 1
var TestCtrl=function($scope,$http){
        var p=$http({
Kaedah:'DAPAT',
                                     
url:'json/date.json'
          });            p.success(fungsi(respons,status,header,config){
                $scope.names=respons;
          });
           kesalahan(fungsi(status){
console.log(status);
          });
}
//Kaedah 2
Function TestCtrl2($scope,$http){
           $http.get('json/yiqi_article.json').success(fungsi(respons){
                  $scope.info=respons;
});
}

http://2.liteng.sinaapp.com/angularjsTest/ajax.html

Semua kod di atas: https://github.com/litengdesign/angularjsTest

Demo dilaksanakan: http://2.liteng.sinaapp.com/angularjsTest/index.html

Mengenai penghalaan (penghala) dan arahan (arahan) angularjs, saya akan membincangkannya secara berasingan pada masa akan datang.