Criar interface do usuário com um componente Angular

    Quando se trata de criar uma interface de usuário em um aplicativo Angular, você pode usar um componente Angular para facilitar o processo.

    Criar uma interface do usuário no Angular é muito semelhante a como criaríamos uma no WPF. Normalmente usamos controles de usuário, representados pela classe UserControl. A UserControl marcação e código de grupos em um contêiner reutilizável, permitindo que a mesma interface e funcionalidade sejam usadas em vários lugares diferentes. Esse controle de usuário terá um arquivo .xaml para a marcação da interface do usuário e um arquivo C# para a lógica e, em seguida, pode até ter um dicionário de recursos, que conteria qualquer tipo de informação de estilo para esse controle de usuário. Enquanto em Angular, usamos o que é chamado de a Component. Um componente tem um arquivo html, que é usado para qualquer marcação de interface do usuário. Ele tem um arquivo datilografado, que é usado para suas propriedades e lógica, e então usa um arquivo CSS para todas as suas informações de estilo. Vamos ver o quão semelhantes esses dois são.

    No lado esquerdo, temos um aplicativo WPF, com um controle de usuário chamado Sample. Ele também possui um dicionário de recursos chamado SampleResources que contém informações de estilo. No lado direito, temos um aplicativo Angular com um AppComponent. Vamos comparar o componente do aplicativo Angular com o do controle de usuário de exemplo no aplicativo WPF.

    Comece abrindo o arquivo typescript do componente do aplicativo. Podemos pensar nesse arquivo como o código por trás do componente, e a razão pela qual pensamos dessa maneira é porque, se chegarmos ao WPF e abrirmos o Sample.xaml.cs, o código por trás do controle do Sample usuário, podemos ver muitas semelhanças.

    Primeiro, podemos ver que temos uma classe chamada que estamos exportando AppComponent. Agora, esse AppComponent também tem uma propriedade chamada title. Então, dentro dessa classe, vamos definir todas as propriedades, métodos e eventos necessários para que nosso componente seja executado. Isso é extremamente semelhante, se não exatamente o mesmo, de um controle de usuário. Podemos ver que temos uma classe, neste caso chamada Sample, e dentro dessa classe, vamos definir todas as propriedades, métodos e eventos necessários para que o controle do usuário funcione.

    Em seguida, vamos subir algumas linhas no arquivo datilografado e ver essa pequena sintaxe estranha com o pequeno @ símbolo e, em seguida, Componente. Na verdade, isso é chamado de decorador. Esse decorador está Angular dizendo como vamos tratar essa classe que estamos exportando. Nesse caso, vamos tratá-lo como um componente e, como o estamos tratando como um componente, temos que fornecer algumas informações no decorador. Antes de chegarmos às informações, vamos primeiro prestar atenção à linha superior do arquivo datilografado -import { Component } from '@angular/core'. Você pode pensar nisso como uma instrução using. Essencialmente, estamos importando os objetos necessários para que esse componente funcione. Nesse caso, estamos importando o Component do @angular/core módulo, para que possamos realmente usar o decorador para esse componente. Isso é extremamente semelhante a uma instrução using dentro do código por trás do nosso controle de usuário. Usamos using instruções dentro do C# para localizar e usar objetos dentro de nossa classe que são necessários para que o controle do usuário funcione.

    Agora, vamos voltar para dentro do decorador de componentes.

    • A linha de código na linha 4 é chamada de seletor. O seletor nos ajuda a determinar como vamos definir esses elementos em html. Esse seletor é chamado app-root, então, se formos em frente e abrirmos o index.html, poderemos ver dentro do corpo um elemento chamado app-root. Esse elemento está usando o seletor definido no decorador de componentes para definir uma instância desse componente.
    • Em seguida, na linha 5, temos o que é chamado de URL de modelo. Isso está apontando para um arquivo chamado app.component.html arquivo html que representa a renderização visual desse componente. Isso é extremamente semelhante ao Sample.xaml arquivo do controle de usuário no WPF, em que o xaml é a marcação que representa como esse controle será renderizado.
    • Na linha 6, vemos os URLs de estilo. A URL de estilo está apontando para um arquivo CSS. Esse arquivo representa as informações de estilo do componente. Então, se abrirmos o app.component.css arquivo, podemos ver que não há informações de estilo aqui, mas podemos pensar no arquivo CSS como um mapeamento direto para um dicionário de recursos. O dicionário de recursos em XAML conterá todas as informações de estilo para o controle de usuário ou elementos dentro do controle de usuário, para que ele seja renderizado de acordo com nosso design. Isso é exatamente a mesma coisa que você faria em CSS.

    Generate a component

    Agora que vimos como um componente Angular é semelhante a um controle de usuário do WPF, vamos criar um novo componente e adicioná-lo ao nosso aplicativo. Se você for um desenvolvedor da área de trabalho, no WPF, quando quiser adicionar um novo controle de usuário, basta clicar com o botão direito do mouse em seu projeto e dizer Adicionar > Controle de Usuário. Bem, é claro que se você tentar fazer a mesma coisa no Visual Studio Code, não terá essa opção. Você só tem um novo arquivo, uma nova pasta. Isso significa que temos que entrar em nosso terminal e usar o Angular CLI para gerar nosso componente. Então, vamos alternar um terminal digitando Control + Backtick. No terminal, apenas digitamos NG G para gerar, C para componente e, em seguida, fornecemos um nome para nosso componente, por exemplo sample.

    ng g c sample

    Quando o comando for concluído, você notará que várias coisas aconteceram. Primeiro, temos uma nova pasta com o mesmo nome que demos ao nosso componente. Também temos quatro novos arquivos - um arquivo html, um arquivo SPEC, um arquivo typescript e um arquivo CSS. Também fizemos uma atualização no app.module.ts arquivo.

    Olhe para a sample pasta que contém nosso componente recém-criado. Podemos ver que todos os três arquivos necessários para um componente estão lá, além desse arquivo SPEC extra. Na verdade, este é um arquivo de teste que não precisamos para este artigo, então não vamos nos preocupar com isso agora. Também fizemos uma modificação no app.module.ts, na qual ele adicionou o componente de amostra à declarations seção do nosso NgModule.

    Note

    Isso é importante - sempre que um novo componente é criado, ele deve ser declarado na seção de declarações do módulo NG. Esta seção diz essencialmente quais componentes pertencem a este módulo.

    Vamos voltar ao nosso sample.component.ts arquivo. Parece muito semelhante ao app.component.ts arquivo que abordamos acima. Nesse caso, temos nossa instrução de importação em que estamos importando nosso componente. Temos nosso decorador de componentes onde app-sample estamos definindo nosso seletor. Temos o URL do nosso modelo como sample.component.html e temos o nosso URL sample.component.css de estilo.

    Vamos abrir o arquivo html onde podemos ver um parágrafo informando sample works!. Queremos ver isso quando iniciarmos o aplicativo, então vamos para o app.component.html. Excluiremos a maior parte da marcação inicial, exceto o título, e apenas adicionaremos <app-sample></app-sample>.

    <div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <app-sample></app-sample>
</div>

    Run the application

    Ao digitar npm start no terminal, ele compilará e construirá nosso aplicativo e o iniciará dentro do navegador. Se tudo correr bem, nosso aplicativo deve estar rodando no navegador. welcome to app Temos a marcação do componente do aplicativo e, em seguida. sample works! Essa é a marcação do nosso componente de amostra que acabamos de adicionar. Vamos agora alterar um pouco nosso componente de amostra, alterando o texto para 'Esta amostra funciona muito bem!'.

    <p>
  This sample works very well!
</p>

    Depois de salvar e verificar o navegador, veremos que estamos realmente editando o html responsável por renderizar o componente de amostra. Se quisermos estilizar nosso componente, precisamos examinar nossa URL de estilo. Então, vamos abrir nosso sample.component.css arquivo e deixar a cor vermelha da tag do parágrafo.

    p {
    color: red;
}

    Depois de salvar isso e abrir o navegador, devemos ver que o estilo no arquivo CSS foi aplicado ao nosso componente de amostra.

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.