آموزش کامپوننت ها و قالب ها در انگولار ۸

آموزش کامپوننت ها و قالب ها در انگولار ۸

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

همانطور که قبلاً آموختیم، کامپوننت ها بلوک های سازنده برنامه Angular هستند. کار اصلی Angular Component تولید بخشی از صفحه وب به نام view است. هر جزء دارای یک الگوی مرتبط خواهد بود و از آن برای تولید نماها استفاده می شود.

اجازه دهید در این فصل مفهوم اصلی کامپوننت و قالب را بیاموزیم.

اضافه کردن کامپوننت

اجازه دهید یک جزء جدید در برنامه ExpenseManager خود ایجاد کنیم.

خط فرمان را باز کنید و به برنامه ExpenseManager بروید.

cd /go/to/expense-manager

یک کامپوننت جدید با استفاده از دستور ng generate component که در زیر مشخص شده است ایجاد کنید

ng generate component expense-entry

خروجی

خروجی در زیر ذکر شده است –

CREATE src/app/expense-entry/expense-entry.component.html (28 bytes) 
CREATE src/app/expense-entry/expense-entry.component.spec.ts (671 bytes) 
CREATE src/app/expense-entry/expense-entry.component.ts (296 bytes) 
CREATE src/app/expense-entry/expense-entry.component.css (0 bytes) 
UPDATE src/app/app.module.ts (431 bytes)

• ExpenseEntryComponent در پوشه src/app/expense-entry ایجاد می شود.
• کلاس مؤلفه، الگو و شیوه نامه ایجاد می شود.
• AppModule با مؤلفه جدید به روز می شود.

ویژگی عنوان را به جزء ExpenseEntryComponent (src/app/expense-entry/expense-entry.component.ts) اضافه کنید.

import { Component, OnInit } from '@angular/core'; @Component({ 
   selector: 'app-expense-entry', 
   templateUrl: './expense-entry.component.html', styleUrls: ['./expense-entry.component.css'] 
}) 
export class ExpenseEntryComponent implements OnInit {
   title: string;
   constructor() { } 
   ngOnInit() { 
      this.title = "Expense Entry" 
   } 
}

الگوی src/app/expense-entry/expense-entry.component.html را با محتوای زیر به‌روزرسانی کنید.

<p>{{ title }}</p>

src/app/app.component.html را باز کنید و جزء جدید ایجاد شده را اضافه کنید.

<h1>{{ title }}</h1>
<app-expense-entry></app-expense-entry>

app-expense-entry مقدار انتخابگر است و می توان از آن به عنوان تگ معمولی HTML استفاده کرد.

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

در طول دوره یادگیری بیشتر در مورد الگوها، محتوای کامپوننت را به روز خواهیم کرد.

تمپلیت ها

بخش جدایی ناپذیر کامپوننت Angular Template است. برای تولید محتوای HTML استفاده می شود. قالب ها HTML ساده با قابلیت های اضافی هستند.

 ضمیمه کردن تمپلیت

الگو را می توان با استفاده از متا داده های @component decorator به کامپوننت Angular متصل کرد. Angular دو متا داده را برای پیوست کردن قالب به اجزا ارائه می دهد.

templateUrl

ما قبلاً می دانیم که چگونه از templateUrl استفاده کنیم. انتظار مسیر نسبی فایل الگو را دارد. به عنوان مثال، AppComponent قالب خود را به عنوان app.component.html قرار داده است.

templateUrl: './app.component.html',

template رشته HTML را قادر می سازد تا در داخل خود مؤلفه قرار دهد. اگر محتوای قالب حداقل باشد، برای ردیابی و تعمیر و نگهداری آسان، می‌توان آن را خود کلاس Component داشت.

@Component({ 
   selector: 'app-root', 
   templateUrl: `<h1>{{ title }}</h1>`, 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
   title = 'Expense Manager'; 
   constructor(private debugService : DebugService) {} ngOnInit() { 
      this.debugService.info("Angular Application starts"); 
   } 
}

ضمیمه کردن Stylesheet 

قالب های انگولار می توانند از سبک های CSS مشابه HTML استفاده کنند. الگو اطلاعات سبک خود را از دو منبع دریافت می کند، الف) از جزء خود ب) از پیکربندی برنامه.

پیکربندی کامپوننت

Component Decorator دو گزینه styles و styleUrls را برای ارائه اطلاعات سبک CSS به الگوی خود ارائه می دهد.

گزینه Styles – styles برای قرار دادن CSS در داخل خود کامپوننت استفاده می شود.

styles: ['h1 { color: '#ff0000'; }']

styleUrls – styleUrls برای ارجاع به شیوه نامه خارجی CSS استفاده می شود. ما می توانیم از چندین شیوه نامه نیز استفاده کنیم.

styleUrls: ['./app.component.css', './custom_style.css']

پیکربندی برنامه

انگولار گزینه ای را در پیکربندی پروژه (angular.json) برای تعیین شیوه نامه های CSS فراهم می کند. سبک های مشخص شده در angular.json برای همه قالب ها قابل اجرا خواهند بود. اجازه دهید angular.json خود را همانطور که در زیر نشان داده شده است بررسی کنیم

{
"projects": { 
   "expense-manager": { 
      "architect": { 
         "build": { 
            "builder": "@angular-devkit/build-angular:browser", "options": { 
               "outputPath": "dist/expense-manager", 
               "index": "src/index.html", 
               "main": "src/main.ts", 
               "polyfills": "src/polyfills.ts", 
               "tsConfig": "tsconfig.app.json", 
               "aot": false, 
               "assets": [ 
                  "src/favicon.ico", 
                  "src/assets" 
               ], 
               "styles": [ 
                  "src/styles.css" 
               ], 
               "scripts": [] 
            }, 
         }, 
      } 
   }}, 
   "defaultProject": "expense-manager" 
}

گزینه styles setssrc/styles.css به عنوان شیوه نامه جهانی CSS. ما می‌توانیم هر تعداد شیوه نامه CSS را اضافه کنیم زیرا از مقادیر متعدد پشتیبانی می‌کند.

 بوت استرپ

اجازه دهید بوت استرپ را با استفاده از گزینه styles در برنامه ExpenseManager خود قرار دهیم و الگوی پیش فرض را برای استفاده از اجزای بوت استرپ تغییر دهیم.

خط فرمان را باز کنید و به برنامه ExpenseManager بروید.

cd /go/to/expense-manager

بوت استرپ و کتابخانه JQuery را با استفاده از دستورات زیر نصب کنید

npm install --save bootstrap@4.5.0 jquery@3.5.1

ما JQuery را نصب کرده ایم، زیرا بوت استرپ به طور گسترده از jquery برای اجزای پیشرفته استفاده می کند.

angular.json را انتخاب کنید و مسیر کتابخانه بوت استرپ و جی کوئری را تنظیم کنید.

{ 
   "projects": { 
      "expense-manager": { 
         "architect": { 
            "build": {
               "builder":"@angular-devkit/build-angular:browser", "options": { 
                  "outputPath": "dist/expense-manager", 
                  "index": "src/index.html", 
                  "main": "src/main.ts", 
                  "polyfills": "src/polyfills.ts", 
                  "tsConfig": "tsconfig.app.json", 
                  "aot": false, 
                  "assets": [ 
                     "src/favicon.ico", 
                     "src/assets" 
                  ], 
                  "styles": [ 
                     "./node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" 
                  ], 
                  "scripts": [ 
                     "./node_modules/jquery/dist/jquery.js", "./node_modules/bootstrap/dist/js/bootstrap.js" 
                  ] 
               }, 
            }, 
         } 
   }}, 
   "defaultProject": "expense-manager" 
}

گزینه اسکریپت برای گنجاندن کتابخانه جاوا اسکریپت استفاده می شود. جاوا اسکریپت ثبت شده از طریق اسکریپت ها برای تمام اجزای Angular در برنامه در دسترس خواهد بود.

app.component.html را باز کنید و محتوا را همانطور که در زیر مشخص شده است تغییر دهید

<!-- Navigation --> 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> 
   <div class="container"> 
      <a class="navbar-brand" href="#">{{ title }}</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
         <span class="navbar-toggler-icon">
         </span> 
      </button> 
      <div class="collapse navbar-collapse" id="navbarResponsive"> 
         <ul class="navbar-nav ml-auto"> 
            <li class="nav-item active"> 
            <a class="nav-link" href="#">Home
               <span class="sr-only">(current)
               </span>
            </a> 
            </li> 
            <li class="nav-item"> 
            <a class="nav-link" href="#">Report</a> 
            </li> 
            <li class="nav-item"> 
            <a class="nav-link" href="#">Add Expense</a> 
            </li> 
            <li class="nav-item"> 
            <a class="nav-link" href="#">About</a> 
            </li> 
         </ul> 
      </div> 
   </div> 
</nav> 
<app-expense-entry></app-expense-entry>

از ناوبری بوت استرپ و کانتینرها استفاده کرد.

src/app/expense-entry/expense-entry.component.html را باز کرده و در زیر محتوا قرار دهید.

<!-- Page Content --> 
<div class="container"> 
   <div class="row"> 
      <div class="col-lg-12 text-center" style="padding-top: 20px;"> 
         <div class="container" style="padding-left: 0px; padding-right: 0px;"> 
            <div class="row"> 
            <div class="col-sm" style="text-align: left;"> {{ title }} 
            </div> 
            <div class="col-sm" style="text-align: right;"> 
               <button type="button" class="btn btn-primary">Edit</button> 
            </div> 
            </div> 
         </div> 
         <div class="container box" style="margin-top: 10px;"> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;">  
            <strong><em>Item:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            Pizza 
         </div>
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;">
            <strong><em>Amount:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            ۲۰ 
         </div> 
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;"> 
            <strong><em>Category:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            Food 
         </div> 
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;"> 
            <strong><em>Location:</em></strong>
         </div> 
         <div class="col" style="text-align: left;"> 
            Zomato 
         </div> 
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;"> 
            <strong><em>Spend On:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            June 20, 2020 
         </div> 
         </div> 
      </div> 
   </div> 
</div> 
</div>

برنامه را مجددا راه اندازی کنید.

خروجی برنامه به صورت زیر است –

ما برنامه را برای رسیدگی به ورود هزینه پویا در فصل بعدی بهبود خواهیم داد.

منبع.

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

1. آموزش انگولار ۸
2. آموزش معرفی انگولار ۸
3. آموزش نصب انگولار ۸
4. آموزش ایجاد اولین برنامه در انگولار ۸
5. آموزش معماری در انگولار ۸