AngularJS bu judayam oson!

Salom dasturchilar va bo’lajak dasturchilar 🙂 Mana yana o’zimni maqolamni yozib turibman. Bu maqolada AngularJS haqida gaplashamiz va kichkina dasturchalarnimizni yozib ko’ramiz!

AngularJS o’zi nima? AngularJS Google kompaniyasi tomonidan ishlab chiqilgan JavaScript framework! U bizga yani dasturchilarga sahifani yanada dinamik qilishda yordam beradi, AngularJS eski framework emas u 2009 ishlab chiqilgan lekin 1-versiyasi esa 2012 yil ommaga taqdim etilgan. Shu kunda beri web dasturchilar tomonidan judda keng qo’llanib kelinmoqda va dasturlashdagi eng so’nggi texnologiyalar sirasiga kiradi. Siz oldin jQuery va shu kabi boshqalar bilan ishlab ko’rgan bo’lishingiz mumkin. Ana endi jQueryni vaqtincha unutib AngularJS boshlashingiz kerak.

Avval AngularJSning rasmiy saytiga kiramiz: http://angularjs.org kiramiz. Downloadga kirib yuklab olamiz. Atiga bitta angular.js bitta fayli mavjud bo’ladi. Uni HTML sahifamizga ulashimiz kerak bo’ladi.

mana bunday AngularJS ulanadi lekin e’tibor bering yozilib AngularJS ishga tushurilmoqda ya’ni angular.js o’zini ulab qo’yish yetmaydi uni ishga tushurish uchun html tegining ichida ng-app deb yozish kerak bo’ladi.

Demak AngularJS ish uchun tayyor bo’ldi deb o’ylayman. AngularJSda ishlatiladigan barcha maxsus html teglar va attributlar direktivlar deyiladi. Direktivlar ikkita figurali qavslar orasiga yoziladi {{bu yerda direktiv yoziladi}}

Direktivlar ishlashini ko’rish uchun

{{5+2}}

saqlab natijani ko’rsak sahifada 7 paydo boladi. Ya’ni direktivlarni ichiga be’malol kod yozsak bo’ladi hatto direktivkarni ichida funksiya yo’zsak bo’ladi lekin bu sal xato yo’l bo’ladi.

Yana bir misolni ko’ramiz:

{{ism}}

ko’rib turganingiz dek oddiy html forma mavjud lekin unga ma’lumot yozganingizda haqiqiy mo’jiza yuz beradi 🙂 Yozgan ma’lumotlarimiz sahifada ko’rinishni boshlaydi. Bu yerda formaga ng-model attributi orqali ism modeli ko’rsatdik keyin esa pastroqda direktiv yordamida ekranga chiqardik. Agar shuni toza JavaScript o’ziningiz yozmoqchi bo’lganingizda bir necha qator yoki o’nlab qator kod yozishingizga to’g’ri kelar edi. AngularJS esa bizga bu borada yordam borib yuqori darajadagi sahifa yaratishda yordam beradi.

AngularJSni o’rganishda, ishlab chiquvchilar Develop Tuturialni o’tib chiqishni maslahat berishadi. Bunda PhoneCat yani telefonlar katalogini AngularJS tayyor namular yordamida yozib chiqasiz. Keyingi maqolalarda shu bosqichlarni o’tib chiqamiz. Agar qiziqib ketayotgan bo’lsangiz mana bu manzil orqali o’zingiz ko’rib chiqishingiz mumkin: https://docs.angularjs.org/tutorial