آموزش کامپوننت ها در انگولار 4

3 سال پیش
امتیاز دهید post

آموزش کامپوننت ها در انگولار 4

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کامپوننت ها در انگولار 4 خواهیم پرداخت.

بخش عمده ای از توسعه با انگولار 4 در قطعات انجام می شود. کامپوننت ها اساساً کلاس هایی هستند که با فایل html. کامپوننت که در مرورگر نمایش داده می شود تعامل دارند. ما ساختار فایل را در یکی از فصل های قبلی خود دیده ایم. ساختار فایل دارای جزء برنامه است و شامل فایلهای زیر است –

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts

وقتی پروژه جدیدی را با استفاده از دستور angular-cli ایجاد کردیم ، فایل های فوق به طور پیش فرض ایجاد شدند.

اگر فایل app.module.ts را باز کنید ، برخی کتابخانه ها وارد شده اند و همچنین یک اعلان است که کامپوننت برنامه را به شرح زیر اختصاص داده است –

 

اعلامیه شامل متغیر AppComponent، که ما در حال حاضر وارد شده است. این جزء اصلی می شود.

در حال حاضر ، angular-cli فرمان ایجاد کامپوننت خود را دارد. با این حال جزء برنامه که به طور پیش فرض ایجاد می شود ، همیشه والد باقی می ماند و اجزای بعدی ایجاد شده، اجزای فرزند را تشکیل می دهند.

اکنون فرمان ایجاد کامپوننت را اجرا می کنیم.

 

هنگامی که شما دستور بالا اجرا در خط فرمان، شما را به خروجی زیر دریافت –

 

حال اگر برویم و ساختار فایل را بررسی کنیم، پوشه new-cmp new ایجاد شده در زیر پوشه src/app را دریافت می کنیم.

  • new-cmp.component.html- فایل CSS برای جزء جدید ایجاد می شود.
  • جدید cmp.component.html – فایل HTML ایجاد می شود.
  • new-cmp.component.spec.ts-این می تواند برای آزمایش واحد استفاده شود.
  • new-cmp.component.ts – در اینجا، ما می توانید ماژول تعریف، خواص، و غیره

تغییرات به فایل app.module.ts به شرح زیر اضافه می شود –

 

فایل new-cmp.component.ts به شرح زیر است تولید –

 

اگر فایل new-cmp.component.ts فوق را مشاهده کردید ، یک کلاس جدید به نام NewCmpComponent ایجاد می کند که OnInit را پیاده سازی می کند. که دارای سازنده و متدی به نام ()ngOnInit است. ngOnInit به صورت پیش فرض هنگام اجرای کلاس فراخوانی می شود.

اجازه دهید نحوه عملکرد جریان را بررسی کنیم. در حال حاضر  جزء برنامه که به طور پیش فرض ایجاد می شود، به مولفه اصلی تبدیل می شود. هر کامپوننت که بعداً اضافه شود به جزء فرزند تبدیل می شود.

وقتی url را در مرورگر http: // localhost: 4200/می زنیم ، ابتدا فایل index.html را که در زیر نشان داده شده است اجرا می کند –

 

بالا فایل HTML عادی است و ما هیچ چیز است که در مرورگر چاپ نیست. به برچسب قسمت بدن نگاه کنید.

 

این لیبل اصلی است که توسط انگولار به طور پیش فرض ایجاد شده است. این تگ دارای مرجع در فایل main.ts است.

 

AppModule از برنامه ماژول اصلی وارد می شود و همان را به ماژول بوت استرپ می دهد ، که باعث می شود برنامه آپلود شود.

اجازه دهید فایل app.module.ts را ببینیم –

 

در اینجا AppComponent نام داده شده است ، یعنی متغیری برای ذخیره مرجع برنامه. Component.ts و همان است که داده شده به خود راه انداز. اجازه دهید اکنون فایل app.component.ts را ببینیم.

 

هسته زاویه ای وارد شده و به عنوان کامپوننت شناخته می شود و در اعلان کننده از آن استفاده می شود –

 

در اعلان کننده مرجع انتخاب کننده، templateUrl و styleUrl آورده شده است. انتخابگر در اینجا چیزی نیست جز برچسبی که در فایل index.html که در بالا دیدیم قرار می گیرد.

کلاس AppComponent دارای متغیری به نام title است که در مرورگر نمایش داده می شود.

کامپوننت از templateUrl به نام app.component.html استفاده می کند که به شرح زیر است –

 

این فقط کد html و عنوان متغیر را در براکت های مجعد دارد. با مقدار موجود در فایل app.component.ts جایگزین می شود. به این می گویند اتصال. ما در درس بعد مفهوم الزام آور را مورد بحث قرار خواهیم داد.

اکنون که ما یک کامپوننت جدید به نام new-cmp ایجاد کردیم. وقتی دستور ایجاد یک کامپوننت جدید اجرا می شود ، همین مورد در فایل app.module.ts گنجانده می شود.

app.module.ts مرجع کامپوننت جدید ایجاد شده است.

اجازه دهید فایل های جدید ایجاد شده در new-cmp را بررسی کنیم.

 

در اینجا ما باید هسته را نیز وارد کنیم. مرجع جزء در اعلان کننده استفاده می شود.

اعلان کننده دارای انتخاب کننده ای به نام app-new-cmp و templateUrl و styleUrl است.

.html به نام new-cmp.component.html به شرح زیر است-

 

همانطور که در بالا مشاهده شد ، ما کد html داریم ، یعنی تگ p. فایل سبک خالی است زیرا در حال حاضر نیازی به یک ظاهر طراحی نداریم. اما وقتی پروژه را اجرا می کنیم، چیزی را مشاهده نمی کنیم که جزء جدید در مرورگر نمایش داده شود. اکنون اجازه دهید چیزی اضافه کنیم و بعداً همان را می توان در مرورگر مشاهده کرد.

انتخاب کننده، یعنی app-new-cmp باید به صورت زیر در فایل app.component .html اضافه شود-

 

هنگامی که تگ <app-new-cmp> </app-new-cmp> اضافه می شود ، همه آنچه در فایل .html مولفه جدید ایجاد شده به همراه داده های مولفه اصلی در مرورگر نمایش داده می شود.

اجازه دهید فایل .html جزء جدید و فایل new-cmp.component.ts را ببینیم.

 

new-cmp.component.ts

 

در کلاس ما یک متغیر به نام new component اضافه کرده ایم و مقدار “Entered in new component created” است.

متغیر فوق در فایل .new-cmp.component.html به صورت زیر محدود شده است-

 

اکنون از آنجا که ما انتخاب کننده <app-new-cmp> </app-new-cmp> را در برنامه گنجانده ایم. component .html که .html جزء اصلی است، محتوای موجود در فایل .html کامپوننت جدید (new-cmp.component.html) به شرح زیر در مرورگر نمایش داده می شود-

Using Selectors Browser Output

به طور مشابه  ما می توانیم اجزاء را ایجاد کرده و با استفاده از انتخابگر موجود در فایل app.component.html مطابق نیاز خود پیوند دهیم.

 

منبع.

 

لیست جلسات قبل آموزش انگولار 4

  1. آموزش انگولار 4
  2. بررسی اجمالی انگولار 4
  3. آموزش تنظیمات محیط انگولار 4
  4. آموزش راه اندازی پروژه در انگولار 4
امتیاز دهید post
0
برچسب ها :
نویسنده مطلب saber

دیدگاه شما

بدون دیدگاه