Learning Angular2 for the CEAN Stack

A pilha CEAN (pronuncia-se "keen") é usada para projetar aplicativos da Web com uma interface de usuário segregada (é como a pilha MEAN, mas usa Servidor Couchbase).

Estou aprendendo e escrevendo sobre o Angular2 pela primeira vez este mês, então pensei em reservar um momento para escrever no blog sobre o que aprendi. Se você vir algo que estou fazendo de forma errada ou abaixo do ideal, agora é sua chance de me dar um feedback e me ajudar a aprender. Você pode deixar um comentário ou me envie um tweet.

Um breve histórico: Nunca usei nenhuma dessas estruturas modernas de interface do usuário em nenhum código de produção (ainda). Isso inclui Angular, Angular2, Ember, React, etc. De onde eu vim, tudo era em JavaScript/jQuery/jQuery UI.

Code-behind do TypeScript

Você não precisa usar o TypeScript para usar o Angular2, mas meu colega de trabalho Nic Raboy o usa há algum tempo, e é isso que ele tem me orientado a usar.

O TypeScript é um superconjunto de JavaScript (pense nele como se fosse JavaScript++) que é transpilado para JavaScript simples. No Angular2, uma página (ou view) é acoplada a um arquivo TypeScript (ts) (vindo de uma experiência com ASP.NET, penso neles como "arquivos code-behind"). O arquivo TS é responsável por carregar os dados que a visualização pode usar, bem como responder aos eventos da visualização.

Um exemplo muito simples de um arquivo TS que carrega empresas de um ponto de extremidade REST e as torna disponíveis para uso pela visualização:

import { Component } from '@angular/core';
import { ICompany } from '../../entityInterfaces.ts';

@Component({
  selector: 'companies',
  templateUrl: './app/components/companies/companies.html'
})

export class CompaniesComponent {

    public companies : Array;

    public constructor() {
        this.loadCompanies();
    }
}

importação { Componente } de '@angular/core';

importação { ICompanhia } de '../../entityInterfaces.ts';

@Componente({

seletor: "empresas,

templateUrl: './app/components/companies/companies.html'

})

exportação classe EmpresasComponente {

público empresas : Matriz;

público construtor() {

este.loadCompanies();

}

Neste exemplo, eu "importei" (isso é como um "using" no C#) um tipo de interface chamado ICompany. É isso mesmo, no TypeScript você pode declarar tipos de uma forma muito mais explícita do que no JavaScript simples. O tipo templateUrl no @Component informa a esse arquivo TS a que arquivo HTML ele corresponde. Por fim, estou criando uma classe com um construtor e um campo chamado empresas. O construtor chama um método para carregar essas empresas (de um ponto de extremidade REST usando Ajax). Nesse ponto, empresas está disponível para o arquivo HTML fazer referência.

Visualização Angular2

Uma visualização HTML no Angular2 é basicamente HTML, mas penso nela como um modelo. Dentro desse modelo, uso várias tags e sintaxe específicas do Angular2 para renderizar algo dinamicamente.

Por exemplo, agora que tenho o empresas Posso renderizar uma tabela para listar todas as empresas.

<table>
    <tr><th>Name</th></tr>
    <tr *ngFor="let company of companies;">
        <td>{{company.companyName}}</td>
        <td>
            <a href="#" (click)="delete(company.id)">Delete</a>
            </div>
        </td>
    </tr>
</table>

<td>{{empresa.companyName}}</td>

<td>

<a href="#" (clique)="delete(company.id)">Excluir</a>

</div>

</td>

</tr>

</tabela>

A maior parte disso é HTML que você não deve ter problemas para ler.

A primeira coisa que não é HTML normal é o *ngFor com um loop especificado: let company of companies. Eu penso nisso como foreach(var company in companies) em termos de C#. Como o ngFor está no <tr> esse elemento (e seus filhos) será repetido uma vez para cada empresa na matriz. Portanto, se houver 3 empresas, haverá três <tr> linhas.

A próxima coisa fora do comum é o {{company.companyName}}. Se você já usou Bigode ou outros modelos do lado do cliente, isso deve lhe parecer familiar. Trata-se apenas de interpolar o valor da variável companyName no HTML. Portanto, se o primeiro company.companyName tem um valor de "Couchbase", então a saída será <td>Couchbase</td>.

Por fim, criei um link "excluir" em cada linha. O que está fora do comum aqui é o link (clique) atributo. Isso diz ao Angular para executar algum TypeScript quando o link de exclusão for clicado. Nesse caso, é o atributo delete no codebehind do TS. Ele está passando um parâmetro para esse método.

Com o método delete, o code-behind teria a seguinte aparência:

import { Component } from '@angular/core';
import { ICompany } from '../../entityInterfaces.ts';
@Component({ 
  selector: 'companies',
  templateUrl: './app/components/companies/companies.html'
})

export class CompaniesComponent {
  public companies : Array; 
  public constructor() {
    this.loadCompanies();
  }
  public delete(id: string) {
    console.log("Deleting Company: " + id) 
    this.deleteCompany(id); 
    // delete from the companies array
    for(let i=0; i < this.companies.length; i++) {
      if(this.companies[i].id == id) {
        this.companies.splice(i, 1);
        break;
      }
    }
  }
}

importação { Componente } de '@angular/core';

importação { ICompanhia } de '../../entityInterfaces.ts';

@Componente({

seletor: "empresas,

templateUrl: './app/components/companies/companies.html'

})

exportação classe EmpresasComponente {

público empresas : Matriz;

público construtor() {

este.loadCompanies();

}

público excluir(id: string) {

console.registro("Deleting Company: " + id)

este.deleteCompany(id);

// excluir da matriz de empresas

para(deixar i=0; i < este.empresas.comprimento; i++) {

se(este.empresas[i].id == id) {

este.empresas.emenda(i, 1);

quebra;

}

Observe que o delete tem um parâmetro e, como estamos no TypeScript, é um parâmetro digitado parâmetro.

Há três coisas que estou fazendo nesse método de exclusão:

Gravação de uma mensagem no console (para depuração/ilustração)
Chamada de um método que enviará uma solicitação POST ou DELETE para um ponto de extremidade HTTP (omiti esse método, pois os detalhes não são importantes agora. Também omiti qualquer uso de Promise/callback que seria necessário em uma situação assíncrona como essa).
Estou removendo a empresa do campo companies (percorrendo e emendando a empresa com o ID correspondente). Como alternativa, eu poderia chamar loadCompanies e atualizar toda a lista novamente, o que significaria outra visita ao banco de dados.

A etapa 3 contém uma mágica do Angular2 que você deve conhecer: quando o empresas for alterado, o Angular2 perceberá e atualizará automaticamente o HTML renderizado executando o comando *ngFor loop novamente.

Outros assuntos

Algumas outras coisas que tenho feito e sobre as quais poderei escrever no blog mais tarde:

Formulários no Angular2: eles me permitiriam criar/editar empresas no exemplo acima.
Bibliotecas/plugins JavaScript: para o delete seria bom ter uma caixa de diálogo de confirmação. Estou usando o bootstrape, portanto, seria bom se eu pudesse trazer a caixa de inicialização para usar em caixas de diálogo de confirmação.
Promessas: são importantes quando se trabalha de forma assíncrona (como ao fazer solicitações HTTP para pontos de extremidade da API)

Conclusão

Continuo cético em relação aos benefícios de longo prazo dessas estruturas JS e do próprio TypeScript (pergunte-me sobre isso no Twitter algum dia), mas estou tomando medidas para aprender as ferramentas. Se, depois de tudo isso, eu ainda estiver cético, pelo menos não serei um cético ignorante.

Alguns recursos para continuar explorando o TypeScript e o Angular2:

TypeScript
Angular
Aplicativo de amostra do Angular2 para o Visual Studio

Matthew Groves

Compartilhe este artigo

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

Aprendendo Angular2 para a pilha CEAN

Code-behind do TypeScript

Visualização Angular2

Outros assuntos

Conclusão

Receba atualizações do blog do Couchbase em sua caixa de entrada

Autor

Postado por Matthew Groves

Deixe um comentário Cancelar resposta

Pronto para começar a usar o Couchbase Capella?

Iniciar a construção

Use o Capella gratuitamente

Entre em contato