Construa um aplicativo de design de material com angular 2

O material angular é uma estrutura de componente da interface do usuário que implementa a especificação de design de material do Google para angular 2 - a nova e mais rápida implementação de angular, escrita em datilografamento. Embora ainda em Alpha, material angular já fornece um conjunto de componentes de interface reutilizáveis ​​e acessíveis com base no projeto de material.

O próprio angular é projetado para uso em todas as plataformas (Web, mobile e desktop) e tem muitas novas tecnologias associadas a ele. No nível Javascript, temos a sintaxe adicional da ECMAScript 2015 (ES6), de digitação e suporte de interface do tipografia, juntamente com decoradores da API de reflexão de metadados. Ele usa observáveis ​​da biblioteca de extensões reativas para gerenciar seqüências de eventos de forma funcional de programação. Ele usa zonas para encapsular e interceptar atividades assíncronas para fornecer uma forma de armazenamento local de rosca, permitindo que angular responda automaticamente às alterações de dados em eventos assíncronos para manter as ligações de dados. Finalmente, o carregamento do módulo é tratado por SystemJs.

Neste tutorial, vamos usar o Angular 2 para criar um aplicativo simples de fazer com alguns elementos de design de material de assinatura. Obtenha os arquivos de origem aqui .

Prepare-se

Configurar o ambiente inicial pode ser difícil. Há um Angular2-SEED. disponível, bem como um Angular2-Starter. . No entanto, há algo ainda melhor: com Angular-CLI. Você pode configurar seu projeto angular 2 com um único comando.

Não só vai cuidar da configuração para todas as tecnologias que mencionei na última seção (via nó e NPM), ele também adicionará andaimes para teste de unidade de jasmim, teste de testes de ponta a ponta, além de testes de tslint, e CodelyZer Análise de código estático de 2 datilografamento angular 2. Embora você não tenha que usar tudo isso, você definitivamente deveria. É tão simples de usar, você vai se perguntar como você já se deu bem sem isso.

Angular CLI está disponível como um pacote NPM, então você precisará instalar o nó e o NPM globalmente na sua máquina usando NPM install -g angular-cl . Agora crie um novo aplicativo angular 2 com ng novo material2-do . Você vai ter que esperar um pouco, porque depois de gerar os arquivos necessários, ele inicializa um repo Git e faz um NPM Install. Para baixar todos os módulos necessários em node_modules / . Dê uma olhada no Package.json. e se familiarizar com os módulos e scripts lá.

Você já criou um novo aplicativo angular 2 que segue as melhores práticas oficiais.

Adicionar material de material

O aplicativo padrão não sabe nada sobre design de material (uma supervisão, tenho certeza), então temos que adicioná-lo a nós mesmos.

Há uma lista de pacotes angulares de design de 3 angulares publicados no @ material angular2 biblioteca. Neste exemplo, vamos usar testemunho (Necessário para todos os aplicativos de material angular), bem como botão , cartão , caixa de seleção. , ícone , entrada , Lista e Barra de ferramentas :

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,toolbar}@2.0.0-alpha.5

Para o pacote do fornecedor funcionar, precisamos adicionar @ Angular2-Material / ** / * para a matriz de vendornpmfiles. no angular-cli-build.js . Também precisamos adicionar o caminho a @ material angular2 ao Mapas. objeto:

 Const mapa: qualquer = {
  '@ angular2-material': 'fornecedor / @ angular2-material'
}; 

Deixe SystemJs saber como processar novos módulos apontando para os arquivos principais de cada um dos pacotes:

 Const Pacotes: qualquer = {};

// Coloque os nomes de qualquer um dos seus componentes materiais aqui
Const materialpkgs: string [] = ['core', "botão", "cartão", "caixa de seleção",
'Icon', 'Entrada', 'List', 'Toolbar'];

materialpkgs.foreach ((pkg) = & gt; {
  pacotes [`` @ @ angular2-material / $ {pkg} `] = {principal:` $ {pkg} .js '};
}); 

Agora é hora de carregar a fonte do ícone de design de material no de src / index.html. . Qualquer fonte vai funcionar, mas estamos usando os ícones de design de material padrão:

 & lt; link href = "https://fonts.googleapis.com/icon?family=material+icons" rel = "Stylesheet" & gt; 

Crie uma caixa de diálogo MD

Agora podemos trabalhar com design material no nosso aplicativo para fazer. Um dos componentes que estão faltando atualmente no design de material angular 2 é um prompt ou diálogo, portanto, para nossa primeira tarefa, faremos um!

Vamos criar um novo componente usando um cartão de design de material, uma barra de ferramentas, uma entrada e um par de botões. No src / app. pasta do seu repo, digite ng gerar diálogo componente . Isso gera um novo DialogComponent. no SRC / APP / DIALOG e adiciona um barril a System-config.ts. Então SystemJs sabe como carregá-lo.

Se você olhar para o gerado Dialog.component.ts. Arquivo, você verá a primeira linha é: Importar {componente, oninit} a partir de '@ angular / núcleo'; . Componente é um dos principais blocos de construção de angular e Oninit. é uma das interfaces que implementa. No entanto, a fim de ter acesso à comunicação entre componentes aninhados, bem como os componentes de design de material mencionados acima, precisamos importar entrada, Resultado e Eventemitter. a partir de @ angular / núcleo; e Mdcard. , Mdinput. , Mdtoolbar. e Mdbutton. de seus módulos correspondentes no @ Angular2- Material biblioteca.

Para tornar esses componentes materiais, precisamos injetar as diretrizes nossa DialogComponent. requer. Vamos adicionar as seguintes diretrizes ao @Components. Metadados:

 mododurl: 'dialog.component.html',
Directivas: [Mdcard, MDToolbar, Mdinput, Mdbutton],
Styleurls: ['dialog.component.css'] 

Nós então declaramos uma série de @Entrada variáveis ​​( OkText. , CancelText. e assim por diante) que nos permitem definir o conteúdo do diálogo. Também precisamos adicionar um @Resultado Emissor que nos permite acionar uma função com um valor no componente pai quando a caixa de diálogo é fechada.

Agora podemos substituir o construtor gerado em Dialog.component.ts. Com o seguinte código:

 construtor () {
 este.OkText = 'OK';
 this.canceltext = 'cancelar';
}

emitvalue (valor) {
 este.ValueEmitted.emit (valor);
} 

Bem como usar o @Entrada Variáveis ​​dentro do nosso DialogComponent. dentro do Dialog.component.html. Modelo, o. Entrada de MD. nos permite aceitar informações do usuário:

 & lt; MD-Entrada Classe = "Largura Full" [Placeholder] = "Placeholder"
        [(ngmodel)] = "valor" #dialoginput
        (keyup.enter) = "emitvalue (valor)"
        (keyup.escape) = "emitvalue (null)" & gt; & lt; / md-input & gt; 

O MD-botons. Permitir que o usuário clique em "OK", 'Cancelar' ou o que você decidir rotular esses botões:

 & lt; botão MD-botão (clique) = "emitvalue (nulo)" cor = "primário" & gt;
  {{cancelText}}
& lt; / botão & gt;
& lt; botão md-raised-button (clique) = "emitvalue (valor)" color = "primário" & gt;
  {{OkText}}
& lt; / botão & gt; 

Observe o. keyup Manipuladores de eventos, que cuidam das coisas quando a tecla Enter ou Escape é pressionada. Estes manipuladores são idênticos ao clique manipuladores de eventos para CancelText. e OkText. . Escape faz a mesma coisa que cancelar (emitvalue (nulo)) , e bater entrar terá o mesmo resultado que clicando em OK (emitvalue (valor)) . Isso nos permite solicitar ao usuário por um valor Via AN. Entrada de MD. e receba saída emitida.

Podemos ver exemplos de um número de componentes de design de material: cartão de md. , Botão MD. , e assim por diante. Também precisamos adicionar alguns CSS em Dialog.component.css. Para atingir o layout, desejamos - você pode ver o código completo no repo do github acompanhante.

Agora vamos adicionar isso DialogComponent. para material2-do.component.html. Para ver o que parece:

 & lt; Dialog do aplicativo [título] = "'prompt de diálogo'"
  [Modelo] = "'Este é o nosso novo componente baseado em design de material:'"
  [Placeholder] = "'Digite texto aqui'"
  [OkText] = "'Sim'"
  [CancelText] = "'não'"
  [Valor] = "'Texto inicial'"
  (Valueemitted) = "log ($ evento)"
  [showprompt] = "True" & gt;
& lt; / app-dialog & gt; 

Observe que temos strings literais para todos os @Inputs. . Estes exigem que usemos cotações individuais e duplas, caso contrário, angular interpretariam o conteúdo como um nome variável no Componente escopo.

Nós também temos o que se emitiu @Resultado . Isso torna a caixa de diálogo simples e extremamente configurável. A maioria dos insumos teria padronizado para seqüências vazias se omitido.

Vamos modificar Material2Docomponent. . Precisamos importar o DialogComponent e declará-lo como uma diretiva, caso contrário Material2Docomponent. não será capaz de torná-lo. Também adicionaremos a função de log:

 log (texto) {
   console.log (texto);
 } 

Vamos dar uma olhada no nosso handIwork. Você pode atender o aplicativo (a porta padrão é 4200) executando Início de Run-script de NPM , que por sua vez é executado servidor ng. . Se você abrir o console, poderá ver o que é registrado: o conteúdo da entrada é emitido quando você clica em "Sim", e nulo é emitido quando você clica em "não".

Agora estamos prontos para usar este novo DialogComponent. para criar nosso aplicativo para fazer.

Crie o aplicativo principal

Vamos usar os seguintes componentes MD para o aplicativo principal: Barra de ferramentas , Lista , item de lista , caixa de seleção. , botão , ícone , Ícone-Registry. e seu dependente, Http_provider. , da biblioteca HTTP angular. Então estes precisam ser adicionados à seção de importação de Material2Docomponent. .

Mais uma vez, para poder tornar esses componentes, precisamos incluí-los no @Components. Metadados directivas array junto com DialogComponent. , que acabamos de adicionar:

 Directivas: [MDCard, MDToolbar, MDList, MDListem, Mdcheckbox, Mdbutton, Mdicon, DialogComponent], 

Para obter acesso ao Mdiconregistry. , precisamos injetá-lo, junto com Http_providers. , através do. @Components. Metadados provedores de provedores variedade:

 Provedores: [MdiconRegistry, http_providers], 

Agora nós alavancamos o nosso DialogComponent. , adicionando lógica suficiente para um aplicativo simples de fazer. O tododialog. é chamado para abrir nossa caixa de diálogo, com a tarefa para editar ( façam ) ou nulo Se estamos criando um novo.

Configuramos as variáveis ​​padrão para uma nova tarefa, ou se estamos editando uma tarefa, os alterarmos de acordo. Nós então mostramos o DialogComponent. Ao definir o. showdialog. variável para verdade :

 tododialog (TODO = null) {
    this.okbuttontext = 'criar tarefa';
    este.FieldValue = '';
    este.EDITINGTODO = TODO;
    if (TODO) {
      este.fieldValue = todo.title;
      este.OkButTotext = 'Editar tarefa';
    }
    este.showdialog = true;
  } 

O UpdateToDo. A função é chamada quando desejamos fechá-lo. As outras funções ( EDITTODO. , Addtodo. , hidheedialog. ) são métodos auxiliares para UpdateToDo. .

 Updatetodo (título) {
    if (title) {
      title = title.trim ();
      if (this.editingtodo) {
        este.editso (título);
      } outro {
        este.adtodo (título);
      }
    }
    este.Hedialog ();
  }

No material2-do.component.html. Nós fornecemos nossa inscrição um MD-Toolbar. onde nós colocamos o título, e um MD-Icon. chamado adicionar (que se parece com um sinal de mais) para o nosso botão de ação flutuante (Fab), o que nos permite criar uma nova tarefa:

 & lt; botão md-fab class = "fab-add" (clique) = "tododialog ()" & gt;
      & lt; md-icon & gt; add & lt; / md-icon & gt;
    & lt; / botão & gt; 

Nós usamos Conteúdo do MD-Card para segurar um lista de md. e um * ngfor. para iterar e exibir, nossa lista de afazeres array como MD-List-Itens :

 & lt; MD-List-Item * ngfor = "Deixe Todo de Todolist; Deixe o índice = index" & gt; 

caixa de seleção MD. Permite-nos marcar itens em nossa lista. E nós temos dois md-mini-fab Botões Podemos usar para excluir e editar nossa tarefa: MD-Icons Delete_Forever e mode_edit. :

Botão MD-mini-fab (clique) = "Remove (index)" cor = "primário" & gt;
  & lt; icon & gt; delete_forever & lt; / md-icon & gt;
& lt; / botão & gt;

Botão MD-mini-fab (clique) = "tododialog (todo)" color = "primário"
        [desativado] = "TODO.OPLETED" & gt;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / botão & gt; 

Com um pouco de CSS, estes permanecem ocultos até que você role (ou clique). Você pode ver o código no repo.

Daqui para frente

Como o material angular 2 ainda está em Alpha, há algumas coisas que faltam - em particular, o botão de ondulação do botão MD de assinatura. Embora possa estar quebrando mudanças na API à frente, é muito funcionando. Ele também faz jus à reivindicação de ter uma API simples que não confunda os desenvolvedores e é fácil de alavancar a criação de aplicações ótimas.

Este artigo foi originalmente publicado em questão 284 da rede, a revista mais vendida do mundo para web designers e desenvolvedores. Inscreva-se aqui .

Artigos relacionados:

• O que há de novo em angular 4?
• Como construir um site de página inteira em angular
• Construa um painel de dados com AngularJs