loiane / Curso Angular
🎓 [PT-BR] Curso de Angular (v2+) gratuito - loiane.training [EN] Source code of my free Angular training.
Stars: ✭ 1,148
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Curso Angular
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (-41.72%)
Mutual labels: angular-cli
Nebular
💥 Customizable Angular UI Library based on Eva Design System 🌚✨Dark Mode
Stars: ✭ 7,368 (+541.81%)
Mutual labels: angular-cli
Angular Contacts Demo
Angular demo(SSR) base on Angular CLI
Stars: ✭ 42 (-96.34%)
Mutual labels: angular-cli
Angular Cli Ghpages
🚀 Deploy your 🅰️Angular app to GitHub pages directly from the Angular CLI! Available on NPM.
Stars: ✭ 713 (-37.89%)
Mutual labels: angular-cli
Ng Sticky
Angular 4 sticky, have header or any component sticky easy to use.
Stars: ✭ 25 (-97.82%)
Mutual labels: angular-cli
Angularconcepts
Key Angular Concepts using Latest Angular version 5
Stars: ✭ 31 (-97.3%)
Mutual labels: angular-cli
Date Time Picker
Angular Date Time Picker (Responsive Design)
Stars: ✭ 528 (-54.01%)
Mutual labels: angular-cli
Angular Builders
Angular build facade extensions (Jest and custom webpack configuration)
Stars: ✭ 843 (-26.57%)
Mutual labels: angular-cli
Laravel5.5 Angular5
Laravel 5.5 + Angular 5 + AdminLTE single page application
Stars: ✭ 40 (-96.52%)
Mutual labels: angular-cli
Echoes Player
Echoes Player: the missing Media Player experience for Youtube - Built with Angular (9), ngrx (9), Angular CLI, Boostrap (SASS), Youtube api
Stars: ✭ 802 (-30.14%)
Mutual labels: angular-cli
Angular Pluggable Architecture
This is an example of an Angular application that allows to dynamically plug functionality
Stars: ✭ 24 (-97.91%)
Mutual labels: angular-cli
Esri Angular Cli Example
Example of how to to use the ArcGIS API for JavaScript in an Angular CLI app
Stars: ✭ 31 (-97.3%)
Mutual labels: angular-cli
Nyan Builder
Nyan Builder for your next Angular application! 🌈
Stars: ✭ 45 (-96.08%)
Mutual labels: angular-cli
Angular2 Express Starter
Angular 8 and Express 👪 ( Heroku ready )
Stars: ✭ 565 (-50.78%)
Mutual labels: angular-cli
Angular6 Monorepo Experiment
A monorepo experiment using Angular-CLI and Lerna
Stars: ✭ 15 (-98.69%)
Mutual labels: angular-cli
Starter Kit
📦 Angular 11+ starter kit for enterprise-grade projects
Stars: ✭ 1,102 (-4.01%)
Mutual labels: angular-cli
Root Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Root is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 54 (-95.3%)
Mutual labels: angular-cli
Angular Interview Questions
A list of helpful Angular interview questions you can use to interview potential candidates, test yourself or completely ignore.
Stars: ✭ 967 (-15.77%)
Mutual labels: angular-cli
Curso Angular Gratuito
Código fonte apresentado no curso de Angular gratuito do blog loiane.com - loiane.training
Código atualizado para Angular v10
Link do curso com certificado:
Playlist Youtube
Editor e plugins
Particularmente recomendo o uso do Visual Studio Code como editor - que é o mesmo usado nas aulas.
Para 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.
Lista das aulas
Aulas publicadas/programadas
Introdução
- 01: Introdução + Arquitetura
- 02: Ambiente de desenvolvimento
- 03: Primeira app (Hello World)
- 04: Introdução ao Typescript para Angular
- 05: Módulos (ngModule)
- 06: Templates
- 07: Serviços (Services) e Injeção de dependência (DI)
- 08: Dica de produtividade: code snippets
Data binding e eventos
- 09: Property binding + Interpolation
- 10: Class e Style binding
- 11: Event binding
- 12: Two-way data binding
- 13: Input properties
- 14: Output properties
- 15: Ciclo de vida (life-cycle) do Componente
- 16: Acesso à variáveis locais do Template com ViewChild
- Extra: Atualizações do RC 5 e ngModule
Angular CLI: Introdução
- 17: Angular CLI: Instalação e criação de projetos: ng new e ng serve
- 18: Angular CLI: Criando components, services: ng generate
- Extra: Angular CLI: atualizando para versão RC5 (webpack)
- 19: Angular CLI: Usando pré-processadores (Sass, Less, Stylus)
- 20: Angular CLI: ng lint, ng test, ng e2e
- 21: Angular CLI: Estrutura do projeto
- 22: Angular CLI: Fazendo build
- 23: Angular CLI: instalando bibliotecas (bootstrap, materialize, lodash, jquery, etc)
Diretivas
- 24: Introdução e tipos de diretivas no Angular 2
- 25: ngIf
- 26: ngSwitch
- 27: ngFor
- 28: sobre o asterisco
- 29: ngClass
- 10: ngStyle
- 31: operador elvis
- 32: ng-content
- 33: Criando uma diretiva de atributo
- 34: HostListener e HostBinding
- 35: Property Binding de Diretivas
- 36: Criando uma diretiva de estrutura (ngElse)
Serviço (Service) e Injeção de Dependência (DI)
- 37: Introdução a Serviços
- 38: Criando um serviço (Service)
- 39: Injeção de Dependência (DI) + como usar um serviço em um componente
- 40: Escopo de instâncias de serviços e módulos
- 41: Injetando um serviço em outro serviço
- 42: Comunicação entre componentes usando serviços
Pipes
- 43: Pipes (usando pipes, parâmetros e pipes aninhados)
- 44: Criando um Pipe
- 45: Aplicando Locale (internacionalização) nos Pipes
- 46: Pipes: Criando um Pipe "Puro
- 47: Pipes: Criando um Pipe "Impuro"
- 48: Pipes: Async
Rotas
- 49: Rotas: Introdução
- 50: Rotas: Configurando rotas simples
- 51: Rotas: RouterLink: definindo rotas no template
- 52: Rotas: Aplicando CSS em rotas ativas-k
- 53: Rotas: Definindo e extraindo parâmetros de roteamento
- 54: Rotas: Escutando mudanças nos parâmetros de roteamento
- 55: Rotas Imperativas: Redirecionamento via código
- 56: Rotas: Definindo e extraindo parâmetros de url (query)
- 57: Rotas: Criando um módulo de rotas
- 58: Criando um módulo de funcionalidade
- 59: Rotas: Criando um módulo de rotas de funcionalidade
- 60: Rotas Filhas
- 61: Rotas Filhas: desenvolvendo as telas
- 62: Rotas: Dica de Performance: Carregamento sob demanda (lazy loading)
- 63: Rotas: Tela de Login e como não mostrar o Menu (NavBar)
- 64: Usando Guarda de Rotas: CanActivate
- 65: Usando Guarda de Rotas: CanActivateChild
- 66: Usando Guarda de Rotas: CanDeactivate
- 67: Usando Guarda de Rotas: CanDeactivate com Interface Genérica
- 68: Resolve: carregando dados antes da rota ser ativada
- 69: CanLoad: como não carregar a rota/módulo sem permissão
- 70: Definindo rota padrão e wildcard (rota não encontrada)
- 71: Estilo de url: HTML5 ou usando #
Formulários (Templates)
- 72: Formulários (template vs data / reativo) Introdução
- 73: Formulários - Criando o projeto inicial com Bootstrap 3
- 74: Forms (template driven) Controles ngForm, ngSubmit e ngModel
- 75: Forms (template driven) Inicializando valores com ngModel
- 76: Forms (template driven) Módulos e FormsModule
- 77: Forms (template driven) Aplicando validação nos campos
- 78: Forms (template driven) Aplicando CSS na validação dos campos
- 79: Forms (template driven) Mostrando mensagens de erro de validação
- 80: Forms (template driven) Desabilitando o botão de submit para formulário inválido
- 81: Forms (Dica): Verificando dados do Form no template com JSON
- 82: Forms (template driven) Adicionando campos de endereço (form layout Bootstrap 3)
- 83: Forms (template driven) Refatorando (simplificando) CSS e mensagens de erro
- 84: Forms (template driven) Form groups (agrupando dados)
- 85: Forms (template driven) Pesquisando endereço automaticamente com CEP
- 86: Forms (template driven) Populando campos com setValue e patchValue (CEP)
- 87: Forms (template driven) Submetendo valores com HTTP POST
Formulários (Reativos)
- 88: Formulários reativos (data driven) Introdução
- 89: Formulários reativos: Configuração (Módulo e Componente)
- 90: Formulários reativos: Criando um form com código Angular
- 91: Formulários reativos: Sincronizando HTML com FormGroup
- 92: Formulários reativos: Fazendo submit
- 93: Resetando o form
- 94: Formulários reativos: Aplicando validação nos campos
- 95: Formulários reativos: Acesso ao FormControl no HTML e CSS de validação dos campos
- 96: Formulários reativos: Endereço (migrando de template driven para form reativo)
- 97: Formulários reativos: Form groups (agrupando dados)
- 98: Formulários reativos: Autopopulando endereço com CEP (setValue e patchValue)
- 99: Formulários reativos: Verificar validação dos campos com botão submit
- 100: Formulários: Criando um serviço de Estados Brasileiros
- 101: Formulários: Serviço de consulta CEP + provideIn
- 102: Formulários reativos: Combobox simples (select)
- 103: Formulários reativos: Combobox com Objeto (ngValue e compareWith)
- 104: Formulários reativos: Combobox Múltiplo (Select Multiple)
- 105: Formulários reativos: Radio Button (Botão do tipo Rádio)
- 106: Formulários reativos: Checkbox Toggle
- 107: Formulários reativos: FormArray: Checkboxes Dinâmicos
- 108: Formulários reativos: Validação Customizada (FormArray Checkboxes)
- 109: Formulários reativos: Validação Customizada (CEP)
- 110: Formulários reativos: Validação entre dois campos (confirmar email)
- 111: Formulários reativos: Validação Assíncrona
- 112: Formulários reativos: Serviço de Mensagens de Erros
- 113: Formulários reativos: Reagindo à mudanças reativamente
- 114: Formulários reativos: Campo input customizado (ControlValueAcessor)
- 115: Formulários reativos: Classe base para Forms (herança no Angular)
- 116: Formulários reativos: Combobox aninhado: Estado + Cidade
Integração com server
- 117: Http / HttpClient: Introdução
- 118: Instalando Bootstrap 4
- 119: Http: Simulando Servidor REST (json-server)
- 120: Http GET: listar registros
- 121: Http: Dica: Variável de Ambiente
- 122: Http GET + Pipe Async
- 123: Http + RxJS: Unsubscribe Automático
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].