Ringkasan fungsi AngularJS_AngularJS yang paling biasa digunakan

AngularJS memudahkan pembangunan aplikasi dengan mempersembahkan pembangun dengan tahap abstraksi yang lebih tinggi. Seperti teknik abstraksi yang lain, beberapa fleksibiliti hilang. Dengan kata lain, tidak semua aplikasi sesuai untuk AngularJS. AngularJS terutamanya prihatin dengan membina aplikasi CRUD. Nasib baik, sekurang-kurangnya 90% daripada aplikasi WEB adalah aplikasi CRUD. Tetapi untuk memahami apa yang sesuai untuk membina dengan AngularJS, anda perlu memahami perkara yang tidak sesuai untuk membina dengan AngularJS.

Sebagai contoh, permainan, editor antara muka grafik, aplikasi dengan operasi DOM yang kerap dan kompleks adalah sangat berbeza daripada aplikasi CRUD, dan ia tidak sesuai untuk dibina dengan AngularJS. Dalam situasi seperti ini mungkin lebih baik untuk menggunakan beberapa teknologi yang lebih ringan dan mudah seperti jQuery.

Teg ng-ulang keluaran lelaran pertama

ng-repeat menggabungkan dengan sempurna jadual ul ol dan teg lain dengan tatasusunan dalam js

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

Anda juga boleh menentukan susunan output:

<li ng-repeat="person in persons | orderBy:'name'">

Ikatan dinamik kedua teg model ng

Sebarang teg html dengan input pengguna dan nilai boleh diikat secara dinamik kepada pembolehubah dalam js, dan ia adalah pengikatan dinamik.

<input type="text" ng-model='password'>

Untuk pembolehubah terikat, anda boleh menggunakan {{}} untuk merujuk terus

<span>you input password is {{password}}</span>

Jika anda biasa dengan fiter, anda boleh mengeluarkan dengan mudah dalam format yang anda perlukan

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

Acara klik mengikat ketiga acara ng-klik

Menggunakan ng-click anda boleh mengikat acara klik dengan mudah pada label.

<button ng-click="pressMe()"/>

Sudah tentu, premisnya ialah anda perlu menentukan kaedah pressMe anda sendiri dalam domain $scope.

Tidak seperti kaedah onclick tradisional, anda juga boleh menghantar objek ke kaedah ng-click, seperti ini:

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

Dan sudah tentu teg ng-dblclick

Pernyataan cawangan keempat: ng-switch on, ng-if/ng-show/ng-hide/ng-disable tags

Penyata cawangan membolehkan anda menulis pertimbangan logik pada antara muka.

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

Tatabahasa Pengesahan Kelima: ng-trim ng-minlength ng-maxlength diperlukan ng-pattern dan tag lain

Untuk kotak input dalam borang, anda boleh menggunakan teg di atas untuk mengesahkan input pengguna.
Anda sudah tahu apa yang mereka maksudkan, secara literal.

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

Anda boleh menggunakan $scope.yourForm.inputText.$error.required untuk menentukan sama ada kotak input kosong

Anda boleh menggunakan $scope.yourForm.inputText.$invalid untuk menentukan sama ada kandungan input memenuhi corak ng, ng-maxlength, maxlength

Kandungan input yang anda perolehi melalui $scope.userNum mempunyai ruang kosong di hadapan dan di belakang dialih keluar kerana kewujudan ng-trim.

Teg pilihan ng kotak lungsur keenam

ng-options ialah teg yang dicipta khas untuk kotak lungsur.

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>

Kotak lungsur turun memaparkan person.name Apabila anda memilih salah satu daripada mereka, anda boleh mendapatkan person.id yang anda pilih melalui yourSelected.

Ketujuh: Kawal teg gaya ng css

gaya ng membantu anda mengawal atribut css anda dengan mudah

<span ng-style="myColor">your color</span>

Anda boleh menukar kesan yang anda inginkan dengan memberikan nilai kepada myColor, seperti ini:

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

Objek $http kelapan untuk permintaan tak segerak.

AngularJS menyediakan objek yang serupa dengan $.ajax jquery untuk permintaan tak segerak.
Operasi tak segerak sangat dihormati dalam AngularJS, jadi operasi $http semuanya tak segerak, tidak seperti jquery.ajax yang turut menyediakan parameter tak segerak.

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

Jika anda membuat permintaan POST, data dalam params akan diletakkan di hujung URL untuk anda, dan data dalam data akan dimasukkan ke dalam badan permintaan.

Di atas telah berkongsi dengan anda lapan fungsi AngularJS yang paling biasa digunakan, saya harap ia akan membantu anda!