Como construir um site de página inteira em angular

Feb 13, 2026
Como

A última versão do angular é frequentemente pensada como uma estrutura que vem do lado da empresa das faixas e geralmente goza da empresa de aplicações de linha de negócios. Embora seja verdade que a angular de fato evoluiu de uma estrutura para uma plataforma que suporta todos os tipos de aplicativos, há muitos recursos realmente incríveis que existem para desenvolvedores para criar experiências imersivas para seus usuários.

Esta é a primeira parte em uma série sobre como construir um site animado de página inteira em angular. Vamos começar a construir um site de página inteira e animá-lo na seguinte parcela.

Neste tutorial, vamos nos concentrar principalmente nas peças angulares e renunciando a falar sobre as partes HTML e CSS que não se relacionam diretamente com a construção do aplicativo. Por favor, baixe o. Código fonte para acompanhar. Não vendido em angular? Encontre o perfeito Construtor de sites Aqui (e os melhores preços abaixo).

01. Crie um projeto

Há muitas partes móveis que vão para um aplicativo da Web não trivial. Quais dependências sua inscrição tem? Como você vai executá-lo localmente? Como você vai testá-lo? Como você vai agrupar seus ativos?

Felizmente, o complexo processo de composição desses elementos é lidado fora de vista, no @ angular / cli . Em apenas alguns comandos do nosso terminal, podemos ter uma aplicação angular totalmente funcional pronta para trabalharmos.

O primeiro passo para trabalhar com o CLI é instalá-lo. Para isso, use o comando abaixo: 

npm install -g @angular/cli

Depois que o CLI estiver instalado, a partir da linha de comando, podemos navegar para a pasta que queremos instalar nosso projeto em. De lá vamos correr ng new. com o nome do nosso projeto. Isso criará uma pasta com esse mesmo nome, que navegaremos assim que o projeto estiver concluído. 

 CD & lt; sua pasta de projetos e GT;
ng nova animações angular-site
CD angular-animações-site

E isso é isso! Nosso aplicativo angular está pronto para ser executado. Você pode iniciar sua inscrição com iniciar o npm. ou ng servir . Eu prefiro usar iniciar o npm. 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.

The stock Angular CLI application running

A aplicação angular de estoque em execução

02. Incluir animações e material angular

Porque nós gostamos de coisas bonitas, vamos fazer algumas pequenas adições ao nosso aplicativo adicionando e instalando o @ angular / animações e @ angular / material Pacotes: 

 NPM I --Save @ Angular / Material @ Angular / Animações

Podemos deixar angular saber sobre essas dependências, adicionando-as ao nosso app.module.ts. Arquivo. Vamos usar o botão de material angular, cartão e barra de ferramentas, então iremos importar seus respectivos módulos, bem como o BrowserAnimationsModule. . 

 // app / app.module.ts
...
Importar {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} de '@ angular / material';
Importar {BrowserAnimationsModule} de '@ angular / plataforma-navegador / animações';

Podemos então adicioná-los ao importações Array com o nosso Ngmodule. declaração. 

 // app / app.module.ts
...
Importar {mdbuttonmodule, mdcardmodule, mdtoolbarmodule} de '@ angular / material';
Importar {BrowserAnimationsModule} de '@ angular / plataforma-navegador / animações';

@Ngmodule ({
  ...
  importações: [
    ...
    Browseranimationsmodule,
    Mdtoolbarmodule,
    Mdbuttonmodule,
    Mdcardmodule.
  ],
  ...
})

E para uma adição final, importaremos o tema Rosa Indigo para o 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 se desenvolver. Esses comandos podem se sentir desajeitados no começo, mas depois de se acostumar com eles, você achará que leva apenas alguns minutos para ter um ambiente totalmente construído com todos os sinos e assobios que precisamos para construir um site doce.

03. Introduzir um componente de página

Porque estamos construindo um site com angular, precisaremos introduzir um mecanismo para exibir nossas páginas. Em angular, o bloco de construção atômico de uma aplicação é o componente. Ao arquitetar nossa aplicação com componentes encapsulados bem definidos, somos capazes de reutilizar facilmente a funcionalidade, além de compor nova funcionalidade, introduzindo novos componentes.

O CLI envia com suporte gerador para fora da caixa, 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 é taquigrafia para gerar ). 

 Página de componente NG G

Nota: Eu recomendo tomar o tempo para aprender a construir as principais peças angulares à mão até que você tenha construído sua memória muscular. É somente quando você realmente entende o que está acontecendo que deve otimizar seu fluxo de trabalho com geradores.

O CLI gerará uma pasta no src. diretório chamado página com um arquivo HTML, CSS e Typycript, bem como um arquivo de especificação. Na nossa Page.component.ts. arquivo, temos a estrutura básica de um componente. Nosso componente faz referência aos nossos arquivos de modelo e estilo no @Componente metadados e tem o nosso construtor e ngonit métodos espreitados. 

 // aplicativo / página / page.component.ts

importar {componente, oninit} de '@ angular / núcleo';

@Componente({
  Seletor: 'App-Page',
  mododurl: './page.component.html',
  Styleurls: ['./page.component.css']})
Export CLASS pagecomponent Implements OnInit {

  Construtor () {}

  ngoninit () {}
}

Juntamente com a geração do nosso componente, o CLI também modificará nossa app.module.ts. Para incluir A. Pagecomponent. entrada em nossa declarações variedade. Isso significa que nosso componente de página está agora disponível em todo o módulo. 

 // app / app.module.ts

@Ngmodule ({
  Declarações: [
    AppComponent,
    Pagecomponent.
  ],
  ...
})

Como uma verificação de sanidade, podemos entrar em nosso app.component.html. Arquivo e Adicionar. & lt; app-page & gt; & lt; / app-page & gt; ao fundo. Observe que a tag de elemento que estamos usando corresponde ao seletor. propriedade definida em nossa @Componente metadados. 

 & lt;! - app / app.component.html - & gt;

& lt; h1 & gt;
  {{título}}
& lt; / h1 & gt;

& lt; app-page & gt; & lt; / app-page & gt;

The page component rendering in our main application component

A prestação de componentes da página em nosso principal componente de aplicativo

04. Construa seu componente de página

Com o nosso componente de página vivo e bem, podemos construí-lo por isso começa a se parecer com uma página real. Vamos introduzir um página objeto com título , legenda , contente , e imagem propriedades. 

 // aplicativo / página / page.component.ts

Export CLASS pagecomponent Implements OnInit {
  página = {
    Título: 'Home',
    Legenda: 'Bem-vindo Casa!',
    conteúdo: 'Algum conteúdo em casa'.
    Imagem: 'ativos / bg00.jpg'
  };

  Construtor () {}

  ngoninit () {}
}

The styled page component with Angular Material

O componente de página de estilo com material angular

Vamos atualizar nosso modelo para se ligar ao página objeto. Existe um elemento de imagem que eventualmente será aumentado para preencher toda a janela do navegador. Nós também vamos adicionar um componente de cartão de material angular que vamos ligar o resto do nosso página objeto para. 

 & lt;! - app / page / page.component.html - & gt;
& lt; img class = "fullbg" [src] = "Page.Image" & gt;

& lt; md-card & gt;
& lt; md-card-header & gt;
& lt; md-card-title & gt; e lt; h1 & gt; {{page.title}} & lt; / h1 & gt; & lt; / md-card-title-title & gt;
& lt; md-card-subtitle & gt; {{página.subtitle}} & lt; / md-card-legendle & gt;
& lt; / md-card-header & gt;
& lt; md-card-content & gt;
{{Conteúdo da página}}
& lt; / md-card-content & gt;
& lt; / md-card & gt;

Nosso componente de página está começando a parecer muito melhor! Nosso próximo passo é adicionar a capacidade de ter várias páginas e navegar entre eles.

Página 2: Como criar várias páginas

  • 1.
  • 2.
  • 3.
  • 4.

Pagina atual: Página 1

Como - Artigos mais populares

Como classificar no Google

Como Feb 13, 2026

(Crédito da imagem: Buzzfeed) Então, você quer saber como se classificar no Google. A boa notícia é que você n�..

Criar efeitos de colagem no navegador com CSS

Como Feb 13, 2026

Se você já desejou que pudesse replicar os efeitos de um tradicional máquina de colagem na tua layouts ..

Espalhar árvores com V-Ray

Como Feb 13, 2026

Adicionando detalhes à sua cena é sempre o caminho a percorrer quando você quer alcançar mais realismo em seu Arte 3D..

Como criar glazes com aquarela

Como Feb 13, 2026

Para este workshop, eu estarei levando você passo a passo através de uma das minhas pinturas - cobrindo tudo, desde o conceito ..

12 dicas para iluminação 3D realista

Como Feb 13, 2026

A iluminação é fundamental em qualquer Arte 3D. projeto que você trabalha. No nível mais básico, é uma mane..

Tudo o que você precisa saber sobre o novo nó.js 8

Como Feb 13, 2026

A última versão principal do Node.js traz muitas melhorias significativas para a comunidade JavaScript, incluindo um mecanismo ..

Faça uma dupla exposição no Photoshop

Como Feb 13, 2026

A Adobe está lançando uma nova série de tutoriais de vídeo hoje chamada Faça agora, que visa delinear como criar projetos de design específicos usando vários Nuvem criati..

Como tornar um céu fotorrealista

Como Feb 13, 2026

Para este tutorial, estaremos usando Vue xstream. para criar um céu cheio de nuvens. Enquanto você poderia optar..

Categorias