Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

AngularJS direktivalari

AngularJS HTML’ni direktivalar deb ataluvchi yangi atributlar bilan kengaytirish imkonini beradi.

AngularJS’da ilovalaringizga funksionallik taqdim etadigan o‘rnatilgan direktivalar to‘plami mavjud.

AngularJS o‘z direktivalaringizni belgilash imkonini ham beradi.

ULASHISH

AngularJS direktivalari

AngularJS direktivalari — ng- prefiksli kengaytirilgan HTML atributlari.

ng-app direktivasi AngularJS ilovasini initsializatsiya qiladi.

ng-init direktivasi ilova ma’lumotlarini initsializatsiya qiladi.

ng-model direktivasi HTML boshqaruv elementlari (input, select, textarea) qiymatini ilova ma’lumotlariga bog‘laydi.

Barcha AngularJS direktivalari haqida AngularJS direktivalari ma’lumotnomasida o‘qing.

Misol

<div ng-app="" ng-init="firstName='John'"> <p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p> </div>
O‘zingiz sinab ko‘ring »

ng-app direktivasi, shuningdek, AngularJS’ga <div> elementi AngularJS ilovasining "egasi" ekanini bildiradi.

Ma’lumotlarni bog‘lash

Yuqoridagi misoldagi {{ firstName }} ifodasi — AngularJS’ning ma’lumotlarni bog‘lash ifodasi.

AngularJS’da ma’lumotlarni bog‘lash AngularJS ifodalarini AngularJS ma’lumotlari bilan bog‘laydi.

{{ firstName }} ng-model="firstName" bilan bog‘langan.

Keyingi misolda ikkita matn maydoni ikkita ng-model direktivasi yordamida bir-biriga bog‘langan:

Misol

<div ng-app="" ng-init="quantity=1;price=5"> Quantity: <input type="number" ng-model="quantity"> Costs:    <input type="number" ng-model="price"> Total in dollar: {{ quantity * price }} </div>
O‘zingiz sinab ko‘ring »

ng-init kamdan-kam ishlatiladi.

Ma’lumotlarni qanday initsializatsiya qilishni kontrollerlar haqidagi bobda o‘rganasiz.

HTML elementlarini takrorlash

ng-repeat direktivasi HTML elementini takrorlaydi:

Misol

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">   <ul>     <li ng-repeat="x in names">       {{ x }}     </li>   </ul> </div>
O‘zingiz sinab ko‘ring »

ng-repeat direktivasi aslida to‘plamdagi har bir element uchun bir martadan HTML elementlarini klonlaydi.

Obyektlar massivida ishlatilgan ng-repeat direktivasi:

Misol

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <ul>   <li ng-repeat="x in names">     {{ x.name + ', ' + x.country }}   </li> </ul> </div>
O‘zingiz sinab ko‘ring »

AngularJS ma’lumotlar bazasi bilan ishlaydigan CRUD (Create Read Update Delete) ilovalari uchun juda mos.
Bu obyektlar ma’lumotlar bazasidagi yozuvlar ekanini tasavvur qilib ko‘ring.

ng-app direktivasi

ng-app direktivasi AngularJS ilovasining ildiz (root) elementini belgilaydi.

Veb-sahifa yuklanganda ng-app direktivasi ilovani auto-bootstrap qiladi (avtomatik initsializatsiya qiladi).

ng-init direktivasi

ng-init direktivasi AngularJS ilovasi uchun boshlang‘ich qiymatlarni belgilaydi.

Odatda ng-init’dan foydalanmaysiz.

Uning o‘rniga kontroller yoki moduldan foydalanasiz.

Kontrollerlar va modullar haqida keyinroq batafsilroq bilib olasiz.

ng-model direktivasi

ng-model direktivasi HTML boshqaruv elementlari (input, select, textarea) qiymatini ilova ma’lumotlariga bog‘laydi.

ng-model direktivasi shuningdek:

  • Ilova ma’lumotlari uchun tip tekshiruvini ta’minlaydi (number, email, required).
  • Ilova ma’lumotlarining holatini taqdim etadi (invalid, dirty, touched, error).
  • HTML elementlari uchun CSS klasslarini taqdim etadi.
  • HTML elementlarini HTML formalariga bog‘laydi.

ng-model direktivasi haqida keyingi bobda batafsilroq o‘qing.

Yangi direktivalar yaratish

AngularJS’ning barcha o‘rnatilgan direktivalaridan tashqari, o‘z direktivalaringizni ham yaratishingiz mumkin.

Yangi direktivalar .directive funksiyasi yordamida yaratiladi.

Yangi direktivani chaqirish uchun yangi direktiva bilan bir xil teg nomiga ega HTML elementini yarating.

Direktivaga nom berayotganda camelCase nomdan foydalanishingiz kerak, w3TestDirective, ammo uni chaqirayotganda - bilan ajratilgan nomdan foydalanishingiz kerak, w3-test-directive:

Misol

<body ng-app="myApp"> <w3-test-directive></w3-test-directive> <script> var app = angular.module("myApp", []); app.directive("w3TestDirective", function() {   return {     template : "<h1>Made by a directive!</h1>"   }; }); </script> </body>
O‘zingiz sinab ko‘ring »

Direktivani quyidagilar orqali chaqirishingiz mumkin:

  • Element nomi
  • Atribut
  • Klass
  • Izoh

Quyidagi misollarning barchasi bir xil natija beradi:

Element nomi

<w3-test-directive></w3-test-directive>
O‘zingiz sinab ko‘ring »

Atribut

<div w3-test-directive></div>
O‘zingiz sinab ko‘ring »

Klass

<div class="w3-test-directive"></div>
O‘zingiz sinab ko‘ring »

Izoh

<!-- directive: w3-test-directive -->
O‘zingiz sinab ko‘ring »

Cheklovlar

Direktivalaringizni faqat ayrim usullar bilan chaqiriladigan qilib cheklashingiz mumkin.

Misol

"A" qiymatiga ega restrict xususiyatini qo‘shish orqali direktivani faqat atributlar orqali chaqiriladigan qilish mumkin:

var app = angular.module("myApp", []); app.directive("w3TestDirective", function() {   return {     restrict : "A",     template : "<h1>Made by a directive!</h1>"   }; });
O‘zingiz sinab ko‘ring »

restrict uchun ruxsat etilgan qiymatlar:

  • E — element nomi uchun
  • A — atribut uchun
  • C — klass uchun
  • M — izoh uchun

Standart holatda qiymat EA bo‘ladi, ya’ni direktivani ham element nomlari, ham atribut nomlari orqali chaqirish mumkin.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish