Formação angular 13 - o início criando 7 projetos download

Question

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ão	Arquivo de configuração
13	angular.json

Arquitetura modular

Estrutura de um módulo

Definição básica

Conteúdo	Arquivo
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-modulo

Criar componente

ng g component local/nome-do-componente

Criar serviço

Regras de negócio e chamadas de API.

ng g service local/nome-do-servico

O 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-diretiva

Binding

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 https://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. https://webpack.js.org/

Instalando dependência: Bootstrap 3

npm install --save bootstrap@3

Deploy 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

https://www.udemy.com/course/formacao-angular-inicio-criando-7-projetos
https://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

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
Premium
, 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