13-laboratoriya.
Angular JS da forma
elementlari bilan
ishlash
Fayziyeva Mahbuba Rahimjonovna
Tajriba ishi №11
• Ishdan maqsad: AngularJS da direktivalar va ifodalar bilan ishlash.
Amaliy tajriba ishini bajarishda zaruriy vositalar va axborot manbalari
ta’minoti:
• Har bir tinglovchi uchun ishchi stansiya ajratilgan kompyuter sinifi;
• Wi-FI tarmog’i;
• Mahalliy (local) hisoblash tarmog’i;
• O’rnatilgan Windows 10 operatsion tizim;
• Ma’ruza materiallari.
We b d a st u r l a s h
№11. Angular JS da animatsiyalar va forma elementlari bilan ishlash.
Form ma'lumotlarini bog'lash: AngularJS ikki tomonlama ma'lumotlarni ulashni
ta'minlaydi, bu sizga JavaScript kodingizdagi model ma'lumotlariga shakl
elementlarini bog'lash imkonini beradi.
Siz ng-model direktivasidan kirish maydonlari, belgilash katakchalari va tanlash
kabi shakl elementlarining qiymatini kontrolleringizdagi o'zgaruvchiga bog'lash
uchun foydalanishingiz mumkin.
<input type="text" ng-model="username">
<p>Hello, {{username}}!</p>
We b d a st u r l a s h
№11. Angular JS da animatsiyalar va forma elementlari bilan ishlash.
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = “AXB-ERKINOV";
});
</script>
</body>
</html>
We b d a st u r l a s h
5
We b d a st u r l a s h
6
We b d a st u r l a s h
3. Buyurtma shakli
<!-- Declare a new AngularJS app and associate the controller -->
<form ng-app ng-controller="OrderFormController">
<h1>Services</h1>
<ul>
<!-- Loop through the services array, assign a click handler, and set or
remove the "active" css class if needed -->
<li ng-repeat="service in services" ng-click="toggleActive(service)" ng-
class="{active:service.active}">
<!-- Notice the use of the currency filter, it will format the price -->
{{service.name}} <span>{{service.price | currency}}</span>
</li>
</ul>
<div class="total">
<!-- Calculate the total price of all chosen services. Format it as currency. -->
Total: <span>{{total() | currency}}</span>
</div>
</form>
7
We b d a st u r l a s h
function OrderFormController($scope){
$scope.services = [
{ $scope.toggleActive = function(s){
name: 'Web Development', s.active = !s.active;
price: 300, };
active:true $scope.total = function(){
},{ var total = 0;
name: 'Design', angular.forEach($scope.services, function(s){
price: 400, if (s.active){
active:false total+= s.price;
},{ }
name: 'Integration', });
price: 250, return total;
active:false };}
},{
name: 'Training',
price: 220,
active:false
}
8
]; We b d a st u r l a s h
@import url(https://fonts.googleapis.com/css?family=Cookie); /*----------- The order form-------------*/
*{ form{
margin:0; background-color: #61a1bc;
padding:0; border-radius: 2px;
} box-shadow: 0 1px 1px #ccc;
body{ width: 400px;
font:15px/1.3 'Open Sans', sans-serif; padding: 35px 60px;
color: #5e5b64; margin: 50px auto;
text-align:center; }
} form h1{
a, a:visited { color:#fff;
outline:none; font-size:64px;
color:#389dc1; font-family:'Cookie', cursive;
} font-weight: normal;
a:hover{ line-height:1;
text-decoration:none; text-shadow:0 3px 0 rgba(0,0,0,0.1);
} }
section, footer, header, aside, nav{
display: block; 9
We b d a st u r l a s h
}
form ul{
list-style:none; form ul li.active{
color:#fff; background-color:#8ec16d;
font-size:20px; }
font-weight:bold; div.total{
text-align: left; border-top:1px solid rgba(255,255,255,0.5);
margin:20px 0 15px; padding:15px 30px;
} font-size:20px;
form ul li{ font-weight:bold;
padding:20px 30px; text-align: left;
background-color:#e35885; color:#fff;
margin-bottom:8px; }
box-shadow:0 1px 1px rgba(0,0,0,0.1); div.total span{
cursor:pointer; float:right;
} }
form ul li span{
float:right;
}
10
We b d a st u r l a s h
https://jcoop.io/angular-practice-exercises/
11
We b d a st u r l a s h
13-Topshiriq
1. Angular JS da loyiha (avtomobil do‘koni, turagenstva, kitob do‘koni) mavzusi
asosida yaratgan saytingiz uchun forma elementlari joylashtiring.
2. Keltirilgan topshiriqlarni belgilangan tartibda rasmiylashtiring.
3. https://estudy.iiau.uz/ tizimiga kirib yuklash papkasiga yuklang.
12
We b d a st u r l a s h
Asosiy adabiyotlar
1. HTML и CSS: Design and Build Websites Автор Джон Дакетт; Количество
страниц 480 ; Год выпуска 2017
2. Джон Дакетт; HTML и CSS. Разработка и дизайн веб-сайтов (+ CD-ROM);
Количество страниц 480; Ozon, Год выпуска 2017
3. Web dasturlash: A.I.Dadamuxamedov, T.S.Jumaev, D.S.To‘xtanazarov; darslik;
386-b; 2020 yil
13
We b d a st u r l a s h
Qo‘shimcha adabiyotlar
1. Malchuk EV. HTML and CSS. self-teacher Макфарланд Д. Новая большая
книга CSS – СПб.: Питер, 2016. –720 с.
2. Крис Аквино, Тодд Ганди Front-end. Клиентская разработка для
профессионалов. 2018 Издательство: Питер -512 с.
3. Максим Кузнецов, Игорь Симдянов Самоучитель PHP 7, Издательство –
БХВ -Петербург 2018 – 450 с.
4. Робин Никсон – Создаем динамические веб-сайты с помощью PHP, MySQL,
JavaScript, CSS и HTML5. 4-е издание Год выхода: 2016 – 768 с.
14
We b d a st u r l a s h
Axborot manbaalari
1. www.wschools.com– web dasturlashni o‘rgatuvchi sayt.
2. estudy.iiau.uz – O‘zbekiston xalqaro islom akademiyasi masofaviy ta’lim portali.
3. hemis.iiau.uz – O‘zbekiston xalqaro islom akademiyasi HEMIS OTM portali.
4. https://html.com/– Html dasturlashni o‘rgatuvchi portal.
5. www.udemy.com/ –Web dasturchilar uchun portal.
6. https://htmlacademy.ru/ – web dasturchilar uchun portal.
15
We b d a st u r l a s h
