{"id":18318916,"url":"https://github.com/suspecie/estudos-angular","last_synced_at":"2026-05-02T23:42:21.100Z","repository":{"id":120188410,"uuid":"126202072","full_name":"suspecie/estudos-angular","owner":"suspecie","description":"Estudos do curso Desenvolvimento Web com ES6, TypeScript e Angular4 da Udemy","archived":false,"fork":false,"pushed_at":"2018-04-04T21:11:40.000Z","size":1910,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T08:16:08.349Z","etag":null,"topics":["angular","angular-cli"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/suspecie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-21T15:41:16.000Z","updated_at":"2018-04-04T21:11:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"fad2df3c-3473-4e55-aa78-c062b99c2cd8","html_url":"https://github.com/suspecie/estudos-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suspecie%2Festudos-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suspecie%2Festudos-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suspecie%2Festudos-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suspecie%2Festudos-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suspecie","download_url":"https://codeload.github.com/suspecie/estudos-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054196,"owners_count":21039952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-cli"],"created_at":"2024-11-05T18:11:56.792Z","updated_at":"2026-05-02T23:42:21.055Z","avatar_url":"https://github.com/suspecie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# estudos-angular\nEstudos do curso Desenvolvimento Web com ES6, TypeScript e Angular4 da Udemy\n\nCurso: Estudos do curso Desenvolvimento Web com ES5, TypeScript e Angular4 da Udemy \n\nCréditos: Jorge Sant Ana https://www.udemy.com/curso-de-desenvolvimento-web-com-es6-typescript-e-angular-4/\n\n## Angular CLI\n - ferramenta de linha de comando que automatiza o processo de criacao.\n - comandos:  https://cli.angular.io/\n - ng new : cria um novo projeto\n    - ``ng new app2 --prefix nomedoprefixo`` ou ``ng new app2 -p nomedoprefixo`` o prefix serve para alterarmos o nome do prefixo padrão no caso do ``\u003capp-nomedocomponente\u003e`` ficará ``\u003cnomedoprefixo-nomedocomponente\u003e``\n    para alterar o prefixo depois é só acessar o arquivo ``angular-cli.json`` e alterar o prefix.\n    Não podmeos esquecer de alterar também onde o nomedoprefixo é utilizado.\n - ng server / ng serve / npm start: gera o build do projeto e vai subir um servidor para que possamos testar nossa aplicação. Este comando deverá ser rodado dentro da pasta do projeto que foi gerado.\n\n## Atualizando Angular CLI\n\n``` npm update -g @angular/cli ```\n\n## Verificando a versão do Angular CLI\n\n``` ng -v ```\n\n## Como resolver alguns problemas\nAlguns problemas no momento do build podem ser resolvidos utilizando alguns métodos.\n\n- Atualizando as dependências: ``` npm install ``` ou ``` yarn install ```\n- Apagando a pasta node_modules e rodando ``` npm install ``` ou ``` yarn install ```\n- Atualizando a verão do Angular CLI\n\n## Estrutura\n- node_modules: o Angular é baseado no node e por isso possui a pasta com estas dependências.\n- package.json: este arquivo contém as informações de comandos de scrips, ou seja alias para execução de comandos que podemos utilizar na nossa aplicação; dependências da aplicação utilizadas dentro da aplicação, ou seja é o que aplicação precisa para funcionar; dependências de desenvolvimento, que nos ajudam na criação da aplicação, é o que estará no ambiente de desenvolvimento.\n- tsconfig.json: arquivo de configuração do TypeScript.\n- angular-cli.json: fundamental para parametrizar as informações básicas do projeto.\n    - \"index\": indicação da index do projeto.\n    - \"main\": indicação do bootstrap.\n    - \"polyfills\": recursos que fornecem suporte a funcionalidades novas em browsers antigos.\n    - \"styles\": estilo global da aplicação.\n    - \"enviroments\": variáveis de ambiente.\n- src: diretorio que irá conter toda a codificação da aplicação.\n- src/assets: onde serão incluidos os arquivos estáticos da aplicação. Imagens, Arquivos Js, Arquivos CSS.\n- src/app: onde serão criados os componentes que serão utilizados na aplicação.\n- app.module.ts: módulo da aplicação.\n- *.component: componentes da aplicação.\n- app.component.ts: são as classes, vai controlar o html.\n- app.component.html: o html.\n- app.component.spec.ts: arquivo de teste.\n- app.component.css: arquivo css do componente.\n- é importante criarmos diretorios para organizar nossos componentes, isso deve ser feito dentro do diretorio app\n- shared: podemos criar uma pasta de compartilhamento para recurso compartilhados. Por exemplo uma classe que vai server como modelo de objetos para aplicação.\nQuando criamos uma classe que vai servir de modelo e nao é um componente utilizamos o *.model.ts\n\n\n## Como tudo funciona\n- quando utilizamos o comando ```ng serve``` ele faz um start no webpack.\n- webpack é responsável a partir de um determinado ponto recuperar todos os arquivos e transforma em bundles(pacotes), fazendo comque a nossa aplicação se transforme em pequenos pacotes, integrando todo o codigo o maximo possível.\nO arquivo inicial é o main.ts é lá que vamos definir o bootstrap da aplicação, ou seja é la que será definido qual o modulo que deverá ser carregado primeiro na nossa aplicação.\n- ao rodar o ```ng serve``` ele forma 5 chuncks (5 pedaços) da nossa aplicação: polyfills, main.bundle.js (todos os componentes da aplicação), styles.blundle.js(todos os estilos), vendor.bundle.js (todas as bibliotecas angular), inline.bundle.js (contém os utilitarios necessários para fazer o bootstrap da aplicação e auxilia nos demais carregamntos da nossa aplicação).\n- Após isso também é \"startado\" um servidor de desenvolvimento, e o que vemos é o arquivo index.html. \n- O index.html não possui nenhuma arquivo js, porém essa injeção é feita em tempo de execução e quem faz essa injecão é o webpack.\n- o Angular é um framework modulado, precisamos de pelo menos um modulo para que a aplicação funcione.\n- o module, contém instruções que irão definir como faremos a criação dos nossos componentes na tela.\n\n## app.component.ts\n- styleUrls: arquivos de estilo do componente.\n- templateUrl: arquivos de template do componente.\n- selector: indica onde o componente deve ser renderizado dentro do index.html .\nInstanciando componente no html\n```selector: 'app-topo' ``` no html ```\u003capp-topo\u003e\u003c/app-topo\u003e```\nInstanciando componente como atributo\n```selector: '[app-topo]' ``` no html ```\u003cdiv app-topo\u003e\u003c/div\u003e```\nInstanciando componente como classe(cuidado com conflitos de nomes de classe css)\n```selector: '.app-topo' ``` no html ```\u003cdiv class=\"app-topo\"\u003e\u003c/div\u003e```\n- template: é um metadado que permite informar um tamplate inline. \nDessa maneira não pode quebrar linha\n``` template: '\u003cp\u003eEsse é o componente TOPO inline!\u003c/p\u003e' ``` \nDessa outra maneira com podemos quebrar linhas para a forma inline\n``` template: `\u003cp\u003e```\n                ``` Esse é o componente TOPO inline!\u003c/p\u003e` ```\n- styles: permite informar através de arrays estilos css\n``` styles: [' .exemplo { color:red }'] ```\nPodendo também quebrar linha\n``` styles: [` ```\n                ```.exemplo { color:red }```\n            ``` `] ```\n\n## Componentes\n- O @Component é chamado de declaration\n- já os parametros, como selector por exemplo são chamados de metadados\n- Quando criamos um componente é muito importante ter um template associado a ele\n- pequenas partes lógicas que podem ser utilizadas dentro da aplicação.\n- serve para controlar uma parte da tela, que chamamos de view.\n- Criando manualmente\n    - criar um diretório para o componente dentro de app\n    - criar dentro desde novo diretorio o *.component.ts e *.component.html\n    - fazer import do Component\n    - definir a classe o nome deve ser nomeComponent \n    - decorar essa classe com instrucoes para dizer ao angular que essa classe é um componente @Component()\n    - para conseguirmos usar o componente dentro do module que é carregado pela aplicação, precisamos importar dentro do app.module esse novo componente.\n    - tb é necessário declarar dentro do app.module o nosso componente\n    - instanciar nosso componente dentro de algum lugar na nossa aplicação\n- Utilizando o angular cli\n    - ``` ng generate component nomedocomponente ``` ou ```ng g c nomedocomponente ```\n    Para que nao seja criado determinado arquivo devemos passar um parametro na hora da geração\n    ``` ng g c nomedocomponente --spec=false ``` nesse caso o arquivo spec n sera criado\n\n    ### Ciclo de vida dos componentes\n        - LifeCycle Hooks são métodos pre-definidos do Angular.\n        - Todos os métodos são executados após a construção do nosso componente, ou seja, logo após o constructor.\n        - Para utilizá-los é necessário importá-los do core do Angular.\n        - Realizar o implements das interfaces.\n        - ngOnChanges(): é disparado logo depois do construtor, podemos capturar as mudanças desse componente antes da inicialização do componente. Esse método é executado sempre que atributos de componentes pais são atualizados. Sempre que existe @Input() dos dados esse método é disparado.\n        - ngOnInit(): temos o componente iniciado e decorado com variaveis inputadas, ou seja antes mesmo do template da aplicação conseguimos trazer dados. O método é executado apenas uma vez quando o componente é iniciado.\n        - ngOnDestroy(): é chamado no momento que um componente deixa de ser utilizado na aplicação.\n\n\n\n## Instalando o Bootstrap, Jquery e Tether\n- http://getbootstrap.com/docs/4.0/getting-started/download/\n- Instalar como dependencia é uma opção boa.\n- feito isso devemos incluir o bootstrap como um style global, para isso temos que ir até o arquiv angular-cli.json e adicionar em \"styles\" o caminho do arquivo bootstrap.\n- o bootstrap também depende do jquery e do tether.\n- O tether é uma biblioteca que facilita o posicionamento de elementos de forma absoluta, um exemplo de uso dele são os sites que apresentam o tutorial através de tooltips.\n- para instalar o jquery e o tether podemos utilizar o `npm instal tether --save`\n\n## Databinding\n- Comunicação entre o HTML(template/view) e a classe(componente) ou também entre componentes.\n- One-Way-Binding: comunicao de mao unica. \n    - Para o Componente se comunicando com o Template podemos utilizar os recursos Property binding e String Interpolation.\n        - String interpolation (bigode bigode rs): ``` {{ data }} ```\n            Faz com que o atributo da classe seja impresso no template.\n            Permite a inclusao de atributos e expressoes em qualquer lugar do nosso template.\n        - Property Binding: ``` [property] = \"data\" ```\n            Faz com que um atributo do HTML tenha seu determinado valor baseado em um atributo da classe.\n            O objetivo dele é afetar atributos e elementos HTML, fazendo com que os valores sejam definidos baseado em variaveis da classe do componente.\n            ``` \u003cimg [src]=\"url_img\"\u003e ```\n            Assim o valor url_img é atributio a propriedade src.\n    - Para capturar eventos do Template e utilizar no componente, utilizamos o Event binding.\n        - Event Binding: ``` (event) = \"expression\" ```\n            Atribuimos no HTML um determinado evento junto com uma expressao que é uma funcao que corresponde com um método da classe do componente.\n            Temos condicoes de recuperar eventos disparados no template e com isso executar métodos da classe do componete. input, click, focus, keyup e etc...\n            O evento input é disparado quando à alguma interacao em um campo de texto.\n            ``(input)=\"atualizaResposta()\"``\n            Já $event ``(input)=\"atualizaResposta($event)\"`` captura o estado do elemento no DOM no momento que o evento é disparado.\n            Quando possuimos um $event como parametro no nosso método temos que receber como parametro do tipo Event.\n- Two-Way-Binding: comunicacao de mao dupla, ou seja se disparar uma ação do template ou do componente ambos vão reagir a esta ação. Ou seja, nos temos uma ação originada do Template HTML que ao evoluir algum atributo da nossa classe impacte novamente no Template.\nExemplo: no this.resposta estamos recebendo o evento do html, se voltarmos para o html fazendo um String interpolation dessa resposta, o HTML vai esta tendo um novo impacto.\n`` this.resposta = ((\u003cHTMLInputElement\u003eresposta.target).value);``\n``\u003cp\u003e {{ resposta }} \u003c/p\u003e``\n\n- @Input: Property binding do pai para filho.\n    - Decorar a variável com @Input()\n    ```  @Input()  public progresso: number = 25;```\n    - Importar o módulo do core do Angular: Input\n    - Dessa forma o meu componente possui uma variável que aceita parametros externos definidos no momento da instancia do componente.\n    - Através do Property Binding, no template do componente pai, vamos definir [filho]=\"pai\" .\n    ``` [progresso]=\"progresso\" ```\n- @Output: Event binding de filho para o pai.\n    - O objeto do filho que contém um atributo do tipo EventEmitter junto com @Output, é retirado do componente filho e encaixado no contexto do componente pai.\n    - Fazer import EventEmitter\n    - Criar variavel instanciando EventEmitter ```public encerrarJogo = new EventEmitter();``\n    - Fazer a variavel emitir um evento de acordo com as regras de negocio, podendo tb passar um parametro para ela.\n    ``this.encerraJogo.emit('vitoria');``\n    - Para fazer esse atributo que emitiu o evento sair do contexto do componente devemos decoralo com @Output, para utiliza-lo também tem que importar do core do Angular.\n    - O proximo passo é fazer um databinding no template do componente pai.\n    ``\u003capp-painel (encerrarJogo)=\"encerrarJogo($event)\"\u003e\u003c/app-painel\u003e``\n\n\n## Diretivas\n- São funcionalidades que manipulam o comportamento de elementos HTML no DOM.\n    - Componentes: diretivas com template.\n    - Estruturais: ngFor, ngIf.... (diretivas que criam estruturas html modificando o template)\n    - Atributos: diretivas aplicadas a atributos de elementos HTML.\n\n    ### Diretivas Estruturais\n    ``\u003ctaghtml *ngFor=\"declararvariavel of array\"/\u003e``\n    Após declararmos a tag html ela sera repetida de acordo com o numero de for.\n    Também é possível acessar os atributos do objeto declarado.\n    ``\u003ctaghtml *ngFor=\"declararvariavel of array\" [src]=\"declararvariavel.exibeCoracao()\" /\u003e``\n\n    #### ngIf\n    - No ngIf também podemos utilizar o recurso de else, ou seja podemos apontar para um determinado template que sera exibido se for false.\n    `` \u003cdiv *ngIf=\"jogoEmAndamento; else referencia\"\u003e``\n    Exemplo:\n    `` \u003cdiv *ngIf=\"jogoEmAndamento; else fimDeJogo\"\u003e``\n    Com base nessa referencia nos criamos uma outra diretiva ng-template, ela funciona como template mas sem um componente.\n    `` \u003cng-template #fimDeJogo\u003e\u003c/ng-template\u003e ``\n\n## Services\n- Sao classes que tem um objetivo de atender alguma necessidade especifica da aplicação.\n- Para não confundir com componente, devemos lembrar que componente faz o databing com o template, sendo assim qualquer coisa diferente disso pode ser definido como um servico.\n- Um exemplo de uso, podemos encapsular uma api de back-end em um serviço.\n- Para criar serviços utilizamos ``*.services.ts``\n- A classe deverá ter a terminação services ``export class OfertasService {}``\n\n    ### Escopo de Injeção\n    - Os serviços pode ser injetados em 3 escopos diferentes.\n    \n    #### Escopo de Módulo\n    - Injetar o serviço no AppModule, e acessar o serviço através de uma instância singleton, ou seja conseguimos acessar o serviço em todos os componentes através da mesma instancia.\n    #### Escopo de Componentes e componentes filhos\n    - Injetamos no componente e tanto o componente quanto os componentes filhos terão acesso ao serviço.\n    - Através do metado provides conseguimos, fazer a injeção do serviço no componente.\n    ``@Component(..., providers: [NomeService])``\n    - No construtor do componente devemos indicar qual será o atributo que irá receber este serviço.\n    \n    #### Escopo de somente componentes\n    - Somente o componente em específico terá acesso aquele serviço.\n\n    ### @Injectable\n    - Os serviços também podem ser injetados em outro serviço para isso é usado a função decoradora @Injectable().\n    - O @Injectable é colocado no serviço que receberá o outro serviço.\n\n\n## Promisses\n- São promessas.\n- é um objeto usado para processamento assíncrono.\n\n## Processos\n\n### Síncrono\n- A continuação de um script só acontecer após a finalização do processo.\n### Assíncrono\n- Não aguarda a finalização do processo para seguir com o script.\n\n\n## Geração de Build \n- Build é um rocesso que é utilizado na construção do produto final.\n    - Desenvolvimento:\n        Dentro da pasta dist terá os chuncks que foram criados.\n        Como o build é de desenvolvimento será possível ainda com este código debugar pois ele ainda é um código legível.\n    - Produção:\n        O timestamp no nome do arquivo da aplicação ajuda a não gerar cache, fazendo com que ao disponibilizar a versão nova, não existam problemas de cache por conta de uma versão antiga ja instalada.\n        Todos os arquivos serão minificados, tudo que é possível sai do código para que o projeto fique muito mais leve.\n\n    ### Como fazer:\n    - Acessar a pasta do aplicativo.\n    - Rodar o comando para gerar o build de desenvolvimento\n    ``ng build `` ou ``ng build --dev``\n    - Rodar o comando para gerar o build de producao\n    ``ng build --prod``\n    - Após a geração é criado um diretório chamado dist, que é o local padrao para onde gera o build de dev ou prod.\n\n## Deploy\n- Deploy é o processo desde o Build até a disponibilização para o usuário.\n\n    ### via http-server - distribuição de forma local para fazer testes\n    - Instalar o pacote via npm `` npm install http-server -g``\n    - Acessar a pasta dist do projeto\n    - Rodar o comando http-serve\n    - Serão gerados dois endereços, um IP externo que poderá ser disponibilizados para quem estiver dentro da mesma rede e um IP local.\n\n    ## via XAMP  - distribuição de forma local para fazer testes\n    - baixar o XAMP\n    - copiar o conteudo da pasta dist\n    - colar dentro da pasta htdocs\n    - para acessar localhost:80\n\n    ## na nuvem com Amazon AWS S3\n    - Pesquisar por S3\n    - Criar um bucket\n    - Informar um nome exemplo: app1-test-publicacao\n    - Somente Avançar\n    - Abrir o bucket e adicionar todos os arquivos da pasta dist dentro do bucket\n    - Ir até a aba properties, e escolher o Static website hosting, ele vai hospedar somente páginas estáticas ou seja que tiver qualquer linguagem que não funcione do lado do servidor.\n    - Informar que quer o bucket se transforme em um website.\n    - Clicar na aba Permissions para configurar as permissões de segurança. (Ver a documntação)\n\n\n## Mock\n- O mock contém instâncias dos objetos baseados na classe modelo.\n\n## Mais dicas\n- Quando declaramos uma variável sem incializá-la automaticamente ela passa a ter o valor undefined.\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuspecie%2Festudos-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuspecie%2Festudos-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuspecie%2Festudos-angular/lists"}