AngularJS中Template和TemplateURL的区别

我们知道，@Component装饰器是一个接受一个对象的函数，该对象有许多属性。主要的两个重要属性是模板和模板URL。

在Angular中创建模板有多种方法。

模板是组件的一部分，用于用户界面，终端用户可以通过它轻松地进行交互。我们可以通过以下两种方式创建一个模板。-

Inline template
External Template

Inline Templates:

当我们在.ts文件中定义组件的模板时，它被称为内联模板，内联模板是在组件装饰器中使用模板属性定义的。它指的是在typescript文件中写入所需的HTML。让我们考虑一个例子。

打开app.component.ts文件，修改组件装饰器，如下图所示。在这里，你需要在倾斜字符的帮助下定义HTML内容。

<!--The content below is only a
    placeholder and can be replaced.-->
import { Component } from '@angular/core';
 
@Component({
    selector:'app-root',
     
    template:`<h3>Hello World</h3>`
    
})
export class AppComponent {
title = 'MyAngularApp'

同时，打开app.module.ts文件，将AppComponent设置为bootstrap阵列中的启动组件，如下图所示。

<!--The content below is only a
    placeholder and can be replaced.-->
@NgModule({
   declaration:[
     AppComponent,
     MyComponentComponent,
  ];
     
    imports: [
       BrowseModule,
       AppRoutingModule
   ],
    providers: [],,
    bootstrap : [AppComponent]
    })
export class AppModule { }

然后修改index.html页面，如下图所示。

<!--The content below is only a
    placeholder and can be replaced.-->
<!Doctype html>
    <html lang ="en">
    <head>
    <meta charset ="utf-8">
    <title>MyAngularApp</title>
    <base href="/">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1">
    <link rel="icon"
          type="image/x-icon"
          href="favicon.ico">
    </head>
    <body>
     
    <app-root></app-root>
     
    </body>
    </html>

**现在，编译应用程序，你将得到以下输出。

AngularJS中Template和TemplateURL的区别

**我们不能把HTML代码放在单引号或双引号内吗？

是的，我们可以在一对单引号或双引号内包含上述HTML代码，或者直到HTML代码在单行中时，如下图所示。

这里我们使用的是单引号。

<!--The content below is only a
placeholder and can be replaced.-->
@Component({
    selector: 'app-root',
     
    template: '<h3>Hello World</h3>'
     
})

当我们使用单引号时，输出将是：。

AngularJS中Template和TemplateURL的区别

使用双引号：

你也可以用一对双引号替换上述HTML代码，如下所示

<!--The content below is only a
    placeholder and can be replaced.-->
@Component({
    selector: 'app-root',
     
    template: "<h3>Welcome to GeeksforGeeks</h3>"
})

当我们使用双引号时，输出将是：。

AngularJS中Template和TemplateURL的区别

**什么时候我们会使用倾斜而不是单引号或双引号？

当我们有多行HTML代码时，我们需要使用倾斜，否则你会得到一个编译时错误。
为了摆脱这个错误，我们需要使用反斜线（倾斜），如下图所示

<!--The content below is only a
    placeholder and can be replaced.-->
@Component({
    selector: 'app-root',
     
    template:`<h3>Let’s learn About the Angularjs. 
                  It is easy to understand.</h3>`
     
})

当我们使用反斜线时，输出将是：。

AngularJS中Template和TemplateURL的区别

External Template:

在实时的大多数情况下，我们需要使用templateURL。当我们在一个外部文件中定义模板，然后与我们的组件链接后，就可以说是一个外部模板。

换句话说，外部模板在一个单独的文件中定义了HTML代码，我们可以使用组件装饰器的templateURL属性来引用该文件。TypeScript文件包含使用 “templateURL “属性的HTML代码文件的路径。

**我们什么时候需要在angular中使用templateURL？

当我们在处理一个复杂的视图时，angular建议在一个外部HTML文件中创建复杂的视图，而不是内联模板。angular组件装饰器提供了templateUrl属性，使用这个属性我们可以设置外部HTML代码文件的路径。

默认情况下，当我们创建任何新的angular项目时，Angular会在app文件夹中创建一个HTML代码文件，名称为app.component.html。让我们考虑一个例子来了解如何使用templateUrl属性在组件装饰器中提供HTML代码路径。同时，修改app.component.ts文件，如下图所示，使用templateUrl属性来设置外部HTML文件。

<!--The content below is only a
    placeholder and can be replaced.-->
    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文件时，输出将是：。

AngularJS中Template和TemplateURL的区别

Angular中的Template vs TemplateUrl：

在AngularJS中，我们可以在HTML标签中定义视图，并且有各种方法来定义Angular组件的模板。

模板是angular组件最重要的部分之一，因为它允许我们定义组件的用户界面，我们可以有两种方式来定义模板。

Inline template
External Template

在应用程序的性能方面，模板和templateUrl属性之间没有真正的区别。但从开发者的角度来看，有一些区别，我们将在这里讨论。

在Angular中，当我们有一个复杂的视图时，我们应该使用模板Url（使用外部文件），否则我们可以使用组件装饰器的模板（内联HTML）属性。

当我们使用一个内联模板时，那么我们就不再有Visual Studio的智能支持、代码完成和格式化功能。但是使用外部模板，我们也会有Visual Studio的智能支持、代码完成和格式化功能。如果我们把TypeScript代码与内嵌的HTML模板结合起来，就不一定能研究和识别。将TypeScript代码和相关的HTML放在同一记录中是很方便的，因为这样可以更容易地看到它们是如何相互关联的。