Criando e Executando um Projeto Angular

O que é Angular?

Angular é um framework front-end de código aberto mantido pelo Google, usado para construir aplicações de página única (SPA) dinâmicas. Ele é baseado em TypeScript e oferece uma rica gama de ferramentas e funcionalidades, permitindo que os desenvolvedores construam aplicativos complexos de maneira eficiente. A principal ideia do Angular é a componentização e a modularização, o que torna o código mais organizado e fácil de manter.

Principais Características e Vantagens do Angular

• Componentização: Construir interfaces de usuário com componentes, tornando o código mais modular e reutilizável.
• Vinculação Bidirecional de Dados: Sincronização automática do modelo de dados e da visão, facilitando o gerenciamento de dados.
• Injeção de Dependência: Através do mecanismo de injeção de dependência, melhora a testabilidade e a manutenibilidade do código.
• Ferramenta CLI Poderosa: Angular fornece uma ferramenta de linha de comando poderosa (Angular CLI) que simplifica a criação, desenvolvimento e construção de projetos.
• Roteamento e Manipulação de Formulários Embutidos: Angular oferece funcionalidades robustas de roteamento e manipulação de formulários, facilitando a construção de aplicações de página única.

Usar Angular pode ajudar os desenvolvedores a construir aplicativos web modernos e responsivos de maneira mais eficiente.

Criando e Executando um Projeto Angular com ServBay

Neste artigo, usaremos o ambiente Node.js fornecido pela ServBay para criar e executar um projeto Angular. Utilizaremos a funcionalidade de 'host' da ServBay para configurar o servidor web e acessaremos o projeto através de proxy reverso e serviço de arquivos estáticos.

Criando um Projeto Angular

1. Inicializar o Projeto

   Primeiro, certifique-se de que você já instalou o ambiente Node.js fornecido pela ServBay. Em seguida, instale o Angular CLI globalmente com o seguinte comando:

   npm install -g @angular/cli

   Crie um novo projeto Angular no diretório raiz do site recomendado pela ServBay, /Applications/ServBay/www:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Siga as instruções fornecidas para nomear o projeto (recomendado nomear como servbay-angular-app) e escolha outras opções conforme necessário:

   ? Would you like to add Angular routing? Yes
   ? Which stylesheet format would you like to use? CSS

2. Instalar Dependências

   Entre no diretório do projeto e instale as dependências:

   cd servbay-angular-app
   npm install

Modificando o Conteúdo de Saída do Projeto Angular

1. Modificar o Arquivo src/app/app.component.html

   Abra o arquivo src/app/app.component.html e modifique o conteúdo para que a página da web exiba "Hello ServBay!":

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
   </div>

Entrando no Modo de Desenvolvimento

1. Executar o Servidor de Desenvolvimento

   Inicie o servidor de desenvolvimento e especifique a porta (por exemplo: 8585):

   ng serve --port 8585

   Isso iniciará um servidor de desenvolvimento local e exporá a porta 8585.

2. Configurar o Proxy Reverso no Host da ServBay

   Use a funcionalidade de 'host' do ServBay para acessar o servidor de desenvolvimento via proxy reverso. Nas configurações de 'host' da ServBay, adicione um novo proxy reverso:

   • Nome: My first Angular dev site
   • Domínio: servbay-angular-test.dev
   • Tipo de Host: Proxy Reverso
   • IP: 127.0.0.1
   • Porta: 8585

   Para passos detalhados, consulte adicionar um site de desenvolvimento Nodejs.

3. Acessar o Modo de Desenvolvimento

   Abra o navegador e acesse https://servbay-angular-test.dev para visualizar o projeto em tempo real. Como a ServBay suporta domínios personalizados e certificados SSL gratuitos, você desfrutará de maior segurança.

Construindo a Versão de Produção

1. Construir a Versão de Produção

   Quando finalizar o desenvolvimento, use o comando a seguir para construir a versão de produção:

   ng build --prod

   Após a construção, os arquivos estáticos gerados estarão no diretório dist/servbay-angular-app.

2. Configurar o Serviço de Arquivos Estáticos

   Use a funcionalidade de 'host' do ServBay para acessar a versão de produção via serviço de arquivos estáticos. Nas configurações de 'host' da ServBay, adicione um novo site estático:

   • Nome: My first Angular production site
   • Domínio: servbay-angular-test.prod
   • Tipo de Host: Estático
   • Diretório Raiz do Site: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app

3. Acessar o Modo de Produção

   Abra o navegador e acesse https://servbay-angular-test.prod para visualizar a versão de produção. Com os domínios personalizados da ServBay e os certificados SSL gratuitos, seu site terá maior segurança e credibilidade.

Seguindo esses passos, você terá criado e executado um projeto Angular com sucesso, utilizando as funcionalidades providas pela ServBay para gerenciar e acessar seu projeto.