AngularJS modullari
AngularJS moduli ilovani belgilaydi.
Modul — ilovaning turli qismlari uchun konteyner.
Modul — ilova kontrollerlari uchun konteyner.
Kontrollerlar doimo biror modulga tegishli bo‘ladi.
Modul yaratish
Modul AngularJS’ning angular.module funksiyasi yordamida yaratiladi
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" parametri ilova ishlaydigan HTML elementiga ishora qiladi.
Endi AngularJS ilovangizga kontrollerlar, direktivalar, filtrlar va boshqalarni qo‘shishingiz mumkin.
Kontroller qo‘shish
Ilovangizga kontroller qo‘shing va kontrollerga ng-controller direktivasi orqali murojaat qiling:
Misol
<div ng-app="myApp" ng-controller="myCtrl">
{{ 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 »
Kontrollerlar haqida ushbu darslikning keyingi qismlarida batafsilroq bilib olasiz.
Direktiva qo‘shish
AngularJS’da ilovangizga funksionallik qo‘shish uchun foydalanishingiz mumkin bo‘lgan o‘rnatilgan direktivalar to‘plami mavjud.
To‘liq ma’lumot uchun AngularJS direktivalari ma’lumotnomasiga tashrif buyuring.
Bundan tashqari, modul yordamida ilovalaringizga o‘z direktivalaringizni qo‘shishingiz mumkin:
Misol
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
O‘zingiz sinab ko‘ring »
Direktivalar haqida ushbu darslikning keyingi qismlarida batafsilroq bilib olasiz.
Fayllardagi modullar va kontrollerlar
AngularJS ilovalarida modul va kontrollerlarni JavaScript fayllariga joylashtirish odatiy holdir.
Ushbu misolda "myApp.js" ilova moduli ta’rifini, "myCtrl.js" esa kontrollerni o‘z ichiga oladi:
Misol
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
O‘zingiz sinab ko‘ring »
myApp.js
var app = angular.module("myApp", []);
Modul ta’rifidagi [] parametri bog‘liq modullarni belgilash uchun ishlatilishi mumkin.
[] parametri bo‘lmasa, siz yangi modulni yaratmaysiz, balki mavjudini olasiz.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funksiyalar global nomlar fazosini ifloslantirishi mumkin
JavaScript’da global funksiyalardan qochish kerak.
Ularni boshqa skriptlar osongina qayta yozib yuborishi yoki yo‘q qilishi mumkin.
AngularJS modullari barcha funksiyalarni modul doirasida lokal saqlash orqali bu muammoni kamaytiradi.
Kutubxonani qachon yuklash kerak
HTML ilovalarida skriptlarni <body> elementining oxiriga joylashtirish odatiy hol bo‘lsa-da, AngularJS kutubxonasini <head> ichida yoki <body> elementining boshida yuklash tavsiya etiladi.
Buning sababi shundaki, angular.module chaqiruvlari faqat kutubxona yuklanganidan keyingina kompilyatsiya qilinishi mumkin.
Misol
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!