Bugun biz sintaksis sifatida boshqaruvchi nima ekanligini va nima uchun qamrov yomonligini tahlil qilamiz

Bugun biz sintaksis sifatida boshqaruvchi nima ekanligini va nima uchun qamrov yomonligini tahlil qilamiz.
Oldingi darsdagi misolga biroz o'xshash misol yarataylik.
< div ng-controller= "mainCtrl" >
< divng -controller = "firstCtrl" >
< divng -controller = "secondCtrl" >
{{mening darsim}}



Keling, mainCtrl kontrollerini yaratamiz. Unga birinchi Ctrl kontrollerni, ikkinchi Ctrl ni joylashtiramiz. Ichkarida biz myLesson o'zgaruvchisini ko'rsatamiz.
Endi biz ular uchun kontrollerlarni tasvirlaymiz.
var app = angular.module( 'app' , []);


app.controller( 'mainCtrl' , funktsiya ($scope) {
});


app.controller( 'firstCtrl' , funktsiya ($scope) {
});


app.controller( 'secondCtrl' , funksiya ($scope) {
});
Endi bizda ichki o'rnatilgan kontrollerlar bilan juda standart misol bor. Endi $scope da biz myLesson o'zgaruvchisini yozamiz
var app = angular.module( 'app' , []);


app.controller( 'mainCtrl' , funktsiya ($scope) {
});


app.controller( 'firstCtrl' , funktsiya ($scope) {
});


app.controller( 'secondCtrl' , funksiya ($scope) {
$scope.myLesson = 'Dars' ;
});
Agar biz brauzerga qarasak, unda bizda Lesson satri mavjud. Agar biz ushbu kodni firstCtrl ga ko'chirsak nima bo'ladi?
var app = angular.module( 'app' , []);


app.controller( 'mainCtrl' , funktsiya ($scope) {
});


app.controller( 'firstCtrl' , funktsiya ($scope) {
$scope.myLesson = 'Dars' ;
});


app.controller( 'secondCtrl' , funksiya ($scope) {
});
Agar biz uni mainCtrl-ga o'tkazsak ham, hamma narsa xuddi shunday ishlaydi. Bu, albatta, yaxshi, lekin bizda kodning murakkabligi bor, chunki biz ushbu kod qaysi kontrollerdan chaqirilishini va bu o'zgaruvchining qaerda joylashganini bilmaymiz - secondCtrl, firstCtrl yoki mainCtrl da. Bu kodni yanada murakkablashtiradi.
Bunga yo'l qo'ymaslik uchun sintaksis sifatida boshqaruvchi ishlatiladi.
< div ng-controller= "mainCtrl mainCtrl sifatida" >
< div ng-controller = "firstCtrl birinchiCtrl sifatida" >
< div ng-controller= "secondCtrl, secondCtrl sifatida" >
{{mening darsim}}



Bu nimani anglatadi? Bu shuni anglatadiki, shablonda endi har bir kontroller ichida shu bilan bog'langan mainCtrl, firstCtrl va secondCtrl o'zgaruvchilari mavjud. Keling urinib koramiz. Birinchidan, biz uchta kontrollerda $scope ni olib tashlaymiz.
var app = angular.module( 'app' , []);


app.controller( 'mainCtrl' , funktsiya () {
});


app.controller( 'firstCtrl' , funktsiya () {
});


app.controller( 'secondCtrl' , funktsiya () {
});
Hozir biz mumkin Buning o'rniga foydalaning _ga buyurtma berish $scope dan foydalaning .
app.controller( 'secondCtrl' , funktsiya () {
this .myLesson = 'Dars' ;
});
Endi, agar sahifani yangilasak, hech narsa ko'rsatilmaydi, chunki myLesson o'zgaruvchisi endi mavjud emas. Endi shablonda biz unga faqat secondCtrl o'zgaruvchisi yordamida kira olamiz.
< div ng-controller= "mainCtrl mainCtrl sifatida" >
< div ng-controller = "firstCtrl birinchiCtrl sifatida" >
< div ng-controller= "secondCtrl, secondCtrl sifatida" >
{{secondCtrl.myLesson}}



secondCtrl bu yerda aynan biz secondCtrl da secondCtrl deb e'lon qilgan o'zgaruvchidir. Biz buni ifodada chaqirishimiz mumkin
secondCtrl- ni secondCtrl sifatida
xohlaganingdek. Ko'rib turganimizdek, dars brauzerda ko'rsatiladi. Endi bizda o'zgaruvchi qaysi kontrollerdan chaqirilganligini tushunishda muammo yo'q. U firstCtrl yoki mainCtrl da bo'lishi mumkin emas.
Keling, ushbu kodni boshqa kontrollerlarga nusxalaymiz
var app = angular.module( 'app' , []);


app.controller( 'mainCtrl' , funktsiya () {
this .myLesson = 'Asosiy Dars' ;
});


app.controller( 'firstCtrl' , funktsiya () {
this .myLesson = 'Birinchi Dars' ;
});


app.controller( 'secondCtrl' , funktsiya () {
this .myLesson = 'Ikkinchi Dars' ;
});
Agar myLessonni birinchi Ctrl dan chiqarmoqchi bo'lsak, u holda yozishimiz kerak
{{firstCtrl.myLesson}}
Agar biz mainCtrl dan o'zgaruvchini ko'rsatishni istasak, u holda yozamiz
{{mainCtrl.myLesson}}
Ko'rib turganimizdek, boshqaruvchi sintaksis sifatida ishlashi uchun biz yozishimiz kerak bo'lgan barcha sintaksislar
kontroller- nom sifatida biz foydalanmoqchimiz
va boshqaruvchida bundan foydalaning. Bunday holda biz $scope dan umuman foydalanmasligimiz mumkin.
Keling, qanday ko'rinishini ko'rishingiz uchun ba'zi funksiyalarni qo'shishga harakat qilaylik.
< div ng-controller= "mainCtrl mainCtrl sifatida" >
< div ng-controller = "firstCtrl birinchiCtrl sifatida" >
< div ng-controller= "secondCtrl, secondCtrl sifatida" >
{{secondCtrl.myLesson}}
< button ng-click= 'mainCtrl.addLesson()' >Dars qo'shish



AddLesson funksiyasini shablonda tekshiruvchi o‘zgaruvchisiz yozib bo‘lmaydi. Keyin Angular mainCtrl da addLesson usuliga ega bo'lishini kutadi
app.controller( 'mainCtrl' , funktsiya () {
this .myLesson = 'Asosiy Dars' ;


bu .addLesson = funktsiya () {
console .log( 'addLesson' );
}
});
Ko'rib turganimizdek, "Dars qo'shish" tugmasi brauzerda ishlaydi va xabarni konsolga chop etadi.
Men barcha loyihalarimda sintaksis sifatida faqat kontrollerdan foydalanaman va $scope dan imkon qadar kamroq foydalanishga harakat qilaman.
Endi Angular boshqaruvchini sintaksis sifatida qanday ishlashini ko'rib chiqamiz. Keling, $scope ni kiritish uchun mainCtrl misolidan foydalanamiz va kontroller oxirida buni this.mainCtrl o'zgaruvchisiga yozamiz.
app.controller( 'mainCtrl' , funktsiya ($scope) {
this .myLesson = 'Asosiy Dars' ;


bu .addLesson = funktsiya () {
console .log( 'addLesson' );
}


$scope.mainCtrl = bu ;
});
Bu nima beradi? Biz shablonda mavjud bo'lgan mainCtrl o'zgaruvchisini yaratdik. Agar biz endi kontrollerni mainCtrl uchun sintaksis sifatida olib tashlasak, kod o'zgarishsiz ishlashda davom etadi, chunki bizda mainCtrl o'zgaruvchisi allaqachon mavjud.
< div ng-controller= "mainCtrl" >
< div ng-controller = "firstCtrl birinchiCtrl sifatida" >
< div ng-controller= "secondCtrl, secondCtrl sifatida" >
{{mainCtrl.myLesson}}
< button ng-click= 'mainCtrl.addLesson()' >Dars qo'shish



Biz hozirgina tekshirgichimizni sintaksis sifatida joriy qildik. Albatta, bizning versiyamizdan foydalanmagan ma'qul, lekin Angular-ning mahalliy usullaridan foydalanish osonroq, chunki bu osonroq.