{"id":13406829,"url":"https://github.com/loiane/curso-angular","last_synced_at":"2025-04-14T09:02:55.055Z","repository":{"id":38519971,"uuid":"62465743","full_name":"loiane/curso-angular","owner":"loiane","description":":mortar_board: [PT-BR] Curso de Angular gratuito - loiane.training [EN] Source code of my free Angular training.","archived":false,"fork":false,"pushed_at":"2024-02-27T19:35:12.000Z","size":1209,"stargazers_count":1946,"open_issues_count":0,"forks_count":713,"subscribers_count":144,"default_branch":"master","last_synced_at":"2025-04-07T02:11:12.309Z","etag":null,"topics":["angular","angular-cli","angular10","angular9","angularv10","angularv9","curso","cursoangular"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G","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/loiane.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":"2016-07-02T18:58:48.000Z","updated_at":"2025-04-06T01:43:52.000Z","dependencies_parsed_at":"2023-02-05T17:30:29.480Z","dependency_job_id":"8347c836-227d-4421-9208-54875d0b3d9e","html_url":"https://github.com/loiane/curso-angular","commit_stats":{"total_commits":427,"total_committers":8,"mean_commits":53.375,"dds":0.05386416861826693,"last_synced_commit":"8689d26254d7bd6157f831f74df88b2f3a55cacc"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loiane%2Fcurso-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loiane%2Fcurso-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loiane%2Fcurso-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loiane%2Fcurso-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loiane","download_url":"https://codeload.github.com/loiane/curso-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852131,"owners_count":21171840,"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","angular10","angular9","angularv10","angularv9","curso","cursoangular"],"created_at":"2024-07-30T19:02:40.382Z","updated_at":"2025-04-14T09:02:55.018Z","avatar_url":"https://github.com/loiane.png","language":"TypeScript","readme":"Curso Angular Gratuito\n=================\n\n[![Open in Visual Studio Codespaces](https://img.shields.io/endpoint?style=social\u0026url=https%3A%2F%2Faka.ms%2Fvso-badge)](https://online.visualstudio.com/environments/new?name=Curso%20Angular\u0026repo=loiane/curso-angular)\n\nCódigo fonte apresentado no curso de Angular gratuito do blog loiane.com - loiane.training\n\n**Código atualizado para Angular v10**\n\n### Link do curso com certificado:\n* [http://loiane.training/curso/angular/](http://loiane.training/curso/angular/)\n\n### Playlist Youtube\n* [Clique aqui para assistir a todos os vídeos já publicados](https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G)\n\n### Editor e plugins\n\nParticularmente recomendo o uso do Visual Studio Code como editor - que é o mesmo usado nas aulas.\n\nPara pacote de plugins, instale esse pacote de extensões VSCode que contém todos os plugins mostrados durante as aulas do curso: [https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack](https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack).\n\n### ✏️ Lista das aulas CRUD Angular + Spring\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eMódulo 1: Introdução\u003c/b\u003e\u003c/summary\u003e\n\n- Introdução e Criação do Projeto - 23/Ago\n- Overview do Projeto e Instalando o Angular Material - 30/Ago\n- Criando uma Toolbar - 06/Set\n- Criando o Módulo de Cursos e Usando Roteamento com Lazy Loading - 13/Set\n- Customizando o Tema do Angular Material - 20/Set\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eMódulo 2: Lista de Cursos\u003c/b\u003e\u003c/summary\u003e\n\n- Lista de Cursos com Material Table - 27/Set\n- Melhorando o CSS e Criação do Módulo do Angular Material - 04/Out\n- Criando Cursos Service - 11/Out\n- Cursos Service: HTTP GET  - 18/Out\n- Lista de Cursos: Spinner (Carregando) - 25/Out\n- Lista de Cursos: Tratamento de Erros - 01/Nov\n- Criando Popup para Mensagem de Erros - 08/Nov\n- Criando Pipe para Categoria do Curso - 15/Nov\n\u003c/details\u003e\n\n### Lista das aulas Curso Angular\n\nAulas publicadas/programadas\n\n#### Introdução\n* 01: Introdução + Arquitetura\n* 02: Ambiente de desenvolvimento\n* 03: Primeira app (Hello World)\n* 04: Introdução ao Typescript para Angular\n* 05: Módulos (ngModule)\n* 06: Templates\n* 07: Serviços (Services) e Injeção de dependência (DI)\n* 08: Dica de produtividade: code snippets\n\n#### Data binding e eventos\n* 09: Property binding + Interpolation\n* 10: Class e Style binding\n* 11: Event binding\n* 12: Two-way data binding\n* 13: Input properties\n* 14: Output properties\n* 15: Ciclo de vida (life-cycle) do Componente\n* 16: Acesso à variáveis locais do Template com ViewChild\n* Extra: Atualizações do RC 5 e ngModule\n\n#### Angular CLI: Introdução\n* 17: Angular CLI: Instalação e criação de projetos: ng new e ng serve\n* 18: Angular CLI: Criando components, services: ng generate\n* Extra: Angular CLI: atualizando para versão RC5 (webpack)\n* 19: Angular CLI: Usando pré-processadores (Sass, Less, Stylus)\n* 20: Angular CLI: ng lint, ng test, ng e2e\n* 21: Angular CLI: Estrutura do projeto\n* 22: Angular CLI: Fazendo build\n* 23: Angular CLI: instalando bibliotecas (bootstrap, materialize, lodash, jquery, etc)\n\n#### Diretivas\n* 24: Introdução e tipos de diretivas no Angular 2\n* 25: ngIf\n* 26: ngSwitch\n* 27: ngFor\n* 28: sobre o asterisco\n* 29: ngClass\n* 10: ngStyle\n* 31: operador elvis\n* 32: ng-content\n* 33: Criando uma diretiva de atributo\n* 34: HostListener e HostBinding\n* 35: Property Binding de Diretivas\n* 36: Criando uma diretiva de estrutura (ngElse)\n\n## Serviço (Service) e Injeção de Dependência (DI)\n* 37: Introdução a Serviços\n* 38: Criando um serviço (Service)\n* 39: Injeção de Dependência (DI) + como usar um serviço em um componente\n* 40: Escopo de instâncias de serviços e módulos\n* 41: Comunicação entre componentes usando serviços\n* 42: Injetando um serviço em outro serviço\n\n## Pipes\n* 43: Pipes (usando pipes, parâmetros e pipes aninhados)\n* 44: Criando um Pipe\n* 45: Aplicando Locale (internacionalização) nos Pipes\n* 46: Pipes: Criando um Pipe \"Puro\n* 47: Pipes: Criando um Pipe \"Impuro\"\n* 48: Pipes: Async\n\n## Rotas\n* 49: Rotas: Introdução\n* 50: Rotas: Configurando rotas simples\n* 51: Rotas: RouterLink: definindo rotas no template\n* 52: Rotas: Aplicando CSS em rotas ativas-k\n* 53: Rotas: Definindo e extraindo parâmetros de roteamento\n* 54: Rotas: Escutando mudanças nos parâmetros de roteamento\n* 55: Rotas Imperativas: Redirecionamento via código\n* 56: Rotas: Definindo e extraindo parâmetros de url (query)\n* 57: Rotas: Criando um módulo de rotas\n* 58: Criando um módulo de funcionalidade\n* 59: Rotas: Criando um módulo de rotas de funcionalidade\n* 60: Rotas Filhas\n* 61: Rotas Filhas: desenvolvendo as telas\n* 62: Rotas: Dica de Performance: Carregamento sob demanda (lazy loading)\n* 63: Rotas: Tela de Login e como não mostrar o Menu (NavBar)\n* 64: Usando Guarda de Rotas: CanActivate\n* 65: Usando Guarda de Rotas: CanActivateChild\n* 66: Usando Guarda de Rotas: CanDeactivate\n* 67: Usando Guarda de Rotas: CanDeactivate com Interface Genérica\n* 68: Resolve: carregando dados antes da rota ser ativada\n* 69: CanLoad: como não carregar a rota/módulo sem permissão\n* 70: Definindo rota padrão e wildcard (rota não encontrada)\n* 71: Estilo de url: HTML5 ou usando #\n\n## Formulários (Templates)\n* 72: Formulários (template vs data / reativo) Introdução\n* 73: Formulários - Criando o projeto inicial com Bootstrap 3\n* 74: Forms (template driven) Controles ngForm, ngSubmit e ngModel\n* 75: Forms (template driven) Inicializando valores com ngModel\n* 76: Forms (template driven) Módulos e FormsModule\n* 77: Forms (template driven) Aplicando validação nos campos\n* 78: Forms (template driven) Aplicando CSS na validação dos campos\n* 79: Forms (template driven) Mostrando mensagens de erro de validação\n* 80: Forms (template driven) Desabilitando o botão de submit para formulário inválido\n* 81: Forms (Dica): Verificando dados do Form no template com JSON\n* 82: Forms (template driven) Adicionando campos de endereço (form layout Bootstrap 3)\n* 83: Forms (template driven) Refatorando (simplificando) CSS e mensagens de erro\n* 84: Forms (template driven) Form groups (agrupando dados)\n* 85: Forms (template driven) Pesquisando endereço automaticamente com CEP\n* 86: Forms (template driven) Populando campos com setValue e patchValue (CEP)\n* 87: Forms (template driven) Submetendo valores com HTTP POST\n\n## Formulários (Reativos)\n* 88: Formulários reativos (data driven) Introdução\n* 89: Formulários reativos: Configuração (Módulo e Componente)\n* 90: Formulários reativos: Criando um form com código Angular\n* 91: Formulários reativos: Sincronizando HTML com FormGroup\n* 92: Formulários reativos: Fazendo submit\n* 93: Resetando o form\n* 94: Formulários reativos: Aplicando validação nos campos\n* 95: Formulários reativos: Acesso ao FormControl no HTML e CSS de validação dos campos\n* 96: Formulários reativos: Endereço (migrando de template driven para form reativo)\n* 97: Formulários reativos: Form groups (agrupando dados)\n* 98: Formulários reativos: Autopopulando endereço com CEP (setValue e patchValue)\n* 99: Formulários reativos: Verificar validação dos campos com botão submit\n* 100: Formulários: Criando um serviço de Estados Brasileiros\n* 101: Formulários: Serviço de consulta CEP + provideIn\n* 102: Formulários reativos: Combobox simples (select)\n* 103: Formulários reativos: Combobox com Objeto (ngValue e compareWith)\n* 104: Formulários reativos: Combobox Múltiplo (Select Multiple)\n* 105: Formulários reativos: Radio Button (Botão do tipo Rádio)\n* 106: Formulários reativos: Checkbox Toggle\n* 107: Formulários reativos: FormArray: Checkboxes Dinâmicos\n* 108: Formulários reativos: Validação Customizada (FormArray Checkboxes)\n* 109: Formulários reativos: Validação Customizada (CEP)\n* 110: Formulários reativos: Validação entre dois campos (confirmar email)\n* 111: Formulários reativos: Validação Assíncrona\n* 112: Formulários reativos: Serviço de Mensagens de Erros\n* 113: Formulários reativos: Reagindo à mudanças reativamente\n* 114: Formulários reativos: Campo input customizado (ControlValueAcessor)\n* 115: Formulários reativos: Classe base para Forms (herança no Angular)\n* 116: Formulários reativos: Combobox aninhado: Estado + Cidade\n\n## Integração com server\n* 117: Http / HttpClient: Introdução\n* 118: Instalando Bootstrap 4\n* 119: Http: Simulando Servidor REST (json-server)\n* 120: Http GET: listar registros\n* 121: Http: Dica: Variável de Ambiente\n* 122: Http GET + Pipe Async\n* 123: Http + RxJS: Unsubscribe Automático\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floiane%2Fcurso-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floiane%2Fcurso-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floiane%2Fcurso-angular/lists"}