Angular (O Vídeo que Você Precisava para Começar no Framework) // Dicionário do Programador

e contextualizando agora um Framework JavaScript reativo mantido pelo Google utilizado para criação de aplicações web modernas ele é construído utilizando typescripts o arquitetura se dá através de componentes que são pequenos grupos de funcionalidade de isolados Independentes no ângulo um componente é composto geralmente por um arquivo typescript Contendo a classe do componente seus comportamentos e atributos de um arquivo de estilização como CSS ou um pré-processador e um arquivo HTML Contendo a estrutura visual com Curioso em qual é esse frango já descrente funciona quer saber mais então já deixa o seu like pra gente continuar nessa conversa depois da vinheta 1 o Olá você né filho tudo bem com você podemos dizer que a história do angula é um pouco caótica que até hoje e geram dúvidas sobre a diferença entre angula GS e Angola para entendemos o motivo dessa confusão toda vamos precisar entrar na máquina do tempo da história da programação e voltaram um bocadinho um ano era tão 2009 uma época em que uma incrível já quer e ela quem dominar Você larga de freio localizado escrito nesse mesmo período o risco Harry que era Engenheiro do Google trabalhava em um projeto paralelo com a intenção de simplificar o desenvolvimento de aplicações web objetivo principal a permitir o facilitação e a criação de projetos web para pessoas que não tivessem conhecimento profundo sobre o assunto sendo uma das estratégias utilizadas para isso estender os elementos do próprio HTML que no futuro acabou resultando em uma das principais características do ângulo de onde vão seu amigo ah ah Bornes que também trabalhava no projeto decidiram batizar-se o projeto de Angola DS com o nome faz é só os colchetes angulares angular braquetes english que são utilizados no HTML visualmente o óculos vs era utilizado apenas em alguns projetos Paralelos de Ranger ou então que percebendo na prática o quanto o uso de sua criação beneficiava no desenvolvimento de aplicações web ele decidiu tornar o o pen sócio em 2010 o ângulo ads Teve uma grande aceitação logo em seu início não demorando muito para começarmos a ver dezenas de projetos criados e utilizando a recém-lançada a tecnologia Marco importante na popularidade do ângulo DS foi a chegada do aí o nick um freio morto que permite a criação de aplicações mobile utilizando o ângulo DS e outras tecnologias web e depois de 5 anos do seu lançamento em 2015 o angular DS já era utilizado por Grandes Empresas e milhares de desenvolvedores no mundo inteiro seu desenvolvimento era mantido oficialmente pelo Google e já contava com uma equipe própria porém nesse mesmo período a web passava por importantes transformações cirurgia luz JavaScript o famoso é que me tá trazendo novos avanços tecnológicos e padrões de desenvolvimento diante disso a equipe do ângulo DS necessitava buscar estratégias para adequar o frente a esse novo cenário que foi a partir disso que a equipe do Google optou por lançar a versão 2. 0 do ângulo a GS mas o que era para ser uma atualização acabou se tornar um dos períodos mais caóticos pro frango que esse caos se deu pelo fato do ângulo c s tecido completamente reescrito na sua versão 2. 0 o dano totalmente conceitos e práticas utilizadas por anos na versão anterior agora Imaginem a rejeição que esse gerou na comunidade que já era bem grande na época a impossibilidade da portabilidade de aplicações que utilizavam a versão anterior a mudança radical da estrutura EA utilização meio obrigatória do typescript tornar uma nova versão praticamente e um novo freimor causando descontentamento para não falar coisa pior por parte de muitos desenvolvedores que em alguns casos acabaram abandonou a ferramenta Então quem 2016 o Google optou em dividir o foi morto em dois assim então aí o angula a versão llegado a un continuaria a ser desenvolvida e seria chamado pelo seu nome original o ângulo é de esse a versão dois ser eu sou ângulo que inclusive possuem sites e documentações diferentes também atualmente o ângulo ads tá na sua versão 1.

8 e é utilizado na maioria das vezes em grandes projetos legados que foram construídos inicialmente com a versão um do Frango já o ambos ele está atualmente na versão 13 e junto com o yakisoba e esse vídeo é essa e lideram o ranking de frente o outro JS mais utilizados Depois da sua história que conseguimos entender melhor diferença entre ângulo ads e Angola pode entender agora um pouco mais de como funciona esse tal de angula e quais as facilidades que ele trouxe para as nossas vidas e que nós vamos deixar aqui o nosso agradecimento especial A roxa e Heitor a parceira que trouxemos para esse vídeo que sempre nos ajuda a criar conteúdo de qualidade para você além disso ela disponibiliza um desconto especial a estação de qualquer um dos planos para todos que acessarem o link que está aqui na descrição do vídeo de hoje pesagem compartilhada até servidor dedicado na rua cheguei Então você vai encontrar uma solução que vai ser ideal para o seu projeto nada melhor que começar explicando o setup do ângulo aqui é simples e rápido através do ângulo c ai que é o utilitário de linha de comando do ângulo um ângulo A sei lá é uma ferramenta indispensável para quem quer se aventurar no ângulo ele automatizar diversas tarefas cotidianas no ciclo de desenvolvimento do seu projeto como a criação de arquivos como componente serviço diretivas e módulos incorporou incorporamento de colírio bibliotecas configurações da sua aplicação iniciação do servidor de desenvolvimento rotina de testes automatizados e até mesmo depois da sua aplicação nós aqui o seu dfzc de bobos Não temos nada Já percebemos que o ângulo sei lá e é um adianta em nossas vidas além disso a sua instalação é bem simples através de um gerenciador de dependências como o npm we are Eu postei um ângulo C live up and Running um bom português prontinha para usar como apenas um comando peito isso o comando NG estará disponível no seu terminal permitindo o acesso a todas as funcionalidades do ângulo A sei lá uma dica importante também é utilizar o comando MG réu através dele será ainda está doente seja econômicos disponíveis na ferramenta entender as suas funcionalidades se transformará em produtividades no futuro por isso sempre recomendamos dar aquela boa olhar não é agora chegou a hora da gente criar nosso projeto em Angola claro né então vamos lá abrindo o nosso terminal e utilizando o comando NG New cdftv estaremos iniciando a criação de um novo projeto ângulo chamado cdftv assim que executamos o comando o ângulo se lá e não chorar duas perguntas A primeira é se queremos suporte as rotas em nossa aplicação ou seja se teremos diversas url que levaram para páginas diferentes já a segunda é queremos usar algum pré-processador CSS na versão eu não gostei ali que ele aparece suporte a s c s ss Tais leis ou opção de não usar nenhum pré-processador bastão de escolher a opção CSS com muito importante aqui é que você tem Total Liberdade de utilizar um outro pré-processador CSS que não esteja nessa lista nesse caso você terá que fazer a configuração manualmente É completamente possível utilizar o pré-processador que você desejar na rezando essa configuração os arquivos de base da sua aplicação serão gerados e será iniciada a instalação das dependências através do npm logo após esse processo sua aplicação angular-strap pontinha para rodar você sabe o diretório criado pelo ângulo assim ó ai que é o mesmo nome dado ao projeto o nosso caso você DFTV mas utilizar o comando NG Surf que em poucos segundos sua aplicação âmbula já pode ser acessada no navegador através do endereço local host 4. 200 aqui vale um adendo caso angular não consigo utilizar a porta 4. 200 ele escolherá uma outra que vai o seu terminar agora sim Podemos comemorar sua aplicação angular está rodando e esse é o resultado que aparecerá em seu navegador antes de você começar a Pôr a mão na massa ou melhor nem pôr a mão no código vamos entender um pouco mais sobre essa estrutura de arquivos e diretórios que o ângulo A sei lá e acabou de crianças uma aposta raiz no seu projeto foi criado você terá uma estrutura de arquivos e diretórios similar aí vamos dar uma olhada mais a fundo dentro do diretório src que é um local onde fica armazenado o maior parte dos arquivos que você vai criar durante o desenvolvimento da sua aplicação como citamos no início do vídeo o ângulo possui uma arquitetura de componentização ou seja cada funcionalidade é representado por um componente esses componentes ficam localizados no diretório ep dentro do src um sinal dentro dele já existem alguns arquivos F componente ponto HTML ep compôr esse pontos e é ou CSS ou SSS ep ponto componente ponto espere ponto apple.

com. o PS eo web. Model.

py arquivos representam um componente ep que é o componente raiz da sua aplicação é também interessante notarmos a estruturação dos arquivos e isso por sinal é um ponto bastante importante pois sempre que um novo componente for criado será gerado uma estrutura bem similar a essa questão então agora entender o que cada arquivo nessa estrutura representa Vamos começar com um web. Componente ponto HTML ele representa a estrutura visual do nosso componente ou seja o bom e velho HTML porém turbinado com adjetivos do ângulo e podem ficar sossegados que já já vamos falar mais sobre essas diretivas Agora é a vez do bebe. com componentes pontos scss no caso que nós colhemos um ss13 arquivo conterá o código de estilização scss ou pré-processador que você escolheu na etapa de setup do projeto afirma agora para web.

Componente. Spek. cc é se ele é um arquivo typescript que contém as regras de testes para realizar testes uni o famoso tdd por sinal que temos um dicionário do programador explicando detalhadamente sobre tdd e sua importância no arquivo é componentes.

TSE também o arquivo typescript responsável pela lógica de negócio do seu componente ele contém todos os comportamentos e estados as variáveis da sua aplicação que chegando a web. Modo o ponto TS esse arquivo está discutir não faz parte diretamente da estrutura de um componente se tratando de um arquivo de metadados que auxilia na modulação da sua aplicação de forma bem resumida criar um módulo é uma maneira de agropar diversos componentes sempre que criamos um componente através do ângulo as they Lay esse mesmo padrão de estrutura de arquivo será gerado é certo pelo arquivo de modo falando em criação de componente Que tal criarmos o nosso primeiro componente utilizando um ângulo fica lá e podemos criar um componente com um simples comando NG generate component Hello ou sua forma resumida o ngc hello E no caso é o nome do componente além do componente também será gerado o diretório Hello dentro do diretório ep contém uma estrutura de arquivos que acabamos de citar o criando componente o ângulo celular também modifica o arquivo é ponto modo um ponto TS fazer uma importação e declaração desse componente Olha só ali nas linhas 6:11 vim como angular se ela é realmente uma mão na roda sempre que um novo componente foi criado é necessário declará-lo em algum módulo por um ângulo a torná-lo disponível para os demais componentes também declarados nesse mesmo módulo ou seja nesse exemplo o componente raiz ep componente poderá utilizar o Hello combate curiosas que somos vamos dar uma olhada mais a fundo no arquivo Hello. Componente.

TS que acabou de ser criado para entendermos um pouco mais da sua estrutura como a gente já mencionou os arquivos como sufixo componente post é são responsáveis pelas regras de negócio do nosso componente aqui podemos ver que a sua estrutura é bem simples se tratando de uma classe com o nome o que implementa a interface on init nativo no próprio ângulo essa classe eu cheguei decorei tal componente passando um objeto de metadados no índice selector especificamos qual será a tag HTML que usaremos para representar esse componentes do índice templateurl informado o caminho do arquivo que vai conter o conteúdo visual do componente por padrão o próprio HTML que é criado junto com um componente e não entre styleurls Passamos um Array com os caminhos dois arquivos de estilização e também por padrão é utilizado o arquivo criado junto um componente é possível criar arquivos de estilização manualmente e informar seu caminho nesse reino muito importante aqui a estilização das utilizadas são limitadas apenas o arquivo HTML utilizado pelo componente ou seja outro componente não serão afetados pelas regras de utilização da estrutura do componente e temos um método Construtor que geralmente é utilizado para injeção de dependência e um método ng-init que é o método de callback chamado em todas as informações do componente estiver encarregado muito bem já entendemos como criar um componente e como essa estrutura Mas então como é que agente faz para mostrar isso no navegador fazendo uma pequena alteração no Hello componente ponto HTML e aplicando uma estilização bem simples no Hello componente ponto scss vamos dar vendo a nossa criação removendo todo o conteúdo HTML do componente raiz da nossa aplicação web. Componente ponto HTML substituído pelo seletor do nosso componente no caso o PEP Hello Ou seja a tag HTML que representa o nosso componente resultado no laço navegador viu como é que é simples vão entrar no componentes assim como viu iett o ângulo também suporta uma funcionalidade primordial para o reaproveitamento de código que é a passagem de propriedade por este componente aproveitando o nosso exemplo anterior para passarmos uma propriedade para o componente que criamos basta utilizar a estrutura de nome do atributo entre colchetes final é "e Vale do nosso exemplo vamos passar o atributo name para dentro do nosso componente passando diretamente Mustang Por isso as" simples recuperarmos esse valor não componente será necessário algumas modificações é necessário importar o decorator input utilizá-lo no atributo da classe que vai armazenar esse valor podemos atribuir um valor padrão caso nenhum seja passado como no exemplo o valor padrão de nem será CDF finalizando vamos também modificar o HTML do nosso componente para utilizar essa nossa variável Preto relações Agora sim podemos ver o resultado quando o assunto é interação do usuário o ângulo fornece uma sim taxi taxi simples como é que fala Vanessa 60 simples para mapear os eventos utilizando o padrão nome do evento entre parentes sinal de igual e assinatura do método callback entre aspas é possível atrelar comportamentos aí vem pode ficamos Nossa exemplo para executar mais uma ação ao clicar no texto e bastou criar o metro e no nosso componente para conseguirmos o comportamento desejar um ângulo é um Framework reativo ou seja ele atualiza a parte visual por um detecta mudanças de estados através de 15 e componentes de computador podemos ver essa reatividade em essa vamos criar o nosso componente através do comando ngc country em seguida criar dois métodos um incremento e o depoimento além da variável caught tudo isso dentro do country. com por response.

css vamos também não criar um HTML bem simples para mostrar o valor atual do contador e dois botões ou para aumentar que o outro para diminuir o valor do computador depois de adicionar o componente no Epson tonner fonte HTML podemos agora clicar em qualquer um dos dois botões e o valor do computador é atualizado no mesmo momento sem precisar de muito esforço como parte do seu Arsenal o ângulo possui diversos diretivas que são atributos especiais utilizados dentro das tags HTML essas diretivas adiciona um comportamento os extras as tags que são utilizadas a esconder ou mostrar elementos sobre uma condição específica E terá de repetir elementos a partir de uma Rei modificar um atributo do elemento E por aí vai diretiva n g fora é uma das mais usadas ela permite literária uma lista de itens repetindo elemento no qual ela é usado o resultado será uma lista de item outras diretivas sempre presente na vida dos desenvolvedores angula é o ng-if que mostra ou esconde um elemento a partir de uma posição a função dessa diretiva com a reatividade do angular a torna de extrema utilidade pois permite que elementos apareceram uns uma conforme o estado da condição é alterado trecho de código o elemento H1 irá aparecer sempre que a variável fiz vezes tiveram valor true irá permanecer escondido caso ao contrário existem também chamados de diretivas de estrutura as diretivas de atributo comum and Classic adiciona ou remove Class ISS EA energia Style que adiciona ou remove estilos html no primeiro exemplo caso a variável fiz Red seja verdadeira e vai receber a classe Red caso contrário receberá a classe Uai já no segundo exemplo estamos condicionando o valor do background-color caso a variável slide por verdadeiro background-color vai ser receber Cred caso contrário quais embora com uma história com alguns tropeços inegável que o ângulo de esc deixou um grande legado que vem sendo continuado muito bem pelo angula o tamanho da sua comunidade e milhares de projetos que os utilizam não nos deixes mentira um ângulo a continuar sendo uma excelente escolha para os desenvolvedores que buscam ferramentas modernas para criação de aplicações Além disso o mercado de trabalho está sempre em busca de profissionais que tenham conhecimento desse frango que esse vídeo possa servir de porta de entrada para esse frio porque incrível o que tenha deixado mais claro alguns dos conceitos para os que já utilizaram ficam com gostinho de quero mais Então é só pedir mais vídeos sobre angular aqui nos comentários que a gente faz Quem sabe em um bom no código mostrar o mais avançado Se gostou deixa aquele tapa no like a gente gosta desse tapa e a gente se vê nos próximos vídeos eu tchau gente daqui a mesa tchau tchau tchau tchau me falando de frio que tava escrito e principalmente reatividade se você ainda não conhece bem o conceito de que é programação reativa eu sugiro fortemente você assistir esse vídeo aqui do dicionário do programador essa é uma boa porta de entrada para ir mais a fundo na reatividade Claro que não podemos impedir vocês em outros vídeos do dicionário Onde abordamos por exemplo Direction view.