众所周知， @ Component装饰器是一个接受一个对象的函数，并且该对象具有许多属性。主要的两个重要属性是模板和模板URL。
有多种在Angular中创建模板的方法
模板是用于用户界面的组件的一部分，最终用户可以通过它轻松进行交互。我们可以通过以下两种方式创建模板：–
-
内联模板
-
外部模板
内联模板：
当我们在.ts文件中定义组件的模板时，即称为内联模板，这些内联模板是使用template属性在组件装饰器中定义的。它是指在打字稿文件中编写所需的HTML。让我们考虑一个例子。
打开app.component.ts文件并修改组件装饰器，如下所示。在这里，您需要借助倾斜字符定义HTML内容。
import { Component } from '@angular/core';
@Component({
selector:'app-root',
template:`Hello World
`
})
export class AppComponent {
title = 'MyAngularApp'
另外，打开app.module.ts文件，并将AppComponent设置为引导程序数组中的启动组件，如下所示。
@NgModule({
declaration:[
AppComponent,
MyComponentComponent,
];
imports: [
BrowseModule,
AppRoutingModule
],
providers: [],,
bootstrap : [AppComponent]
})
export class AppModule { }
然后，如下所示修改index.html页面。
MyAngularApp
现在，编译应用程序，您将获得以下输出。
我们不能在单引号或双引号中包含HTML代码吗?
是的，我们可以将上述HTML代码包含在一对单引号或双引号中，或者直到HTML代码在一行中时为止，如下所示。
在这里，我们使用单引号。
@Component({
selector: 'app-root',
template: 'Hello World
'
})
当我们使用单引号时，输出将是： 
使用双引号：
您也可以在一对双引号中替换上面的HTML代码，如下所示
@Component({
selector: 'app-root',
template: "Welcome to GeeksforGeeks
"
})
当我们使用双引号时，输出将是： 
什么时候使用倾斜而不是单引号或双引号?
当我们有多行HTML代码时，我们需要使用倾斜，否则会出现编译时错误。
为了消除此错误，我们需要使用反引号(tilt) ，如下所示
@Component({
selector: 'app-root',
template:`Let’s learn About the Angularjs.
It is easy to understand.
`
})
当我们使用反引号时，输出将是： 
外部模板：
在大多数情况下，我们需要使用templateURL。当我们在外部文件中定义模板时，然后在与我们的组件链接之后，就称为外部模板。
换句话说，外部模板在单独的文件中定义HTML代码，我们可以使用Component decorator的templateURL属性引用该文件。 TypeScript文件使用“ templateURL”属性包含HTML代码文件的路径。
什么时候需要在angular中使用templateURL?
当我们使用复杂视图时，angular建议在外部HTML文件而不是内联模板中创建该复杂视图。角度组件装饰器提供templateUrl的属性，使用此属性，我们可以设置外部HTML代码文件路径。
默认情况下，当我们创建任何新的angular项目时，Angular会在app文件夹内创建一个名为app.component.html的HTML代码文件。让我们考虑一个示例，以了解如何使用templateUrl属性在组件装饰器中提供该HTML代码路径。另外，请如下所示修改app.component.ts文件，以使用templateUrl属性设置外部HTML文件。
import { Component } from '@angular/core';
@Component({
selector:'app-root',
templateUrl:'app/app.Component.html'
})
export class AppComponent {
title = 'MyAngularApp';
}
当我们使用TemplateURL将app.component.html文件的代码引用到app.component.ts文件时，输出将是：
Angular中的Template vs TemplateUrl：
在AngularJS中，我们可以在HTML标签内定义视图，并且有多种方法可以在角度组件中定义模板。
模板是角度组件最重要的部分之一，因为它允许我们定义组件的UI，我们可以通过2种方法来定义模板。
-
内联模板
-
外部模板
在应用程序的性能方面，template和templateUrl属性之间没有真正的区别。但是从开发人员的角度来看，我们将在这里讨论一些差异。
在Angular中，当我们有一个复杂的视图时，我们应该使用templateUrl(使用外部文件)，否则我们可以使用组件装饰器的template(内联HTML)属性。
当使用嵌入式模板时，我们将不再具有Visual Studio的智能支持，代码完成和格式化功能。但是，有了外部模板，我们还将获得Visual Studio的智能支持，代码完成和格式化功能。如果将TypeScript代码与内联HTML模板结合使用，则不一定总是要研究和认识它。将打字稿代码和关联的HTML放在同一记录中是一件方便的事，因为对它们之间的关联方式进行查看变得非常简单。