Angular 2 - Modelos
No capítulo sobre Componentes, já vimos um exemplo do seguinte modelo.
template: '
<div>
<h1>{{appTitle}}</h1>
<div>To Tutorials Point</div>
</div>
'
Isso é conhecido como um inline template. Existem outras maneiras de definir um modelo e isso pode ser feito por meio do comando templateURL. A maneira mais simples de usar isso no componente é a seguinte.
Sintaxe
templateURL:
viewname.component.html
Parâmetros
viewname - Este é o nome do módulo do componente do aplicativo.
Após o viewname, o componente precisa ser adicionado ao nome do arquivo.
A seguir estão as etapas para definir um modelo embutido.
Step 1- Crie um arquivo chamado app.component.html. Isso conterá o código html da visualização.
Step 2 - Adicione o seguinte código no arquivo criado acima.
<div>{{appTitle}} Tutorialspoint </div>
Isso define uma tag div simples e faz referência à propriedade appTitle da classe app.component.
Step 3 - No arquivo app.component.ts, adicione o seguinte código.
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
appTitle: string = 'Welcome';
}
No código acima, a única alteração que pode ser observada é do templateURL, que fornece o link para o arquivo app.component.html que está localizado na pasta do aplicativo.
Step 4 - Execute o código no navegador, você obterá a seguinte saída.
A partir da saída, pode-se ver que o arquivo de modelo (app.component.html) está sendo chamado de acordo.