Trabalhando com Angular 13 CLI
Instalar Angular em um projeto
npm install -g @angular/cli@latest
Angular version
ng --version
Criar projeto
ng new nome-do-projeto
Rodar projeto
ng serve
Rodar projeto na porta 8080 e que seja visível para qualquer máquina da rede
ng serve --port 8080 --host 0.0.0.0
Rodar testes
ng test
Gerar arquivos para produção
ng build
Arquivo de configuração
VersãoArquivo de configuração 13
angular.json
Arquitetura modular
Estrutura de um módulo
Definição básica
CSS | app.component.css |
HTML | app.component.html |
Testes | app.component.spec.ts |
Componente | app.component.ts |
Configuração do módulo | app.module.ts |
Módulos, componentes e serviços
Módulo -> Componente -> Serviço
Criar módulo
ng g module nome-do-moduloCriar componente
ng g component local/nome-do-componenteCriar serviço
Regras de negócio e chamadas de API.
ng g service local/nome-do-servicoO g nos comandos é de generate. Os serviços devem ser registrados como Providers.
Compartilhar classes de um módulo
Por convenção, cria-se uma pasta chamada Shared que conterá todas as classes que serão compartilhadas com outros módulos.
Diretivas
Bloco de código que adiciona um comportamento para um componente. Gera um atributo para uma tag.
Criar diretiva
ng g directive local/nome-da-diretivaBinding
Bind duplo = Two way binding através do [(ngModel)]
Objeto $event
É um objeto padrão do navegador para a passagem de eventos.
Linguagem de programação
Typescript
Superset do Javascript //www.typescriptlang.org/
Parâmetos opcionais em um construtor
export class Tarefa { constructor( public id?: number, public nome?: string, public concluida?: boolean ) { } }
A "?" indica que o atributo é opcional na chamada do construtor.
Empacotador
Webpack
Empacotador de módulos que gera static assets. //webpack.js.org/
Instalando dependência: Bootstrap 3
npm install --save bootstrap@3Deploy de aplicação Angular no Github Pages
- How to Deploy React App to GitHub Pages
- Como criar um blog no GitHub Pages com Jekyll
- About GitHub Pages and Jekyll
Referências
- //www.udemy.com/course/formacao-angular-inicio-criando-7-projetos
- //www.devmedia.com.br/angular-cli-como-criar-e-executar-um-projeto-angular/38246
- Home
- Cursos
- Começando com Angular
Gratuito
Aprenda os fundamentos de um dos melhores e mais famosos Frameworks JS.
- Sobre o curso
- Aulas
Esta é a página do curso 7181 – Começando com Angular.
Este é o curso para quem deseja começar a desenvolver Frontends com Angular.
O curso aborda todos os conceitos fundamentais do Angular e, aprendendo os conceitos fundamentais, você poderá utilizá-los em todas as versões mais recentes do Framework.
Começaremos do começo, preparando seu computador para trabalhar com Angular e criando seu primeiro projeto da maneira correta. Este curso é totalmente prático.
Vem comigo nesta jornada para adicionar Angular ao seu cinturão de utilidades!
Neste curso de Angular você vai...
- Configurar o ambiente de desenvolvimento para Angular
- Aprender os elementos e conceitos fundamentais do Angular, como módulos e componentes
- Aprender a utilizar o Angular CLI
- Aprender a como organizar o projeto em Angular
- Aprender o que é e para que serve cada arquivo em um projeto Angular
- Aprender o fluxo de desenvolver, testar, debugar, melhorar e corrigir aplicações
- Aprender a executar a aplicação Angular em ambiente de desenvolvimento
- Aprender sobre importações no Angular
- Aprender sobre tipos de dados e variáveis em TypeScript
- Aprender a sobre Routes/Routing com Angular
- Aprender a criar formulários básicos em Angular
- Aprender a validar formulários no Angular
- Aprender a habilitar/desabilitar botões em Angular
- Aprender a persistir dados em Local Storage (browser)
- Aprender a aplicar estilos básicos em CSS
- Aprender a usar uma fonte externa
- Aprender a aplicar animações simples com o Animate CSS
- Aprender a trocar o ícone (favicon) da aplicação
- Aprender a construir a versão de produção de um app em Angular
Para quem é recomendado este curso de Angular
- Iniciantes na área de programação com JavaScript e TypeScript
- Iniciantes que querem ter o primeiro contato com Angular
- Programadores com alguma experiência que querem adicionar Angular ao portfólio
- Programadores interessados um curso para aprender a desenvolver um MVP com Angular
- Profissionais em preparação para uma entrevista técnica com Angular
Tecnologias e versões utilizadas
- Node.js v11.5.0 (versão mínima)
- Npm 6.4.1 (versão mínima)
- Angular CLI 7.2.2
- Visual Studio Code (Versão mais recente disponível)
- Terminal Hyper (opcional)
Projetos do curso
- Criaremos uma aplicação de lista de tarefas (Todo App) com Angular onde serão apresentados os conceitos fundamentais do Angular, como componentes, módulos, formulários, validações, bindings.
- Módulo 1
Introdução
- Módulo 1
47.149
Alunos matriculados
32.394
Certificados emitidos
Comece de graça agora mesmo!
Temos mais de 16 cursos totalmente de graça e todos com certificado de conclusão.
Prefere algo mais Premium?
Conheça nossos planos
Premium semestral
Compra única, parcelada em até
12x no cartão de crédito
- 6 meses de acesso
- Acesso à todo conteúdo
- Emissão de Certificado
- Tira Dúvidas Online
- 48 cursos disponíveis
- 4 carreiras disponíveis
- 161 temas de tecnologia
- Conteúdo novo todo mês
- Encontros Premium
Começar agora
Política de privacidade
Premium anual
Compra única, parcelada em até
12x no cartão de crédito
- 1 ano de acesso
- Acesso à todo conteúdo
- Emissão de Certificado
- Tira Dúvidas Online
- 48 cursos disponíveis
- 4 carreiras disponíveis
- 161 temas de tecnologia
- Conteúdo novo todo mês
- Encontros Premium
Começar agora
Política de privacidade
Precisa de ajuda?
Dúvidas frequentes
- Posso começar de graça?
Sim! Basta criar sua conta gratuita no balta.io e começar seus estudos. Nós contamos com diversos cursos TOTALMENTE gratuitos e com certificado de conclusão.
- Vou ter que pagar algo?
Nós temos cursos gratuitos e pagos, porém você não precisa informar nenhum dado de pagamento para começar seus estudos gratuitamente conosco. Os cursos gratuitos são completos e com certificado de conclusão, você não paga nada por eles.
Porém, caso queira algo mais
, você terá acesso à diversos benefícios que vão te ajudar ainda mais em sua carreira.
- Por onde devo começar?
Siga SEMPRE as nossas Carreiras, elas vão te orientar em todos os sentidos. Os cursos já estão organizados em categorias e carreiras para facilitar seu aprendizado.
Nossa sugestão para aprendizado é começar pelo Backend e seguindo para Frontend e Mobile.- Backend
- Frontend
- Mobile
- Os cursos ensinam tudo que preciso?
Nenhum curso no mundo vai te ensinar tudo, desculpa ser sincero! Os cursos são uma base, eles fornecem por volta de 30% do que você precisa aprender, o resto é com você, com dedicação e MUITA prática.
-
O que eu devo estudar?
Java ou .NET? Angular ou React? Xamarin ou Flutter? A resposta é simples e direta: "Você já sabe o básico?"
Se você ainda não sabe BEM o básico, ou seja, os fundamentos, OOP, SOLID, Clean Code, está perdendo tempo estudando Frameworks ou até coisas mais avançadas como Docker. Foque nos seus objetivos primeiro.
Agora se você está indeciso sobre qual Framework estudar, a boa notícia é que o mercado neste momento está bem aquecido e você tem várias oportunidade. Desta forma o que levaríamos em conta para tomar esta decisão seria:- Já sei o básico
- O Framework/Tecnologia tem mercado onde eu estou (região)
- O Framework/Tecnologia é utilizado em uma empresa onde quero atual
- O Framework/Tecnologia resolve meu problema
- Eu gosto de utilizar o Framework/Tecnologia
-
Estou pronto para estudar no balta.io?
Com certeza! O primeiro passo é começar e você pode fazer isto agora mesmo!
Começar de graça
Ainda tem dúvidas?
Assine nosso Newsletter
Receba em primeira mão todas as nossas novidades.