Curso Angular 2 – Aula 10: Acesso HTTP a um servidor remoto

O objetivo da aula 10 é ensinar como configurar e realizar acessos HTTP a servidores remotos no Angular 2.

O Angular 2 é um framework front-end, e a menos que você crie uma aplicação que possa manter os dados todos localmente no navegador, você certamente precisará acessar um servidor remoto utilizando conexões HTTP para isso.

O Angular 2 possui um módulo específico para os principais acessos HTTP tornando nossas vidas bem mais simples.

Para a aula de hoje também criaremos nosso próprio servidor web em NodeJS, utilizando o framework LoopBack / StrongLoop, permitindo um aprendizado por completo em relação a implementação e comunicação entre back-end e front-end.

Leia Mais

Curso Angular 2 – Aula 9: Rotas e navegação

O objetivo da aula 9 é ensinar como configurar e utilizar rotas e navegação no Angular 2.

Rotas de navegação são fundamentais para qualquer aplicação, tornando-a dinâmica e interativa para o usuário final.

As rotas e navegação proporcionam a interação entre componentes no Angular 2, de modo a permitir a criação de componentes específicos, onde cada um deles representará uma única função no sistema.

O Angular 2 possui uma implementação bastante simples e de fácil utilização de rotas e navegação, o que permite um fácil entendimento e manutenção do código fonte, conforme veremos nos próximos tópicos.

Leia Mais

Curso Angular 2 – Aula 8: Serviços

O objetivo da aula 8 é ensinar como criar e utilizar Serviços no Angular 2.

A definição mais básica de Serviço no Angular 2 seria um Componente que contém lógica de negócio específica para um domínio, e que pode ser injetado e utilizado por outros componentes.

Um Componente padrão no Angular 2 deve estar associado a um template e controlar a navegação de uma página, porém quando decidimos adicionar regras de negócio nesse mesmo Componente, acabamos por criar um código difícil de manter e de ser testado.

Visando isolar a regra de negócio em um lugar específico, devemos utilizar um Serviço que será responsável por manter determina regra.

Nos próximos tópicos você aprenderá a criar um Serviço para manter um cadastro de aluno, assim como utilizar o serviço criado a partir de outro componente.

Leia Mais

Curso Angular 2 – Aula 7: Templates

O objetivo da aula 7 é apresentar os recursos de template utilizados pelo Angular 2 para manipular o HTML da página tornando os dados dinâmicos.

Uma vez que o Angular 2 utiliza HTML para a composição de sua interface, precisamos de elementos de template responsáveis pela manipulação do DOM HTML, tornando-o dinâmico e interativo.

Dentre os principais recursos utilizados pelo Angular 2 para manipulação de templates estudaremos a interpolação, eventos, atribuições, binding e operadores condicionais e de repetição, conforme seguem os tópicos a seguir.

Leia Mais

Curso Angular 2 – Aula 6: Formulário (Validação)

O objetivo da aula 6 é ensinar como criar validações de formulários com o Angular 2.

Validar os dados de um formulário á imprescindível, e exitem dois tipos de validação, a validação cliente e servidor.

A validação no servidor ocorre quando os dados chegam ao nosso servidor para serem processados, e obrigatoriamente eles devem ser validados para garantir a integridade dos dados, e ao mesmo tempo garantir a segurança da aplicação.

A validação no lado do cliente acontece ainda no navegador do usuário, e é a validação que focaremos nesse artigo. Embora a validação no lado do cliente não seja obrigatória, é preferível sempre fazê-la para evitar chamadas desnecessárias ao servidor para o processamento de valores inválidos.

O principal motivo entre a obrigatoriedade de se ter a validação no servidor e não no cliente, é que a validação no cliente pode ser burlada, visto que ela é executada no navegador e é basicamente criada em JavaScript.

O Angular 2 possui uma série de recursos nativos implementados para facilitar a validação dos dados, e esses recursos que estudaremos nesta aula.

É importe salientar que a validação de formulários no Angular 2 utilizando seus recursos nativos, pode variar e ser implementada de modo diferente do mostrado aqui.

Por fim, é importante ressaltar que o Angular 2 possui melhorias quando comparado com o Angular 1 no quesito validação, pois o Angular 1 era limitado e poluía muito o HTML com o uso de diretivas, o que não ocorre com o Angular 2, conforme veremos.

Leia Mais

Curso Angular 2 – Aula 5: Formulário

O objetivo da aula 5 de Angular 2 é criar o HTML e controles de um formulário de cadastro de um aluno.

Formulários são essenciais para qualquer aplicação web, pois sempre precisaremos criar telas para obter alguma entrada de dados do usuário.

O Angular 2 possui uma série de controles para nos ajudar com essa tarefa, e nesta aula iremos entender como utilizar o ‘two way binding’ para obter os dados dos campos do formulário, assim como iremos aprender como obter os dados quando um formulário for enviado.

Também utilizaremos o Bootstrap, que é um framework HTML/CSS utilizado para estilizar nosso HTML e exibir uma interface agradável para o usuário final.

Leia Mais

Curso Angular 2 – Aula 4: Filtros

O objetivo dessa aula é apresentar os filtros no Angular 2, também conhecidos como pipes, que permitem formatar um texto (data, moeda, CEP, …) antes de exibi-lo na tela.

Filtros, ou pipes como é chamado originalmente em inglês, nada mais são do que funções que aplicam alguma transformação em um valor a ser exibido no template.

Esses valores podem ser um texto simples, uma data, uma número, um valor monetário, ou até mesmo um valor customizado como um número de RG ou CPF.

Sua utilização é feita através do operador pipe “|”, e funciona de modo muito similar ao comandos utilizados no console de texto de um sistema operacional Unix.

Caso você nunca tenha utilizado um sistema operacional Unix, basicamente o operador pipe funciona como um encadeamento de execuções, onde as funções passadas entre os pipes recebem como entrada o valor de saída da operação executada anteriormente, conforme veremos a seguir.

Leia Mais

Curso Angular 2 – Aula 3: Exibindo dados

O objetivo da aula 3 é ensinar como exibir dados em um template com o Angular 2 usando interpolação e diretivas de atributos ‘*ngIf’ e ‘*ngFor’.

Vamos começar pelo modo mais simples de exibirmos dados com o Angular 2, que é utizado a interpolação. A interpolação utiliza a notação de chaves duplas ‘{{ }}’ para exibir dados na tela.

As chaves duplas são bastante poderosas, elas suportam processamento de expressões, adição de filtros, porém nesse momento iremos somente exibir dados simples, expressões e filtros serão apresentados em outra aula.

Leia Mais

Curso Angular 2 – Aula 2: Arquitetura

O objetivo da aula 2 é apresentar a arquitetura do Angular 2, e entender como ele é composto e como está organizado.

O Angular 2 é um framework utilizado para criação de aplicações do lado cliente utilizando HTML e JavaScript.

Ele é composto por uma série de bibliotecas, sendo uma delas o core, que contém todo o código base do framework, e algumas opcionais, que podem ser adicionadas no sistema caso necessário.

O Angular 2 utiliza tags próprias no HTML da página, que são utilizadas para referenciar os componentes que contém a lógica de negócio da aplicação, e uma vez inicializado, o Angular 2 manipula os elementos HTML para aplicar a lógica relativa a cada componente.

Leia Mais