Contente
- 01. Crie um projeto
- 02. Incluir animações e material angular
- 03. Apresente um componente de página
- 04. Construa seu componente de página
A versão mais recente do Angular é frequentemente considerada como uma estrutura que vem do lado corporativo das trilhas e geralmente desfruta da companhia de aplicativos de linha de negócios. Embora seja verdade que o Angular realmente evoluiu de uma estrutura para uma plataforma que suporta todos os tipos de aplicativos, existem muitos recursos realmente incríveis para os desenvolvedores criarem experiências imersivas para seus usuários.
Esta é a primeira parte de uma série sobre como construir um site animado de página inteira no Angular. Começaremos criando um site de página inteira e, em seguida, animá-lo-emos no capítulo seguinte.
Neste tutorial, vamos nos concentrar principalmente nas peças angulares e deixar de falar sobre as partes HTML e CSS que não estão diretamente relacionadas à construção do aplicativo. Faça download do código-fonte para acompanhar. Não é vendido no Angular? Encontre o construtor de sites perfeito aqui (e os melhores preços abaixo). Independentemente da forma como você constrói seu site, você precisará de hospedagem na web e armazenamento em nuvem decentes.
01. Crie um projeto
Existem muitas partes móveis que entram em um aplicativo da Web não trivial. Quais dependências seu aplicativo tem? Como você vai executá-lo localmente? Como você vai testar isso? Como você vai agrupar seus ativos
Felizmente, o complexo processo de composição desses elementos é tratado fora da vista, no @ angular / cli. Com apenas alguns comandos de nosso terminal, podemos ter um aplicativo Angular totalmente funcional pronto para trabalharmos.
A primeira etapa para trabalhar com o CLI é instalá-lo. Para isso, utilize o comando abaixo:
npm install -g @ angular / cli
Assim que a CLI estiver instalada, a partir da linha de comando, podemos navegar até a pasta em que queremos instalar nosso projeto. A partir daí, executaremos de novo com o nome do nosso projeto. Isso criará uma pasta com o mesmo nome, para a qual navegaremos assim que o projeto for concluído.
cd sua pasta de projetos> ng novo site de animações angulares cd site de animações angulares
E é isso! Nosso aplicativo Angular está pronto para ser executado. Você pode iniciar seu aplicativo com npm start ou ng serve. Eu prefiro usar npm start porque é mais convencional e me permite adicionar comandos adicionais. Você pode então navegar para http: // localhost: 4200 para ver o aplicativo em execução.
02. Incluir animações e material angular
Porque gostamos de coisas bonitas, vamos fazer algumas pequenas adições ao nosso aplicativo, adicionando e instalando o @ angular / animations e @ angular / material pacotes:
npm i --save @ angular / material @ angular / animations
Podemos informar o Angular sobre essas dependências adicionando-as ao nosso app.module.ts Arquivo. Estaremos usando o botão Angular Material, cartão e barra de ferramentas, por isso vamos importar seus respectivos módulos, bem como o BrowserAnimationsModule.
// app / app.module.ts ... import {MdButtonModule, MdCardModule, MdToolbarModule} de ’@ angular / material’; importar {BrowserAnimationsModule} de ’@ angular / platform-browser / animations’;
Podemos então adicioná-los ao importações matriz com o nosso NgModule declaração.
// app / app.module.ts ... import {MdButtonModule, MdCardModule, MdToolbarModule} de ’@ angular / material’; importar {BrowserAnimationsModule} de ’@ angular / platform-browser / animations’; @NgModule ({... importações: [... BrowserAnimationsModule, MdToolbarModule, MdButtonModule, MdCardModule], ...})
E para uma adição final, vamos importar o tema rosa índigo em nosso styles.css Arquivo.
/ * styles.css * / @import ’~@angular/material/prebuilt-themes/indigo-pink.css’;
Até este ponto, nos concentramos inteiramente na configuração do aplicativo para que pudéssemos começar a desenvolvê-lo. Esses comandos podem parecer desajeitados no início, mas depois que você se acostumar com eles, descobrirá que leva apenas alguns minutos para ter um ambiente totalmente integrado com todos os recursos de que precisamos para construir um bom site.
03. Apresente um componente de página
Como estamos construindo um site com o Angular, precisaremos introduzir um mecanismo para exibir nossas páginas. No Angular, o bloco de construção atômico de um aplicativo é o componente. Ao arquitetar nosso aplicativo com componentes bem definidos e encapsulados, podemos facilmente reutilizar a funcionalidade, bem como compor novas funcionalidades, introduzindo novos componentes.
O CLI é fornecido com suporte a gerador pronto para uso, e é isso que usamos para criar nosso componente de página. Podemos gerar nosso componente de página executando o comando abaixo (o g comando é uma abreviatura para gerar).
página do componente ng g
Nota: Eu recomendo dedicar algum tempo para aprender como construir as principais peças angulares manualmente até que você tenha construído sua memória muscular. É apenas quando você realmente entende o que está acontecendo que você deve otimizar seu fluxo de trabalho com geradores.
A CLI irá gerar uma pasta no src diretório chamado página com um arquivo HTML, CSS e Typescript, bem como um arquivo spec. Na nossa page.component.ts arquivo, temos a estrutura básica de um componente. Nosso componente faz referência a nossos arquivos de modelo e estilo no @Componente metadados e tem nosso construtor e ngOnit métodos eliminados.
// app / page / page.component.ts import {Component, OnInit} de ’@ angular / core’; @Component ({selector: 'app-page', templateUrl: './page.component.html', styleUrls: ['./page.component.css']}) export class PageComponent implementa OnInit {constructor () {} ngOnInit () {}}
Junto com a geração de nosso componente, a CLI também modificará nosso app.module.ts para incluir um PageComponent entrada em nosso declarações variedade. Isso significa que nosso componente de página agora está disponível em todo o módulo.
// app / app.module.ts @NgModule ({declarações: [AppComponent, PageComponent], ...})
Como uma verificação de sanidade, podemos pular em nosso app.component.html arquivo e adicionar app-page> / app-page> ao fundo. Observe que a tag do elemento que estamos usando corresponde ao seletor propriedade definida em nosso @Componente metadados.
! - app / app.component.html -> h1> {{title}} / h1> app-page> / app-page>
04. Construa seu componente de página
Com nosso componente de página ativo e bem, podemos construí-lo para que comece a se parecer com uma página da web real.Vamos apresentar um página objeto com título, subtítulo, contente, e imagem propriedades.
// app / page / page.component.ts export class PageComponent implementa OnInit {page = {title: 'Home', subtítulo: 'Welcome Home!', content: 'Some home content.', image: 'assets / bg00. jpg '}; construtor () {} ngOnInit () {}}
Vamos atualizar nosso modelo para vincular ao página objeto. Existe um elemento de imagem que eventualmente será aumentado para preencher toda a janela do navegador. Também vamos adicionar um componente de cartão de material angular que vincularemos o resto de nossos página objetar.
! - app / page / page.component.html -> img [src] = "page.image"> cartão md> cabeçalho do cartão md> título do cartão md> h1> {{page.title} } / h1> / título-cartão-md> legenda-cartão-md> {{page.subtitle}} / legenda-cartão-md> / cabeçalho-cartão-md> conteúdo-cartão-md> {{page.content} } / md-card-content> / md-card>
Nosso componente de página está começando a ficar muito melhor! Nossa próxima etapa é adicionar a capacidade de ter várias páginas e navegar entre elas.
Página 2: Como criar várias páginas
