ANGULAR PARA INICIANTES - PRIMEIROS PASSOS

o angular é um Framework JavaScript mantido pelo Google bastante utilizado no desenvolvimento e criação de aplicações web modernas e você vai ouvir falar muito que ele é reativo ou seja ele atualiza automaticamente a interface do usuário sempre que tenha alguma mudança ali no projeto o angular é composto por types script e toda sua arquitetura é baseada em Componentes cada qual com suas funcionalidades totalmente independentes e nesse vídeo mais do que só falar as vantagens e os benefícios a gente vai colocar a mão na massa vamos configurar o nosso ambiente de desenvolvimento instalar os recursos para isso e vamos criar o nosso primeiro projeto em angular só com esse exemplo aqui você já vai ter um gostinho do que é o angler e ver se ele realmente vale a pena para você Bora lá fala Turma beleza antes de mais nada eu preciso continuar explicando aqui sobre a composição de um projeto no angular como eu já disse na introdução desse vídeo o angular tem toda a sua estrutura baseada em Componentes e cada um desses componentes são totalmente independentes e os componentes no angular são compostos geralmente por um arquivo typescript dentro desse arquivo em typescript está a classe do componente dentro dessa classe existem informações importantes para o funcionamento desse componente como o comportamento dele e os atributos desse componente para não ficar algo Tosco um componente também precisa de um arquivo de estilização como o CSS ou um pré-processador e um arquivo HTML responsável aí pela estrutura visual desse componente Mas calma que vamos mostrar isso na prática durante esse vídeo para ficar mais mais claro antes de começar a trabalhar com o angular a gente precisa configurar o ambiente de desenvolvimento ou o setup angular para isso existe um recurso ou uma ferramenta muito bacana responsável por auxiliar a gente na hora de configurar todo o nosso ambiente essa ferramenta é o angular c o angular C ou cli é muito importante porque ele automatiza e facilita várias atividades rotineiras quando a gente tá trabalhando em um projeto com o angular Caline a gente consegue criar arquivos como os componentes que eu já comentei com vocês como as diretivas serviços e módulos que eu vou trazer um vídeo mais detalhado sobre isso mas com o angular ci você pode trabalhar com incorporamento de plugins e bibliotecas configuração da sua aplicação quando a gente for trabalhar com servidores de desenvolvimento é com o angular C que a gente vai iniciar o nosso servidor na hora de testar e fazer o Deploy da nossa aplicação é com esse angl clr que a gente vai fazer tudo isso então você já percebeu que o angular c é sim muito importante e é por isso que a primeira coisa que a gente precisa fazer é instalar ele no nosso computador a instalação é bem simples e a gente vai fazer essa instalação utilizando um gerenciador de dependência como o npm ou o yarn para isso é só você abrir o terminal aí do seu sistema operacional no modo administrador e digitar o seguinte comando npm install menos G para poder ser feita a instalação de maneira global no seu sistema @angular barcial e dar no enter após a conclusão da instalação Eu recomendo muito que você crie o hábito de utilizar aí sempre que possível o comando NG help que vai listar todos os comandos mais importantes paraa sua produtividade procure entender esses comandos para facilitar os seus futuros projetos Beleza agora é a hora da gente criar o nosso primeiro projeto no angular e para fazer isso é só abrirmos o terminal do nosso sistema operacional e utilizarmos o seguinte comando NG New aratec BR e esse comando basicamente está dizendo que estamos criando um novo projeto com o nome aratec BR logo em seguida o angular cli vai perguntar pra gente se desejamos ter suporte em rotas na nossa aplicação e se significa dizer se o nosso aplicativo ou o nosso projeto vai ter diversas urls que irão levar para diferentes páginas na web nesse exemplo aqui Vamos definir como n ou no e dar enter em seguida o angular ci vai perguntar pra gente se queremos utilizar algum pré-processador CSS Nessa versão atual do angular C ele nos dá as seguintes opções o scss o sas o les ou ainda você tem a opção de não utilizar nenhum desses pré processadores e escolher aí a opção de CSS melhor para você após essa etapa o npm vai criar gerar e instalar todas as dependências e arquivos necessários do nosso projeto só após essa etapa o nosso projeto vai estar funcional agora pelo terminal é só acessar o diretório que foi criado pelo angular Caline que está com o mesmo nome dado ao nosso projeto que no nosso caso foi aratech BR agora para poder rodar o nosso projeto a gente vai precisar utilizar o comando NG serve vai ser gerado um endereço pra gente acessar a nossa aplicação esse endereço geralmente é local host 2. 4200 se por acaso essa porta 4200 não estiver disponível o angol Vai disponibilizar uma outra porta Agora é só pegar esse endereço e colocar no seu navegador e pronto você verá essa tela indicando que o nosso projeto está configurado corretamente bom vamos falar um pouco aí sobre a estrutura de arquivos que compõe um projeto angular nesse meu exemplo eu estou utilizando a ide visual Studio para poder acessar os arquivos que estão no diretório e os arquivos do meu projeto se você não tem o visual Studio instalado Eu recomendo muito que faça a instalação dele agora mesmo nesse passo a passo que eu vou te mostrar Acesse o site code. visualstudio.

com e baixa a versão que o site Já identificou como compatível com o seu sistema operacional após terminar de baixar o visual Studio vamos fazer a instalação dele é bem simples vamos clicar em aceito na próxima tela vamos desmarcar todas as caixinhas e deixar selecionado somente a caixinha de criar um atalho na área de trabalho agora é só clicar em próximo instalar e pronto eu não vou clicar em instalar aqui porque eu já fiz a instalação do visual Studio no meu sistema operacional agora Sempre que você quiser acessar um diretório de arquivos no seu projeto você simplesmente pode navegar até a pasta do seu projeto clicar com o botão direito e logo em seguida em Abrir terminal se você estiver utilizando Windows 11 como no meu caso você vai ter que clicar com botão direito depois em mostrar mais opções e aí sim clicar em abrir no terminal com o terminal aberto e agora com visual Studio instalado no seu computador Você pode abrir todos os diretórios contendo os arquivos do seu projeto diretamente no visual Studio digitando o comando code ponto dessa maneira o visual Studio vai ser iniciado e você terá acesso aos arquivos da mesma maneira que eu tô vendo aqui no meu computador no diretório raíz do nosso projeto você vai ver uma estrutura de arquivos parecida com essa aí dentro da pasta src é onde vai ficar armazenado a maioria dos nossos arquivos utilizados durante o desenvolvimento do nosso projeto esse diretório tem alguns arquivos e pastas muito importante como os componentes mencionados no começo desse vídeo o angular é focado em Componentes e esses componentes ficam agrupados dentro da pasta app que fica dentro da pasta src inclusive dentro dessa pasta src já existem alguns arquivos muito importantes para a criação do componente raiz da nossa aplicação que é o componente app esses arquivos são o app. component. css que é responsável pela estilização do nosso componente de acordo com o pré-processador que a gente escolheu o app.

component. ts do nosso componente quem já conhece o HTML já deve ter entendido essa Associação Só que nesse caso estamos estamos falando de um HTML mais poderoso só que com as características e diretivas do angular temos também um app. component.

spec. ts que nada mais é do que um arquivo typescript que contém as regras de testes pra gente realizar testes unitário ou como geralmente é chamado tdd test driving development e por último temos aí um outro arquivo typescript app. component.

ts responsável pela lógica de negócio do nosso componente Isso inclui os comportamentos e os estados variáveis da nossa aplicação essa estrutura de arquivos sempre vai ser bastante semelhante quando a gente for criar novos componentes viu agora só uma observação muito importante sobre essa estrutura de arquivos em alguns vídeos ou cursos por aí você vai ver que nessa estrutura de arquivos existe mais um arquivo o app. module. ts mas na versão do angular 17 ele usa a nova api standalone por padrão explicando em detalhes agora os componentes são independentes e não precisam mais de módulos para funcionar Lembrando que a ideia do angular é sempre seguir o padrão padrão determinado pela equipe do próprio angular a justificativa da equipe é que isso reduz o código e simplifica o desenvolvimento Mas se for o caso de você querer utilizar módulos no seu projeto na hora que você for criar um novo projeto é só utilizar o comando NG New aratec traça o traço no traço standalone então agora vamos utilizar aí o angular calire para poder criar o nosso primeiro componente Bora lá lá no nosso terminal vamos utilizar o NG generate component test ou uma forma resumida desse comando que é o NG GC teste o teste é o nome que vamos dar ao nosso componente agora vamos dar uma olhada no componente teste.

componente. ts para ver de perto o que realmente tem dentro desse arquivo e entender como tudo tá organizado e o porquê de cada coisa por ser um componente responsável pela regra de negócio do nosso componente ele possui uma estrutura bem simples já de cara vemos que ela é uma classe com o nome do componente no índice selector fica o nome da tag HTML que a gente vai utilizar para representar esse componente no índice Stand Alone está é definido como true justamente por causa dessa versão do angular como eu já expliquei anteriormente temos o índice Import que serve para importar outros módulos ou bibliotecas que o componente precisa usar de acordo com a necessidade do projeto o índice template. rar o caminho do arquivo que irá conter a parte visual do componente daí ele deixa ali por padrão o próprio HTML que foi criado junto com o componente no índice Style urls é definido onde está os arquivos de estilização também criado junto com o componente por padrão e por fim temos o módulo Export Class test component que serve para definir uma classe que representa um componente do angular e exportá-lo para que possa ser usada em outros módulos ou arquivos agora vamos modificar o nosso componente para poder mostrar ele no nosso navegador para isso a gente vai fazer uma alteração no teste.

component. on HTML e já aproveitando para aplicar uma estilização simples no arquivo teste. component.

css para poder jogar esse componente na tela pro usuário a gente precisa primeiro remover todo o conteúdo html do componente raiz da nossa aplicação que nesse caso é o app. component. ts tituir todo esse código pelo seletor do nosso componente que nesse caso é o test traço app desse jeito como eu estou mostrando agora atenção se aparece uma mensagem de erro é bem fácil de resolver é só você posicionar o seu cursor em cima do comando que está aparecendo esse erro e ele vai dizer qual é o erro e o que você precisa fazer para resolver no visual Studio você pode resolver a maioria dos erros utilizando um atalho quando aparecer essas mensagens com as dicas do que fazer é só você pressionar a tecla control mais que ele vai fazer o que tiver que ser feito e pronto mas é muito importante você identificar o que gerou esse erro até como uma maneira de aprender com ele se apareceu algum erro para você comente aqui abaixo pra gente poder te ajudar Beleza agora eu vou procurar o terminal aqui no meu próprio visual Studio e digitar o comando NG server e pronto agora você vai ver no seu navegador a modificação que a gente fez nesse componente uma das características muito atrativas do angular é que ele é um Framework reativo isso significa fica que toda modificação que você fizer no seu projeto ele vai utilizar o angular calai para ir fazendo essas atualizações automaticamente em tempo real e esse é um tópico que eu vou abordar com vocês na próxima aula aqui em no aratec Brasil a gente tá focando demais em trazer cada vez mais projetos práticos para vocês verem cada vez mais como é a rotina de um desenvolvedor Digamos que daqui paraa frente poderíamos Chamar esse canal de aratec Brasil 2.