Angular2 quick start uchun Angular CLI

Salom dasturchilar, Texnomanda afsonaviy Angular frameworkining 2 versiyasi haqida maqolalarni yozishni boshlaymiz. Agar Angularning oldingi versiyasi bilan tanish bo’lsangiz, demak bu maqola sizga qiyinchilik tug’dirmaydi. Bu maqolada Angular2ning yangi imkoniyatlaridan biri Angular CLI haqida gaplashamiz.

Angular CLI — Angular uchun command line interface bo’lib, uning yordamida dasturlash jarayonida yanada osonlashtirish, tezlashtirish va yana ko’plab imkoniyatlarni beradi.

Esingizda bo’lsa Angularning eski versiyasida frameworki ko’chirib olib uni HTML sahifaga ulash kerak bo’lar edi, keyin modul yozish, modulga esa kontroller yozish, keyin uni sahifaga ulash yoki Siz shu ishlarni Gulp.js yordamida o’z ishlaringizni avtomatlashtirgan bo’lsangiz ham dasturlash jarayonida har xil muammolar paydo bo’lar edi. Angular CLI yordamida esa bu muammo esa o’z o’zidan yo’q bo’ladi.

Demak Angular CLIni o’rnatamiz, birinchi o’rinda bizda Node.js o’rnatilgan bo’lishi kerak bo’ladi va terminal(console)dan:

npm install -g angular-cli 

Agar sizda Linux yoki Mac bo’lsa sudo orqali o’rnatishingiz kerak bo’lsa.

Ana endi Angular2dagi loyiha yaratish uchun terminalda:

ng new loyiha_nomi 

Loyiha minimal ko’rinishda yaratildi va uni ishga tushurishga tayyor:

cd loyiha_nomi 
ng serve 

ng serve kommandasi webpack yordamida loyihamizni ishga tushuradi. Shunda loyiha: http://localhost:4200 da ishga tushadi.

Angular CLIning to’liq kommandalarni ro’yxati bilan tanishmoqchi bo’lsangiz bu yerdan o’qishingiz mumkin.

Agar sizga CLI ko’rinishda ishlash biroz qiyin bo’lsa, unda JetBrains kompaniyasining IntelliJ yoki WebStorm IDE yordamida Anuglar CLIdan foydalanishni ko’ramiz.

WebStormning yangi versiyasini yuklab olamiz. https://www.jetbrains.com/webstorm/

Yangi loyiha yaratishga kiramiz va AngularCLIni tanlaymiz

va loyiha nomini kiritamiz.

Finish tugamasini bosamiz. Shunda IDE bizga Angular CLIdagi new kommandasi ishlatgan holda Angular2 loyiha yaratib beradi.

Loyihamiz tayyor uni ishga tushurish uchun terminaldan ng serve kommandasini yoki npm start orqali ishga tushuramiz.

Loyiha localhost:4200 da ishga tushdi. Loyihamiz tuzilishi esa quyidagicha:

Endi esa Angular CLI yordami kod generatsiya qilish uchun, app papkani ichiga yangi fayl yaratishga kiramiz va Angular CLIni tanlaymiz:

keyin nimalarni generatsiya qilishimiz mumkin ekanligni ko’rishimiz mumkin:

componentni tanlaymiz va yaratmoqchi bo’lgan componentning nomi yozamib, OK tugamasini bosamiz.

Masalan men footer komponentni yaratdim:

va natijamiz tayyor:

Shunday qilib dasturlash paytida tezkor ravishda component, class, directive, enum, interface, mobile, module, ng2, pipe generatsiya qilishingiz mumkin bo’ladi. Angular2 va boshqa imkoniyatlar haqida esa keyingi maqolalarda yozib boramiz 🙂

---