nesse vídeo eu vou te mostrar algumas diferenças entre um projeto standalone e no standalone do angular a partir da versão 17 do angular foi implementado um novo padrão de projeto que é um projeto standalone por padrão todo novo projeto que você gerar no cli com o comando NG New ele já vai gerar um projeto standalone Isso significa que o projeto Ele não vai vir com APP modules como vi anteriormente então aqui eu tô num projeto standalone e ele não tem o arquivo app modules e comparando com o projeto no standalone Aí sim esse projeto possui
o app modules bom então Vamos por partes eu vou começar com a diferença dos componentes bom eu tô aqui com dois projetos esse projeto é um projeto no standalone e esse outro projeto é um projeto standalone são projetos iguais o que muda é somente a estrutura tanto é que esse eu executar os dois vocês não vão ver diferença nenhuma nas funcionalidades e também nas telas e o desenvolvimento desses dois projetos está no meu curso de desenvolvimento web em ângul do zero a publicação vou deixar o link aqui no comentário e também na descrição bom vamos
começar pelos componentes como que os componentes são criados num projeto no standalone Vamos começar com o projeto no standalone depois eu vou mostrar para vocês no projeto standalone então todo componente criado vou pegar aqui um exemplo de login Então eu tenho aqui uma pasta chamado pages que são os componentes que representam páginas da minha aplicação Então eu tenho aqui o componente de login que é a minha página de login eu vou entrar no typescript dela e percebam que eu tenho aqui nas definições do componente três atributos eu tenho o selector o template URL e o
Style RL onde o selector é o nome da minha tag Quando eu fizer a referência em um outro componente que aqui no caso é o app login Eu tenho um template url que é a referência do HTML e aqui Style URL a referência do CSS são esses dois arquivos quando eu crio um componente através do cli em um projeto no standalone automaticamente ele gera esses três arquivos e faz um update ou seja ele faz uma inserção aqui no app modules a referência desse novo componente aqui em declarations isso porque pro meu componente funcionar eu preciso
dessa referência aqui em declarations agora vamos olhar um projeto standalone Como que funciona esse mesmo componente então eu vou vir aqui em pages vou aqui na página de login e em typescript perceba que eu tenho aqui dois atributos novos então além Window selector template URL e Style url que também estão presentes ali no projeto no standalone eu tenho esses dois novos atributos o standalone que indica que o meu componente é um componente standalone ou seja um componente independente Eu não tenho dependência externa não preciso referenciar ele em lugar nenhum para ele funcionar no meu projeto
eu tenho aqui os imports que são os módulos que ele depende para poder funcionar então perceba que o Import é diretamente no componente nesse caso aqui o login Eu tenho dois imports o reactive form modules e o como modules então tudo que o seu componente precisa para funcionar seja uma biblioteca de terceiro ou uma biblioteca Nativa do angula você tem que fazer o Import aqui em imports bom o curso de desenvolvimento web do zero a publicação ele tá com 20% de desconto por tempo limitado então eu recomendo que você acesse o link que tá aqui
na descrição para garantir o seu desconto então eu te espero lá então se eu comparar aqui com outro componente por exemplo livros vou vir aqui no typescript perceba que livros ele utiliza muito mais módulos né bibliotecas do que a minha página de login Então vamos fazer aqui uma comparação aqui em login um módulo comum entre os dois é o com modules Então eu tenho aqui em login e eu tenho também aqui em livro Por que eu utilizo como moduls nos dois porque ambos estão utilizando se eu vir aqui no HTML o ngif ou também o
ng4 então para eu utilizar o ngif ng4 eu preciso do módulo como modules porque o ngif ngf essas funcionalidades eles vêm aqui do com modules né então se eu vir aqui em livro Eu também utilizo Em algum momento algum ngif Olha só se eu vir aqui em livro eu tenho também o pagination module pagination module ele vem aqui da biblioteca do ngx Bootstrap ele serve para que eu possa utilizar aqui o componente de pagination tanto é que se eu vir aqui em livro e apagar essa referência aqui do pagination module vou apagar ele aqui vou
salvar perceba que ele já me informa aqui um erro aqui do componente né de página Nation é uma biblioteca para criar paginações aí no frontend Então eu preciso dessa biblioteca já aqui no login eu não preciso então ele não vai reclamar agora num projeto no standalone eu preciso fazer as referências desses módulos tudo aqui no meu App mod Independente se um componente específico tiver ou não utilizando você tem que fazer a importação de todos os módulos que você utilizar no seu projeto então a importação não é individual a importação é geral todo o seu projeto
por mais que eu não esteja importando diretamente aqui mas eu eu criei um shared module só para para ficar mais organizado o projeto mas eu poderia muito bem fazer esses mesmos imports que estão aqui no meu shared module diretamente aqui no meu App module né então só foi algo assim para organizar mesmo então percebam que o pagination modle eu importei aqui então todos os meus componentes em um projeto no standalone eles vão conseguir utilizar aquele componente pinjo mas no projeto standalone eu não preciso fazer uma importação geral Até porque eu não tenho o app modle
O que eu preciso fazer é fazer as importações especificamente no componente que eu vou utilizar algum recurso né no caso ali um exemplo do pagination modu beleza pessoal então só uma curiosidade também esse com modules eu poderia apagar ele e utilizar a nova sintase a partir do angular 17 né que é a sintaxe do @if @for ao invés de utilizar o ngif ngfor mas nesse projeto especificamente eu preferi utilizar o ngif bom existem outras diferenças né Existem algumas diferenças de por exemplo como você pode referenciar o interceptor porque o interceptor se você olhar aqui no
projeto no standalone ele são referenciados aqui no app modules tá vendo ó Então eu tenho aqui os provedores né e dentre outros detalhes de diferenças entre projeto standalone e no standalone se você quer saber mais sobre essas diferenças tem o meu curso eu deixei aqui na descrição do vídeo e também fixado nos comentários o link que é onde eu mostro o desenvolvimento desses dois projetos eu começo com o projeto no standalone e depois mais para frente eu faço a migração eu crio um projeto standalone e vou fazendo uma migração do zero do projeto no standalone
para um projeto standalone por isso que os dois projetos eles são iguais se você Executar a mesma coisa só muda a estrutura do meu projeto Beleza então Só lembrando link aqui na descrição bom pra gente finalizar esse vídeo eu vou mostrar mais uma diferença né que é bem visível quando você criar o projeto que são as rotas né onde você define as rotas bom então aqui no projeto no standalone as rotas são definidas aqui no app routing Model já no projeto standalone o que mudou foi o nome do arquivo então se eu viro aqui ó
eu tenho o app.ts que a estrutura é a mesma coisa tá o o objeto que define as rotas não mudou em nada né são os mesmos atributos tem algumas diferenças mas para você fazer a migração não muda nada você pode seguir a mesma estrutura no projeto novo standalone inclusive até comentei aqui o can activate né que são os guards porque isso eu vou continuar né fazendo essa implementação dos guards lá no meu curso bom pessoal então vou ficando por aqui deixa aí o seu like se inscreva aqui no canal para receber mais vídeos com esse
sobre tecnologia e programação não se esqueça link aqui do curso na descrição do vídeo e também fixado nos comentários Aproveite esse desconto que é por tempo limitado que é o desconto da black friday desse ano então vou ficando por aqui falou até o próximo vídeo eu vou deixar para vocês aí agora um trecho de eu explicando de como funciona o curso né onde eu falo sobre os módulos então fique aí com o vídeo Bom começando pelo projeto prático que é o de empréstimo de livros aqui você vai ter mais de 60 aulas onde eu mostro
o desenvolvimento desse sistema completo para você cadastrar os livros cadastrar clientes possibilitar os empréstimos de livros para os clientes e muito mais eu vou deixar um trecho da demonstração desse sistema agora para vocês bom então Aqui vai um spoiler do sistema que você vai aprender durante esse curso eu vou fazer o login aqui essa daqui uma aplicação em ângul ela tá consumindo uma API de empréstimo de livros vou fazer o login aqui na minha conta vou digitar o meu e-mail a minha senha vou fazer o login essa página inicial é o meu dashboard onde ele
indica o número de clientes cadastrados número de livros e o número de empréstimos feitos Então eu tenho aqui a aba de clientes onde eu tenho a lista de clientes eu tenho a lista de livros cadastrados eu posso filtrar por esses livros eu também tenho aba de empréstimos Onde eu posso consultar os empréstimos também posso criar novos empréstimos que eu posso colocar aqui um cliente né posso filtrar vou pesquisar aqui pelo cliente João vou adicionar ele no empréstimo vou pesquisar um livro eu cadastre um livro de teste defino aqui uma data de entrega pro João também
tenho aba de usuários Onde eu posso cadastrar novos usuários para o sistema você pode definir usuários como administrador não administrador nesse sistema também eu apliquei paginação algo que você vai aprender durante esse curso e muito mais ao finalizar o projeto prático você já pode partir paraa publicação no projeto prático que é onde eu mostro como você pode fazer o Deploy do seu projeto utilizando os serviços da aws então aqui você vai aprender também um pouco de Linux porque eu utilizo um serviço sc2 da WS que você vai aprender a Gerar a Build do projeto você
também vai poder migrar o projeto para um banco de dados postgres configurar também aqui os serviços da WS depois que você publicar o projeto você pode partir pro projeto standalone que é uma novidade aí do angular 17 e que também está presente nas versões posteriores né na versão 18 no primeiro módulo eu crio um projeto no standalone que é como muitos estão acostumados porque esse padrão de projeto ele está presente já por muito tempo a partir da versão 17 esse padrão mudou então ao acessar o módulo de projeto standalone você vai conferir as principais as
diferenças migrando um projeto no standalone para um projeto standalone
