کونییئر سی ایل آئی کا تعارف

اس پوسٹ میں ، ہم Angular CLI کے بارے میں جانیں گے اور ہم دیکھیں گے کہ کسی نئے Angular پروجیکٹ کو شروع کرنے کے لئے اس کا استعمال کیسے کریں۔

کونیی سی ایل آئی کیا ہے؟

کونییئل پروجیکٹ شروع کرنے اور ان کے ساتھ کام کرنے کے لئے Angular CLI سرکاری ٹول ہے۔ یہ آپ کو پیچیدہ تشکیلات کی پریشانی سے بچاتا ہے اور ٹول اسکرپٹ ، ویبپیک ، جیسے ٹولز بنانے میں مدد دیتا ہے۔

Angular CLI انسٹال کرنے کے بعد ، آپ کو ایک پروجیکٹ تیار کرنے کے لئے ایک کمانڈ چلانے کی ضرورت ہوگی اور اپنی درخواست کے ساتھ کھیلنے کے ل to لوکل ڈویلپمنٹ سرور کا استعمال کرکے اس کی خدمت کے ل to ایک اور کمانڈ چلانے کی ضرورت ہوگی۔

آج کل کے سب سے زیادہ جدید فرنٹ اینڈ ٹولز کی طرح ، Angular CLI Node.js کے سب سے اوپر بنایا گیا ہے۔

نوڈ. جے ایس ایک سرور ٹکنالوجی ہے جو آپ کو جاوا اسکرپٹ کو سرور پر چلانے اور سرور سائیڈ ویب ایپلی کیشنز بنانے کی سہولت دیتی ہے۔ تاہم ، کونییئر ایک فرنٹ اینڈ ٹکنالوجی ہے ، لہذا یہاں تک کہ اگر آپ کو اپنی ڈویلپمنٹ مشین پر نوڈ. جے ایس انسٹال کرنے کی ضرورت ہے تو ، یہ صرف سی ایل آئی کو چلانے کے لئے ہے۔

ایک بار جب آپ اپنی ایپ کی تیاری کے ل build بناتے ہیں تو آپ کو نوڈ. جے کی ضرورت نہیں ہوگی کیونکہ حتمی بنڈل صرف جامد ایچ ٹی ایم ایل ، سی ایس ایس ، اور جاوا اسکرپٹ ہیں جو کسی بھی سرور یا سی ڈی این کے ذریعہ پیش کیے جاسکتے ہیں۔

یہ کہا جا رہا ہے ، اگر آپ انگولر کے ساتھ ایک اسٹیک ویب ایپلی کیشن بنا رہے ہیں تو ، آپ کو پچھلے حصے کو بنانے کے لئے نوڈ. جے ایس کی ضرورت ہوسکتی ہے اگر آپ جاوا اسکرپٹ کو سامنے کے اختتام اور پچھلے سرے کے لئے استعمال کرنا چاہیں۔

MEAN اسٹیک کو چیک کریں - یہ ایک فن تعمیر ہے جس میں مونگو ڈی بی ، ایکسپریس (نوڈ. جے ایس کے سب سے اوپر بنایا ہوا ایک ویب سرور اور REST API فریم ورک) اور کونیولر شامل ہیں۔ اگر آپ شروع کرنے کے لئے مرحلہ وار سبق حاصل کرنا چاہتے ہیں تو آپ یہ مضمون پڑھ سکتے ہیں۔

اس معاملے میں ، نوڈ. جے ایس آپ کے ایپ کے پچھلے حصے کی تعمیر کے لئے استعمال ہوتا ہے اور اسے کسی بھی سرور سائیڈ ٹکنالوجی سے تبدیل کیا جاسکتا ہے جس کی آپ چاہتے ہیں جیسے پی ایچ پی ، روبی ، یا ازگر۔ لیکن کونییئر اس کے انحصار Node.js پر نہیں کرتا ہے سوائے اس کے اس کے CLI ٹول اور npm سے پیکیج انسٹال کرنے کے۔

NPM کا مطلب نوڈ پیکیج مینیجر ہے۔ یہ نوڈ پیکجوں کی میزبانی کے لئے رجسٹری ہے۔ حالیہ برسوں میں اس کا استعمال سامنے والے اختتامی پیکجوں اور لائبریریوں جیسے انگولر ، ردact عمل ، Vue.js اور یہاں تک کہ بوٹسٹریپ کو شائع کرنے کے لئے بھی کیا جاتا ہے۔

نوٹ: آپ ہماری انگولر کتاب ڈاؤن لوڈ کرسکتے ہیں: انگولر کے ساتھ مفت میں اپنی پہلی ویب ایپس بنائیں۔

کونییئر سی ایل آئی انسٹال کرنا

پہلے ، آپ کو اپنی ڈویلپمنٹ مشین پر نوڈ اور این پی ایم لگانے کی ضرورت ہے۔ اس کے کرنے کے بہت سارے طریقے ہیں ، جیسے:

  • آپ کے سسٹم میں نوڈ کے متعدد ورجنز کو انسٹال کرنے اور ان کے ساتھ کام کرنے کیلئے NVM (نوڈ ورژن مینیجر) کا استعمال کرنا
  • اپنے آپریٹنگ سسٹم کے آفیشل پیکیج مینیجر کا استعمال کرتے ہوئے
  • اسے سرکاری ویب سائٹ سے انسٹال کرنا۔

آئیے اسے آسان رکھیں اور سرکاری ویب سائٹ استعمال کریں۔ سیدھے سیدھے ڈاؤن لوڈ پیج پر جائیں اور ونڈوز کے لئے بائنریز حاصل کریں ، پھر سیٹ اپ وزرڈ کو فالو کریں۔

آپ اس بات کا یقین کر سکتے ہیں کہ کمانڈ پرامپٹ میں مندرجہ ذیل کمانڈ کو چلاتے ہوئے آپ کے سسٹم پر نوڈ انسٹال ہے جو نوڈ کا انسٹال ورژن دکھائے۔

ode نوڈ -v

اگلا ، کونییئر سی ایل آئی انسٹال کرنے کے لئے درج ذیل کمانڈ کو چلائیں:

ang npm انسٹال @ کونیی / موسم

اس تحریر کے وقت ، زاویہ 8.3 انسٹال ہوگا۔

اگر آپ انگولر 9 انسٹال کرنا چاہتے ہیں تو ، اگلے ٹیگ کو مندرجہ ذیل طور پر شامل کریں۔

next n اگلے اگلے @ کونیی / موسم / @ انسٹال کریں

کمانڈ کامیابی کے ساتھ ختم ہونے کے بعد ، آپ کو Angular CLI نصب کرنا چاہئے۔

کونیی سی ایل آئی کے لئے ایک فوری ہدایت نامہ

کونییئر سی ایل آئی انسٹال کرنے کے بعد ، آپ بہت سارے کمانڈ چلا سکتے ہیں۔ آئیے انسٹال کردہ CLI کے ورژن کو چیک کرکے شروع کریں:

version ng ورژن

دوسرا کمانڈ جو آپ کو چلانے کی ضرورت ہو وہی استعمال کی مکمل مدد حاصل کرنے کے لئے مدد کمانڈ ہے۔

. ng مدد

سی ایل آئی مندرجہ ذیل احکامات فراہم کرتا ہے۔

شامل کریں: آپ کے منصوبے میں بیرونی لائبریری کے لئے تعاون شامل کرتا ہے۔

build (b): دیئے ہوئے آؤٹ پٹ پر دور / نامی آؤٹ پٹ ڈائرکٹری میں کونیی ایپ مرتب کرتا ہے۔ ورک اسپیس ڈائرکٹری کے اندر سے پھانسی دینی چاہئے۔

تشکیل: بازیافت یا کونیی ترتیب اقدار کا تعین کرتا ہے۔

دستاویز (د): ایک برائوزر میں آفیگرئولر دستاویزات (انگولر.یو) کھولتا ہے ، اور دیئے گئے مطلوبہ الفاظ کی تلاش کرتا ہے۔

e2e (e): کونیی ایپ بناتا ہے اور اس کی خدمت کرتا ہے ، پھر پروٹیکٹر کا استعمال کرتے ہوئے آخری سے آخر تک ٹیسٹ چلاتا ہے۔

جنریٹ (g): اسکیمیٹ کی بنیاد پر فائلیں بناتا ہے اور / یا اس میں ترمیم کرتا ہے۔

مدد: دستیاب کمانڈز اور ان کی مختصر تفصیلات کی فہرست۔

lint (l): دیئے گئے پروجیکٹ فولڈر میں کونیی ایپ کوڈ پر استر سازی کے اوزار چلاتے ہیں۔

new (n): ایک نیا ورک اسپیس اور ابتدائی کونیولر ایپ تیار کرتا ہے۔

چلائیں: آپ کے منصوبے میں بیان کردہ کسٹم ہدف کو چلاتا ہے۔

خدمت (زبانیں): فائل میں تبدیلیوں پر دوبارہ تعمیر کرتے ہوئے آپ کے ایپ کو بناتا اور اس کی خدمت کرتا ہے۔

test (t): کسی پروجیکٹ میں یونٹ ٹیسٹ چلاتا ہے۔

اپ ڈیٹ: آپ کی درخواست اور اس کی انحصار کو اپ ڈیٹ کرتا ہے۔ ملاحظہ کریں https://update.angular.io/

ورژن (v): کونییئل CLI ورژن آؤٹ پٹ۔

xi18n: ماخذ کوڈ سے i18n پیغامات نکالتا ہے۔

ایک پروجیکٹ تیار کرنا

آپ اپنے کمانڈر لائن انٹرفیس میں درج ذیل کمانڈ کو چلاتے ہوئے اپنے کونیی پروجیکٹ کو تیزی سے پیدا کرنے کے لئے Angular CLI استعمال کرسکتے ہیں۔

. ng نیا فرنٹ اینڈ

نوٹ: فرنٹ اینڈ اس منصوبے کا نام ہے۔ آپ واقعی اپنے منصوبے کے لئے کوئی بھی درست نام منتخب کرسکتے ہیں۔ چونکہ ہم ایک اسٹیک ایپلی کیشن تیار کریں گے میں فرنٹ اینڈ کا استعمال فرنٹ اینڈ ایپلی کیشن کے نام کے بطور کر رہا ہوں۔

جیسا کہ پہلے ذکر کیا گیا ہے ، سی ایل آئی آپ سے پوچھے گا کیا آپ کونیول روٹنگ شامل کرنا چاہیں گے؟ اور آپ y (ہاں) یا n (نہیں) داخل کرکے جواب دے سکتے ہیں ، جو پہلے سے طے شدہ آپشن ہے۔ یہ آپ سے اسٹائل شیٹ فارمیٹ کے بارے میں بھی پوچھے گا جس کا استعمال آپ چاہتے ہیں (جیسے سی ایس ایس)۔ اپنے اختیارات کا انتخاب کریں اور جاری رکھنے کے لئے انٹر دبائیں۔

اس کے بعد ، آپ اپنے پروجیکٹ کو ڈائریکٹری ڈھانچے اور تشکیلات اور کوڈ فائلوں کے ایک گروپ سے تشکیل دیں گے۔ یہ زیادہ تر ٹائپ اسکرپٹ اور JSON فارمیٹس میں ہوگا۔ آئیے ہر فائل کا کردار دیکھیں:

  • / e2e /: میں ویب سائٹ کے اختتام سے آخر (صارف کے طرز عمل کی تقلید) ٹیسٹ شامل ہیں
  • / نوڈ_موڈولز /: تمام تیسری پارٹی کی لائبریریاں اس فولڈر میں این پی ایم انسٹال کا استعمال کرتے ہوئے انسٹال ہیں
  • / src /: درخواست کا ماخذ کوڈ پر مشتمل ہے۔ زیادہ تر کام یہاں ہوں گے
  • / app /: میں ماڈیولز اور اجزاء شامل ہیں
  • / اثاثے /: میں مستحکم اثاثے جیسے تصاویر ، شبیہیں اور اسٹائل شامل ہیں
  • / ماحولیات /: ماحول (پیداوار اور ترقی) پر مشتمل ہے مخصوص کنفگریشن فائلیں
  • براؤزرز لسٹ: سی ایس ایس سپورٹ کے لئے آٹوپریکسر کی ضرورت ہے
  • fascicon.ico: فیویکون
  • index.html: مرکزی HTML فائل
  • karma.conf.js: کرما (ایک ٹیسٹنگ ٹول) کیلئے تشکیل فائل
  • main.ts: وہ ابتدائی فائل جس میں سے AppModule بوٹسٹریپ ہے
  • polyfills.ts: کونیولر کے ذریعہ مطلوب پولیفلز
  • styles.css: اس منصوبے کے لئے عالمی اسٹائل شیٹ فائل
  • test.ts: یہ کرما کے لئے ایک کنفیگریشن فائل ہے
  • tsconfig. *. json: ٹائپ اسکرپٹ کیلئے تشکیل فائلیں
  • angular.json: CLI کے لئے تشکیلات پر مشتمل ہے
  • package.json: منصوبے کی بنیادی معلومات (نام ، وضاحت اور انحصار) پر مشتمل ہے
  • README.md: ایک مارک ڈاون فائل جس میں اس منصوبے کی تفصیل ہے
  • tsconfig.json: ٹائپ اسکرپٹ کیلئے تشکیل فائل
  • tslint.json: TSlint کے لئے تشکیل فائل (ایک جامد تجزیہ کا آلہ)

آپ کے منصوبے کی خدمت

Angular CLI آپ کی مقامی مشین پر فرنٹ اینڈ ایپس تیار کرنے کے لئے ایک مکمل ٹول چین فراہم کرتا ہے۔ اس طرح ، اپنے پروجیکٹ کی خدمت کے ل to آپ کو مقامی سرور انسٹال کرنے کی ضرورت نہیں ہے - آپ اپنے پروجیکٹ کی مقامی سطح پر خدمت کرنے کے ل your اپنے ٹرمینل سے این جی سرو کمانڈ استعمال کرسکتے ہیں۔

پہلے اپنے پروجیکٹ کے فولڈر میں جائیں اور درج ذیل کمانڈز چلائیں۔

$ سی ڈی فرنٹ اینڈ serve ng سروس

اب آپ اپنی فرنٹ اینڈ ایپلی کیشن کے ساتھ کھیلنا شروع کرنے کے لئے HTTP: // لوکل ہوسٹ: 4200 / ایڈریس پر جا سکتے ہیں۔ اگر آپ کوئی سورس فائل تبدیل کرتے ہیں تو صفحہ خود بخود براہ راست دوبارہ لوڈ ہو جائے گا۔

کونیی نمونے تیار کرنا

کونییئر سی ایل آئی این جی جنریٹ کمانڈ فراہم کرتا ہے جو ڈویلپرز کو بنیادی زاویہ نوادرات جیسے ماڈیولز ، اجزاء ، ہدایت ، پائپ اور خدمات تیار کرنے میں مدد کرتا ہے۔

component ng جزو میرا عنصر بنائیں

میرا جز اجزاء کا نام ہے۔ Angular CLI خود کار طریقے سے src / app.module.ts فائل میں اجزاء ، ہدایات اور پائپوں کا حوالہ شامل کرے گا۔

اگر آپ اپنے جزو ، ہدایت یا پائپ کو کسی اور ماڈیول میں شامل کرنا چاہتے ہیں (مرکزی ایپلی کیشن ماڈیول کے علاوہ ، ایپ.موڈول ڈاٹ ٹی ایس) ، آپ ماڈیول نام اور سلیش کے ساتھ اجزاء کے نام کو صرف پریفکس کرسکتے ہیں۔

g ng g جزو میرا ماڈیول / میرا اجزاء

میرے ماڈیول ایک موجودہ ماڈیول کا نام ہے۔

نتیجہ اخذ کرنا

اس پوسٹ میں ، ہم نے دیکھا ہے کہ کس طرح اپنی ڈویلپمنٹ مشین پر کونییئر سی ایل آئی انسٹال کریں اور ہم نے اسے شروع سے ہی ایک نیا انگولر پروجیکٹ شروع کرنے کے لئے استعمال کیا۔

ہم نے متعدد احکامات بھی دیکھے ہیں جو آپ اپنے پروجیکٹ کی ترقی کے دوران کونیی نمونے تیار کرنے کیلئے استعمال کرسکتے ہیں جیسے ماڈیولز ، اجزاء اور خدمات۔

آپ مصنف تک ان کی ذاتی ویب سائٹ ، ٹویٹر ، لنکڈ ان اور گیتھب کے ذریعے رابطہ کرسکتے ہیں۔