O que é exatamente angular?

Angular é uma estrutura de front-end de código-fonte aberto JavaScript, cria Aplicativos de Página Única (SPAs) reativos e foi criada pelos desenvolvedores do Google. A Angular atestou o amplo controle nas estruturas JavaScript de código aberto e é extremamente valorizada entre desenvolvedores e empresas por suas excelentes técnicas de funcionamento. Atualmente, uma estrutura MVW inovadora do lado do cliente é altamente usada atualmente para o desenvolvimento de aplicativos móveis e aplicativos da web. Foi escrito em Typescript com suporte à padronização ES6 (ECMA Script 2015). Texto datilografado desenvolvido pela Microsoft e é um superconjunto de JavaScript. Isso irá transpilar o código e converter no formato JavaScript ou ES5. O TypeScript é fortemente tipado e é permitido escrever recursos OOPS como instruções de classe, interface e módulo, como C # ou Java, que aumentam a execução e reduzem os erros de tempo de execução.

A seguir, estão os principais recursos do Angular 2

  • Componentes -

a versão anterior do Angular tinha a atenção dos controladores, mas agora mudou totalmente o foco para trabalhar com componentes sobre os controladores. Os componentes ajudam a criar os aplicativos em vários módulos. Isso ajuda no gerenciamento mais eficaz do aplicativo em um período de tempo.

  • Módulo -

o módulo é bastante idêntico a uma classe. Um módulo é geralmente descrito por um bloco de código que é utilizado para executar uma determinada tarefa única. O Angular tem a capacidade de modularidade, onde apenas um aplicativo é criado, separando-o em vários módulos. A palavra-chave Export é utilizada para exportar a classe de componente de um módulo. Todo aplicativo Angular possui pelo menos um módulo Angular por convenção chamado módulo de aplicativo.

Por exemplo

  • Modelo -

O modelo é a função principal que justifica a navegação do componente. Pode-se declarar que a visualização do componente é identificada usando um modelo. É criado com HTML, inclui ligação e diretiva.

Por exemplo

  • Metadados -

É muito útil aumentar a eficiência da classe. No texto datilografado, para esse fim, é identificado pela classe de decoração. Por exemplo, para especificar qualquer componente no aplicativo Angular, use os metadados da classe (ie. @ Decorador de componentes).

Um decorador é uma função que coloca metadados em uma classe, são membros ou são argumentos de método.

  • Ligação de dados -

O recurso mais eficaz, vinculação de dados, é a ponte de conexão entre o Model e o View. Faz sincronizado automaticamente. O Angular suporta quatro tipos de encadernação - Vinculação de propriedades, Vinculação de eventos, Interpolação e Vinculação bidirecional.

  • Directiva -

As diretivas são atributos HTML personalizados, úteis para manter a capacidade do HTML. Para fazer uma diretiva, o decorador @Directive é utilizado nos metadados conectados da classe. Três tipos de diretivas - Componente, Decorador e Modelo.

  • Serviços -

Os serviços são usados ​​sempre que uma produtividade única é necessária normalmente em diferentes módulos do aplicativo. Fundamentalmente, é utilizado para compartilhar os dados e o comportamento dentro do aplicativo. O serviço não possui classe base. Os serviços usados ​​com frequência são serviço de registro, serviço de dados, serviço de massagem etc.

  • Injeção de dependência -

Injeção de Dependência em Angular. Injeção de Dependência (DI) é um conceito básico do Angular 2+ e permite que uma classe colete dependências de outra classe. Geralmente em Angular, a injeção de dependência é realizada injetando uma classe de serviço em uma seção ou classe de módulo.

Por exemplo

Existem muitos editores de texto que suportam totalmente o Typecript. Pronto para uso ou com um plug-in, incluindo todos os itens abaixo.

  1. Estúdio visual.
  2. Código do Visual Studio.
  3. Átomo.
  4. Eclipse.
  5. WebStorm.

O Visual Studio Code é a melhor opção, pois é de código aberto e é executado no Linux, Windows e MacOS. Ele fornece ótimos recursos que suportam o Typecript, incluindo

  • Conclusão automática
  • IntelliSense
  • Verificação de sintaxe
  • Reestruturação

Para baixar o código do Visual Studio, visite o site https://code.visualstudio.com/download.

Etapas para instalar o Angular 2

Agora, Introdução ao processo de instalação do Angular 2

Etapa 1: para instalar o Angular 2, primeiro baixe o pacote node.js no site https://nodejs.org/en/download/.

Instale o repositório npm (Node Package Manager) baixado em seu sistema.

  • Se você usa o Sistema Windows, instale o instalador do Windows.
  • Se você usa o sistema MacOS, instale o instalador do MacOS.

Verifique as versões compatíveis com o sistema, como 32 ou 64 bits.

Etapa 2: instalando o nó,

Agora , clique duas vezes no arquivo node-v10 15.3-x64.msi baixado para executar o instalador e clique no botão Avançar na tela do instalador.

Etapa 3: Agora, clique na caixa marcada e aceite os termos do Contrato de licença . Clique no botão Avançar.

Etapa 4: na próxima tela, altere o caminho da instalação, se necessário, ou clique no botão Avançar.

Etapa 5: na tela de seleção do próximo recurso, mantenha a seleção padrão e clique no botão Avançar.

Etapa 6: Agora, para instalar o Node.js Clique no botão Instalar.

Etapa 7: na próxima tela, aguarde a conclusão da instalação.

Etapa 8: Agora, clique no botão Concluir.

Etapa 9: Abra o prompt de comando em sua máquina e digite o seguinte comando e verifique a versão do nodejs e a versão do npm:

c:/>node -v

c:/>npm -v.

Etapa 10: Depois que a instalação estiver concluída. Visite o site em https://cli.angular.io/ para Angular CLI (Command Line Interface).

Etapa 11: Abra o prompt de comando na sua máquina e digite o comando “npm install –g @ angular / cli” e pressione Enter para instalar o Angular 2 CLI (Command Line Interface).

Nota: Se você usa o MacOS / Linux, basta colocar o sudo antes do npm, “sudo npm install –g @ angular / cli”

Etapa 12: digite "ng new first-app" e pressione enter para criar o primeiro aplicativo.

Etapa 13: Ao instalar o aplicativo Angular 2, você receberá algumas perguntas pela Angular CLI.

  • Deseja adicionar roteamento angular? (S / Não) -> Não
  • Qual padrão de folha de estilo deseja usar? (Use as setas) -> CSS

Etapa 14: no primeiro aplicativo, adicione todos os pacotes usando a Angular CLI

Depois de instalar todos os pacotes, significa que o aplicativo é criado no disco.

Etapa 15: Digite o comando “ng –version” no prompt de comando e pressione Enter para descobrir a versão angular

Etapa 16: Agora, digite o comando “cd first-app” para entrar no diretório ou pasta do aplicativo.

Etapa 17: Finalmente, o aplicativo Angular do "Primeiro Aplicativo" é criado; Agora digite o comando “ng serve”.

Etapa 18: Agora, abra o navegador e digite http: // localhost: 4200 na barra de endereços e pressione Enter para executar o aplicativo First Application Angular no navegador.

Artigos recomendados

Este foi um guia sobre a instalação do Angular 2. Aqui discutimos os principais recursos do Angular 2 e as etapas para instalar o Angular 2. Você também pode consultar os seguintes artigos para saber mais -

  1. Folha de fraude angular 2
  2. Perguntas da entrevista do Angular 2
  3. Vue JS vs Angular 2
  4. Comandos angulares

Categoria:

Desenvolvimento de software