Segue um breve RESUMO montado segundo o módulo Introdução ao Angular 8, espero que ajude no esclarecimento de dúvidas. Até logo!
O angular CLI serve para agilizar o gerenciamento da aplicação, pode ser usado para criar o projeto, configurar componentes, configurar rodas e criar guards.
Características:
· Muito útil na produtividade
· Ajuda a diminuir a aplicação uma vez que só importamos os módulos que vamos utiilizar
----------------------------------------------------------------------------------------------------------------
Package.json: Contém todas as dependências da aplicação, à medida que instalar uma nova dependência, ela vai aparecer no arquivo.
Na parte de scripts pode-se definir como vai ser a inicialização e como adicionar mais recursos.
O arquivo angular.json contém as configurações globais da aplicação, também define o arquivo que vai iniciar a aplicação, fazendo o SPA.
Assets contem a parte estática da aplicação, ou seja, imagens ou qualquer outro arquivo estático ou inerente a aplcicação.
Em styles se define os estilos globais ou que seja propagado para todos os componentes. Da mesma forma funciona para scripts.
O index é a página da aplicação, o angular usa o SPA – Single Page Application, nesse padrão toda a aplicação está envelopada em uma única página e pode haver uma série de componentes que serão agrupados de maneira direta ou indireta dentro de um componente. O index define a página base da aplicação.
Main faz o bootstrap da aplicação, como se fosse um ‘hook’, ‘gancho’ para chamar alguma propriedade de inicialização da nossa aplicação dentro do angular.json. Parecido com o método main em java.
Espera receber um módulo raíz da aplicação, chama o AppModule que se encontra dentro da pasta App.
A pasta node_modules contém todas as dependências da nossa aplicação.
Qualquer estilo que é adicionado a um componente não foge para o outro. Se quiser compartilhar esse CSS com outros componentes pode adicionar novos CSS globais ou fazer configurações no angular.json para adicionar novas folhas de estilo para a nossa aplicação
app.module.ts é lido dentro do main.ts e é a partir dele que vai ser feita a leitura do componente pai.
O componente pai é responsável por envelopar todos os componentes que serão criados, esse componente é lido em index,html. Os html’s que forem sendo criados serão adicionados ao html raíz através do <app-root> que faz referência ao componente pai.
ng serve: carrega todo o search no main.ts e todos os componentes adicionais fazendo referência no módulo raiz, para testar vamos na porta 4200 em localhost no navegador, pois o angular CLI usa essa porta como padrão.
Por padrão o angular sempre vai ter um módulo raiz que engloba todos os outros módulos.
Módulo é um limitador de contexto, onde todos os outros módulos dentro dele são limitados por esse contexto.
Uma casa seria um módulo raiz, os cômodos seriam módulos dentro desse raíz e os objetos dentro de um quarto os componentes.
Os componentes são aquilo que é visual no módulo - Ex: Módulo que representa compra, produtos e login.
O selector gera uma tag que pode ser usada em qualquer lugar. Ex: <app-course-manager><-app-course-manager>
Interpolação: É quando se quer exibir o valor de uma propriedade do componente do template do componente.
Um template no angular tem todos os recursos html assim como outros templates, nesse caso a interpolação é um deles.
Ø appmodule.ts
Ø app.componente.html
One-way-databind: Entre colchetes, só vai exibir, não atualiza o valor da propriedade.
Two-way-databind: Entre colchetes e parenteses. Quando altera o valor da propriedade, ele vai atualizar em todos os lugares que estiver usando o component e alterar o valor.
/* react: O retorno de uma função retorna um html (Fortalece o Javascript)
angular: Fortalece o HTML. */
ngModel: Atribui a relação de um input com um componente.
Toda vez que criar um componente, tem que declarar no módulo que corresponde ao mesmo
OnInit - Assim que o componente inicializar, chama um métódo de hook e podemos fazer uma alteração na sua inicialização. Método ngOnInit();
OnChange - Assim que o valor for alterado, o valor será passado para o componente, pois a informação pode ser assíncrona, já que usaremos uma requisição HTTP. Método ngOnChanges()
Willams Sousa
15/01/2021 14:54