AngularJS bilan tanishuv
AngularJS — bu JavaScript freymvorki.
Uni HTML sahifaga <script> tegi yordamida qo‘shish mumkin.
AngularJS HTML atributlarini direktivalar bilan kengaytiradi va ma’lumotlarni HTML’ga ifodalar yordamida bog‘laydi.
AngularJS — JavaScript freymvorki
AngularJS — JavaScript’da yozilgan JavaScript freymvorki.
AngularJS JavaScript fayli ko‘rinishida tarqatiladi va veb-sahifaga script tegi yordamida qo‘shilishi mumkin:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS HTML’ni kengaytiradi
AngularJS HTML’ni ng-direktivalar bilan kengaytiradi.
ng-app direktivasi AngularJS ilovasini belgilaydi.
ng-model direktivasi HTML boshqaruv elementlari (input, select, textarea) qiymatini ilova ma’lumotlariga bog‘laydi.
ng-bind direktivasi ilova ma’lumotlarini HTML ko‘rinishiga (view) bog‘laydi.
AngularJS misoli
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
O‘zingiz sinab ko‘ring »
Misol izohi:
Veb-sahifa yuklanganda AngularJS avtomatik ravishda ishga tushadi.
ng-app direktivasi AngularJS’ga <div> elementi AngularJS ilovasining "egasi" ekanini bildiradi.
ng-model direktivasi kiritish maydonining qiymatini name ilova o‘zgaruvchisiga bog‘laydi.
ng-bind direktivasi <p> elementining mazmunini name ilova o‘zgaruvchisiga bog‘laydi.
AngularJS direktivalari
Ko‘rib turganingizdek, AngularJS direktivalari — bu ng prefiksli HTML atributlari.
ng-init direktivasi AngularJS ilovasi o‘zgaruvchilarini initsializatsiya qiladi (boshlang‘ich qiymat beradi).
AngularJS misoli
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
O‘zingiz sinab ko‘ring »
Yoki standartga mos (valid) HTML bilan:
AngularJS misoli
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
O‘zingiz sinab ko‘ring »
Agar sahifangiz HTML standartiga mos (valid) bo‘lishini istasangiz, ng- o‘rniga data-ng- prefiksidan foydalanishingiz mumkin.
Direktivalar haqida ushbu darslikning keyingi qismlarida ancha ko‘proq bilib olasiz.
AngularJS ifodalari
AngularJS ifodalari qo‘sh jingalak qavslar ichida yoziladi: {{ expression }}.
AngularJS ma’lumotlarni aynan ifoda yozilgan joyga "chiqaradi":
AngularJS misoli
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
O‘zingiz sinab ko‘ring »
AngularJS ifodalari AngularJS ma’lumotlarini HTML’ga ng-bind direktivasi bilan bir xil tarzda bog‘laydi.
AngularJS misoli
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
O‘zingiz sinab ko‘ring »
Ifodalar haqida ushbu darslikning keyingi qismlarida batafsilroq bilib olasiz.
AngularJS ilovalari
AngularJS modullari AngularJS ilovalarini belgilaydi.
AngularJS kontrollerlari AngularJS ilovalarini boshqaradi.
ng-app direktivasi ilovani, ng-controller direktivasi esa kontrollerni belgilaydi.
AngularJS misoli
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
O‘zingiz sinab ko‘ring »
AngularJS modullari ilovalarni belgilaydi:
AngularJS moduli
var app = angular.module('myApp', []);
AngularJS kontrollerlari ilovalarni boshqaradi:
AngularJS kontrolleri
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Modullar va kontrollerlar haqida ushbu darslikning keyingi qismlarida batafsilroq bilib olasiz.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!