Angular 9 + Spring Boot 2.2: Fullstack Completo e Atualizado

Name: Angular 9 + Spring Boot 2.2: Fullstack Completo e Atualizado
Rating: 4.6 (1635 reviews)

Desenvolva 2 aplicações completas através da integração da stack Angular e Spring Boot

Created byDougllas Sousa

Last updated 11/2023

Portuguese

What you'll learn

Desenvolvimento Fullstack com Angular 9 e Spring Boot 2
Desenvolver RestFUL API com Spring Boot e Consumir com aplicação Angular
Utilizar o OAuth2 e Token JWT com Spring Security
Trabalhar com Angular Material, Fazer Upload de Arquivos e Paginação por Demanda
Boas práticas de programação e Clean Code
Preparar ambientes do zero para desenvolvimento de aplicações web modernas
Como utilizar o gerenciador de versionamento GIT e publicar seu código fonte no GITHUB

Course content

13 sections • 147 lectures • 20h 2m total length

Introdução4:50
Instruções iniciais e GITHUB do projeto0:30

Como criar uma aplicação Spring Boot do zero11:49
Intellij 2022 - Criando uma aplicação Spring Boot do zero1:55
Hello world5:02
Starters - A Mágica por trás do Spring Boot6:25
@Configuration e @Bean8:42
O Container IOC do Spring Framework11:47
Injeção de Dependências10:46
Configuração externalizada com application.properties8:58
Trabalhando com múltiplos ambientes e profiles9:17
Criando annotations customizadas de configuração11:24

Criação do Projeto17:20
Mapeando a Entidade Cliente3:24
Adicionando o Lombok e configurando o Plugin6:00
Mapeando a Entidade Servico Prestado3:48
Criando os Repositorios JPA3:19
Configurando e obtendo conexões com base de dados7:59
Testando a conexão com o banco de dados6:22
Iniciando a API de Clientes8:47
Cadastro de Cliente através do Postman7:57
Obtendo as informações de um Cliente8:30
Deletando um Cliente5:19
Atualizando um cliente12:06
Aplicando regras de validação no cliente4:26
Configurando Internacionalização7:00
Concluindo a validação de clientes8:35
Tratando erros da API8:10
Padronizando o retorno de erros da API6:35
Exception Handler para ResponseStatusException4:41

Introdução3:16
Aviso sobre a criação do Template0:11
Criando o projeto e adicionando as dependências14:13
Criação do Navbar6:44
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
            <a class="navbar-brand" href="index.html">Meus Clientes</a>
            <button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#">
                <i class="fas fa-bars"></i>
            </button>
        </nav>
Sidebar4:37
<div id="layoutSidenav_nav">
                <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
                    <div class="sb-sidenav-menu">
                        <div class="nav">
                            <div class="sb-sidenav-menu-heading">Core</div>
                            <a class="nav-link" href="index.html"
                                ><div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                                Dashboard</a
                            >
                            <div class="sb-sidenav-menu-heading">Interface</div>
                            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts"
                                ><div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                                Layouts
                                <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div
                            ></a>
                            <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-parent="#sidenavAccordion">
                                <nav class="sb-sidenav-menu-nested nav"><a class="nav-link" href="layout-static.html">Static Navigation</a><a class="nav-link" href="layout-sidenav-light.html">Light Sidenav</a></nav>
                            </div>
                            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages"
                                ><div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                                Pages
                                <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div
                            ></a>
                            <div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-parent="#sidenavAccordion">
                                <nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
                                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth"
                                        >Authentication
                                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div
                                    ></a>
                                    <div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">
                                        <nav class="sb-sidenav-menu-nested nav"><a class="nav-link" href="login.html">Login</a><a class="nav-link" href="register.html">Register</a><a class="nav-link" href="password.html">Forgot Password</a></nav>
                                    </div>
                                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError"
                                        >Error
                                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div
                                    ></a>
                                    <div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">
                                        <nav class="sb-sidenav-menu-nested nav"><a class="nav-link" href="401.html">401 Page</a><a class="nav-link" href="404.html">404 Page</a><a class="nav-link" href="500.html">500 Page</a></nav>
                                    </div>
                                </nav>
                            </div>
                            <div class="sb-sidenav-menu-heading">Addons</div>
                            <a class="nav-link" href="charts.html"
                                ><div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
                                Charts</a
                            ><a class="nav-link" href="tables.html"
                                ><div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                                Tables</a
                            >
                        </div>
                    </div>
                    <div class="sb-sidenav-footer">
                        <div class="small">Logged in as:</div>
                        Start Bootstrap
                    </div>
                </nav>
            </div>
Toggle sidebar4:56
ngAfterViewInit(){
    (function($) {
        "use strict";

        // Add active state to sidbar nav links
        var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
            $("#layoutSidenav_nav .sb-sidenav a.nav-link").each(function() {
                if (this.href === path) {
                    $(this).addClass("active");
                }
            });

        // Toggle the side navigation
        $("#sidebarToggle").on("click", function(e) {
            e.preventDefault();
            $("body").toggleClass("sb-sidenav-toggled");
        });
    })(jQuery);
  }
Concluindo o template5:01
Arquivo para download do Projeto já "templatizado"0:16

Criando o módulo de Clientes5:25
Configurando navegação através de rotas9:20
Navegando nas páginas através de routerLinks11:21
Desenvolvendo o formulário de Clientes9:50
Data-binding: Property binding, Event binding e Two-way data-binding12:50
Populando o cliente através do formulário6:20
Form submit com event binding3:21
Introdução aos Serviços do Angular (Services)5:02
Criando e injetando o servico de clientes10:30
Conhecendo o Módulo HTTP do Angular3:57
CORS: Salvando clientes atraves da Aplicaçao web para a REST API16:22
Directiva "*ngIf" para mostrar mensagem de sucesso (renderização condicional)7:35
Tratando erros vindos de nosssa API5:07
Melhorando o formulário de clientes4:20
Criando o componente de listagem de clientes14:18
Listando os clientes através da API4:25
Navegando entre os componentes com o Router6:53
Trabalhando com paramentros de rotas11:07
Preparando cliente para atualização5:00
Atualização de clientes com a API5:36
Corrigindo erro ao tentar carregar cliente por ID4:12
Modal para confirmação de deleção10:21
Concluindo a deleção de clientes9:39

Criando a API de Serviço Prestado16:43
Salvando um Serviço Prestado6:55
Método de pesquisa de serviços prestados11:18
Criando o módulo e os componentes de servico prestado5:28
Formulario de Serviços prestados parte 112:26
Formulario de serviços prestados parte 28:56
Serviços prestados e variaveis de ambiente utilizando Enviroment9:48
Salvando o Serviço conectando com a API4:02
Configurando o CORS no Spring Boot (Cross Origin Resource Sharing)8:52
Mensagem de feedback no formulario de Serviços Prestados8:41
Criando o formulario de pesquisa9:41
Implementando a pesquisa de Serviços Prestados12:33
Finalizando a Pesquisa9:39
Adicionando Botão "Novo" e navegando para o Formulário4:38

Criação do Formulário de Login13:58
Finalizando tela de Login e Registro10:21
Separando o login do template da aplicação8:59
Trabalhando com rotas filhas e templates diferentes11:44
Modelagem da Entidade de Usuario4:30
API de Registro de Usuários5:15
Conhecendo o Fluxo do OAuth25:46
Adicionando as dependências e testando a configuração padrão17:48
Configurando o Spring Security8:51
Configurando o Resource Server8:07
Configurando o Authorization Server7:23
Testando as configurações customizadas6:29
Autenticando com os usuários da base de dados10:27
Configurando o OAuth para utilizar tokens JWT11:04
Cadastro de usuario no front-end11:26
Melhorando as validações do usuário no lado do servidor10:15
Finalizando o cadastro de Usuário5:45
Melhorias no formulário de registro de Usuário5:34
Logando e obtendo o token com o formulário de login16:08
Guardando o token na aplicação e utilizando nas requisições11:39
Implementando Http Interceptor para utilização do token JWT12:13
Utilizando Guards para proteção das Rotas9:11
Controlando a Sessão de Usuário com o Token11:55
Finalizando a aplicação14:30
Considerações finais sobre a aplicação1:39

Requirements

Java e Orientação a Objetos
HTML, CSS e Javascript
Linguagem SQL
Desejável conhecimento em MAVEN
Desejável conhecimento em Typescript

Description

Se você está procurando uma stack para criar aplicações web completas, ou então está procurando se atualizar no mercado, este curso será perfeito pra você. Nele irá aprender sobre arquitetura de aplicações web e como integrar tecnologias para obter um site completo ou aplicações corporativas de grande escala.

Nesse curso iremos ensinar o passo a passo desde a instalação de ferramentas, preparação do ambiente, banco de dados, configuração inicial do projeto Spring boot, alguns fundamentos, criação da API Rest, até a criação da aplicação front end para consumir a API, utilizando o famoso framework de UI's ANGULAR 9. Você irá sair com novos conhecimentos e aplicando boas práticas de programação.

Who this course is for:

Quem sabe o básico mas não tem ainda uma stack de tecnologias que juntas possam fazer aplicações web.
Quem está querendo se atualizar/reciclar e aprender sobre arquitetura de aplicações web modernas.
Quem tem interesse em desenvolver aplicações web robustas com Java (Spring boot) e uma biblioteca javascript (Angular 9).

Angular 9 + Spring Boot 2.2: Fullstack Completo e Atualizado

What you'll learn

Explore related topics

Course content

Introdução2 lectures • 5min

Instalação e Configuração das ferramentas Java4 lectures • 14min

GIT e GITHUB básico (Opcional)1 lecture • 22min

Introdução ao Spring Boot10 lectures • 1hr 26min

Desenvolvimento da API de Clientes18 lectures • 2hr 10min

Módulo de Introdução ao Angular11 lectures • 1hr 39min

Projeto Front-end - Criação do Template da Aplicação8 lectures • 39min

Cadastro e Listagem de Clientes23 lectures • 3hr 3min

Módulo de Cadastro de Serviços Prestados14 lectures • 2hr 10min

Autenticação e Segurança da Aplicação com OAuth2 e JWT25 lectures • 4hr 1min

Requirements

Description

Who this course is for: