templateUrl و styleUrl در Angular چیست؟

اصول اولیه رندر HTML و CSS، روش Angular را بیاموزید.

با استفاده از Angular، می‌توانید صفحات، دیالوگ‌ها یا بخش‌های دیگر برنامه خود را به کامپوننت‌ها جدا کنید. اجزای یک برنامه Angular عمدتا از فایل های HTML، CSS و TypeScript تشکیل شده اند.

در فایل TypeScript، می‌توانید هر منطقی را که برای عملکرد رابط کاربری لازم است، مانند بازیابی داده‌ها از یک سرور، اضافه کنید.

شما همچنین می توانید HTML و CSS کامپوننت را با استفاده از TypeScript با مشخص کردن ویژگی های قالب و سبک آن رندر کنید. می توانید از templateUrl یا styleUrls برای پیوند دادن به فایل های خارجی HTML یا CSS استفاده کنید.

قالب و templateUrl در Angular چیست؟

هنگامی که کامپوننت خود را در Angular ایجاد می کنید، می توانید HTML آن را با استفاده از یک الگو رندر کنید. دو روش برای نوشتن قالب HTML وجود دارد:

• می توانید کد HTML خود را در داخل یک قالب در خود فایل TypeScript بنویسید.
• می توانید کد HTML خود را در یک فایل خارجی بنویسید و فایل TypeScript را به این فایل HTML پیوند دهید.

در یک جزء جدید، بسته به جایی که HTML خود را می‌نویسید، می‌توانید ویژگی‌های «template» یا «templateUrl» را تنظیم کنید.

1. یک برنامه Angular جدید ایجاد کنید.
2. در ترمینال برنامه خود، دستور ng generate component را اجرا کنید تا یک کامپوننت جدید ایجاد کنید. جزء جدید را «about-page» صدا کنید. ng تولید کامپوننت about-page
3. در app.component.html، کد فعلی را با برچسب‌های مؤلفه جدید خود جایگزین کنید:
4. فایل about-page.component.ts را باز کنید. اگر کد HTML زیادی ندارید، می توانید از ویژگی template برای نوشتن مستقیم آن در فایل TypeScript استفاده کنید. دکوراتور @Component را با موارد زیر جایگزین کنید: @Component({  انتخابگر: ‘app-about-page’,  template: ‘
   

   About Page

   این HTML را از فایل TypeScript رندر می کند!‘})

5. اگر می‌خواهید یک الگوی چند خطی اضافه کنید، می‌توانید به‌جای آن از علامت‌های نقل قول بک تیک استفاده کنید: @Component({  انتخابگر: ‘app-about-page’,  الگو: «
   

   About Page

                                

   این HTML را از فایل TypeScript رندر می کند!

   `})

6. در ترمینال، ng serve را تایپ کنید تا کد خود را کامپایل کرده و در یک مرورگر وب اجرا کنید. برنامه خود را در http://localhost:4200/ باز کنید. کد HTML شما از فایل TypeScript در صفحه نمایش داده می شود.
7. در about-page.component.ts، به جای “template” با “templateUrl” جایگزین کنید. پیوند به فایل HTML خارجی مؤلفه را وارد کنید. اگر کد HTML پیچیده تری دارید که به فایل خود نیاز دارد، می توانید از “templateUrl” استفاده کنید. @Component({  انتخابگر: ‘app-about-page’،  templateUrl: ‘./about-page.component.html’})
8. مقداری کد HTML را به فایل about-page.component.html اضافه کنید:
   

   About Page

   این HTML را از فایل HTML ارائه می کند!

9. به مرورگر خود برگردید یا ng serve را دوباره اجرا کنید تا کد خود را دوباره کامپایل کنید. برنامه خود را در http://localhost:4200/ باز کنید. مرورگر اکنون HTML را از فایل about-page.component.html رندر می کند.

ng generate component about-page

<app-about-page></app-about-page>

@Component({
  selector: 'app-about-page',
  template: '<h2>About Page</h2>
<p>This is rendering the HTML from the TypeScript file!</p>'
})

@Component({
  selector: 'app-about-page',
  template: `<h2>About Page</h2>
              

              <p>This is rendering the HTML from the TypeScript file!</p>`
})

@Component({
  selector: 'app-about-page',
  templateUrl: './about-page.component.html'
})

<h2>About Page</h2>
<p>This is rendering the HTML from the HTML file!</p>

استایل ها و URL ها در Angular چیست؟

مشابه HTML، بسته به جایی که CSS خود را انتخاب می کنید، می توانید از “style” یا “styleUrls” استفاده کنید.

اگر اعلان های CSS بسیار ساده ای دارید، می توانید CSS را در کد TypeScript قرار دهید. در غیر این صورت، می توانید از “styleUrls” برای پیوند دادن فایل TypeScript به یک CSS خارجی که دارای سبک های بیشتری است استفاده کنید.

1. در برنامه Angular که قبلا ایجاد کرده اید، فایل about-page.component.ts را باز کنید. یک ویژگی “styles” به کامپوننت اضافه کنید. در داخل «styles»، استایل CSS خود را برای صفحه اضافه کنید: @Component({  انتخابگر: ‘app-about-page’,  templateUrl: ‘./about-page.component.html’،  سبکها: [‘h2 {color:red }’,’p {color:green}’]})
2. در ترمینال، ng serve را تایپ کنید تا کد خود را کامپایل کرده و در یک مرورگر وب اجرا کنید. برنامه خود را در http://localhost:4200/ باز کنید تا استایل مشخص شده در فایل TypeScript را مشاهده کنید.
3. اگر CSS زیادی دارید، به جای «styles» از «styleUrls» برای پیوند دادن فایل TypeScript به یک فایل CSS خارجی استفاده کنید. در about-page.component.ts، دکوراتور @Component را با موارد زیر جایگزین کنید: @Component({  انتخابگر: ‘app-about-page’,  templateUrl: ‘./about-page.component.html’،  styleUrls: [‘ ./about-page.component.css’]})
4. اضافه کردن سبک CSS به about-page.component.css: h2 {  color: blue}p {  color: darkorange}
5. به مرورگر خود برگردید یا ng serve را دوباره اجرا کنید تا کد خود را دوباره کامپایل کنید. برنامه خود را در http://localhost:4200/ باز کنید تا سبک های استفاده شده از فایل CSS خارجی را مشاهده کنید.

@Component({
  selector: 'app-about-page',
  templateUrl: './about-page.component.html',
  styles: ['h2 {color:red}','p {color:green}']
})

@Component({
  selector: 'app-about-page',
  templateUrl: './about-page.component.html',
  styleUrls: ['./about-page.component.css']
})

h2 {
  color: blue
}
p {
  color: darkorange
}

رندر HTML یک کامپوننت در Angular

اکنون می دانید که چگونه می توانید محتوای HTML و CSS خود را در یک برنامه Angular ارائه دهید. شما می توانید بر اساس پیچیدگی HTML و CSS خود تعیین کنید که از کدام رویکرد می خواهید استفاده کنید.

اگر علاقه مند هستید، می توانید نحوه انتقال داده بین فایل های HTML و TypeScript یک جزء Angular را بررسی کنید.

منبع مقاله