使用组件模板与templateUrl的差异

Question

Angular 2 allows to write multi-line templates by using ` characters to enquote them. It is also possible to put multi-line template into .html file and reference it by templateUrl .

It seems comfortable for me to put the template directly into component as then it's all in one place, but is there any drawback of doing so?

1st approach:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: `
    <h1>My First Angular 2 multiline template</h1>
    <p>Second line</p> 
    `
})
export class AppComponent { }

vs 2nd approach:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    templateUrl: 'multi-line.html'
})
export class AppComponent { }

together with multi-line.html :

<h1>My First Angular 2 multiline template</h1>
<p>Second line</p> 

Answer 1

In terms of how the final application will perform, there's no real difference between having an embedded template and an external template.

For the developer, however, there are a number of differences that you have to consider.

1. You get better code completion and inline support in your editor/IDE in most cases when the HTML is in a separate .html file. (IntelliJ IDEA, at least, supports HTML for inline templates and strings)
2. There is a convenience factor to having code and the associated HTML in the same file. It's easier to see how the two relate to each other.

These two things will be of equal value for many people, so you'd just pick your favorite and move ahead with life if this were all there was to it.

But that leads us to the reasons you should keep your templates in your components, in my opinion:

3. It is difficult to make use of relative filepaths for external templates as it currently stands in Angular 2.
4. Using non-relative paths for external templates makes your components far less portable, since you need to manage all of the /where/is/my/template type references from the root that change depending on how deep your component is.

That's why I would suggest that you keep your templates inside your components where they are easily found. Also, if you find that your inline template is getting large and unwieldy, then it is probably a sign that you should be breaking your component down into several smaller components, anyway.

Answer 2

The drawbacks are that the IDE tooling isn't as strong as mentioned above, and putting large chunks of html into your components makes them harder to read.

Also, if you are following the angular2 style guide, it recommends that you do extract templates into a separate file when longer than 3 lines.

From the angular2 style guide :

Do extract templates and styles into a separate file, when more than 3 lines.

Why? Syntax hints for inline templates in (.js and .ts) code files are not supported by some editors.

Why? A component file's logic is easier to read when not mixed with inline template and styles.

Source

Answer 3

You can pass a string literal to template consisting of your components HTML. This way you have the HTML source in the same file as the TypeScript code.

With templateUrl you're referencing an external file containing the template HTML. This way you have HTML and TypeScript in separate files.

In an external file you usually have better support for auto-completion and syntax check, but can be cumbersome because every component consists of several files instead of one (there are also styles). External files need to be inlined in a build step, otherwise you'd have lots of server requests for loading all the template files.

The Angular2 style guide suggests to not have inline templates with more than 3 lines.

Answer 4

One of the drawbacks of putting your template HTML into separate file might happen if you're developing Angular2+ library that supposed to be used in other projects.

In this case the consumers of your library might not be able to perform JIT compilation successfully unless they use template loaders like angular2-template-loader or angular2-rollup or any other depending on the bundler that should be properly configured that sometimes might be tricky.

To avoid this drawback and still have templates in separate files (which i think is quite convenient) the library developer might end up inlining templates automatically using Gulp plugin like gulp-inline-ng2-template or any other. But this would mean additional level of complexity while building ES2015 version of the library.

Answer 5

Most of the answers seam to be around editor support, but, while that argument is true, I would not argue that as a strong point for putting the html and css into .html and .css files.

The main reason that I separate my html and css files is because it follows SRP . It allows for easy code portability and reuse as Angular changes versions and syntax of how the typescript should be layed out, your html and css stay for the most part the same.

Answer 6

Seems to be working now.

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

Taken from 'tour of heros' https://angular.io/docs/ts/latest/tutorial/toh-pt5.html and adapted to test this concrete issue.

angular2@2.0.0-beta.8