AngularJS

Aplicações JS mais simples

Jean Lucas de Carvalho

Desenvolvedor Frontend com foco na experiência do usuário e entusiasta de tecnologias Frontend, criou a Futuring para ajudar jovens universitários a adentrarem no mercado de trabalho. É um dos Organizadores do GDG Goiânia e em 2013 participou do Google Developer Bus Brasil e criou o Frontend Goiás. Já palestrou em eventos como: Google DevFest Centro-Oeste, Seminário Locaweb, Android Bootcamp, FLISOL e Join Community. Trabalha com AngularJS desde 2013, contribuindo em projetos open-source e na estruturação e arquitetura de diversos projetos goianos que utilizam o framework.

Agenda

Durante o curso descobriremos por que utilizar o AngularJS, visitaremos os temas recorrentes durante o desenvolvimento de um WebApp e quais são as melhores práticas de desenvolvimento já buscando uma aproximação com o Angular 2.

1. Introdução

  • Informações de mercado
  • História
  • Hello world
  • Primeiro contato
    • Por que?
    • SPAs
    • O que é o AngularJS?

2. Agenda de Contatos

  • Configuração do Ambiente
  • Definindo uma Aplicação
  • Expressões
  • Estrutura de um contato
  • Trabalhando com dados
  • Atualizando nossa interface
  • Entendendo o $scope
  • Exibindo e ocultando elementos da interface
  • Listando múltiplos contatos
  • O que aprendemos?

3. Agenda de Contatos, parte 2

  • Filtros de dados

  • Trabalhando com imagens

  • Cadastrando novos contatos

  • Organizando as informações com abas

  • O que aprendemos?

4. Agenda de Contatos, parte 3

  • Criando diretivas

    • Anatomia

    • Lógica

  • Trabalhando com validações
  • Organização de código via dependências
  • O que aprendemos?

1. Introdução

Indeed Jobs

Google Trends

Vagas em Goiânia

História

  • Criado em 2009 por Miško Hevery 
  • Projetado para auxiliar Web Designers sem experiência com desenvolvimento a interagir com o servidor
  • 1 Aplicação (fonte)
    • GWT - 3 devs, 6 meses
    • AngularJS - 1 dev, 3 semanas

Hello World

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <div ng-app>
      <label for="nome">Nome</label>
      <input type="text"
             name="nome"
             id="nome"
             ng-model="varNome"
             placeholder="Insira seu nome aqui">
      <hr>
      <h1>Hello {{varNome}}</h1>
    </div>
    <script src="http://code.angularjs.org/1.3.15/angular.min.js"></script>
  </body>
</html>

Por que?

O AngularJS é uma boa escolha quando se está criando uma aplicação dinâmica que utilize javascript.
 

  • Ajuda a organizar o JS
  • Super produtivo
  • Trabalha bem com jQuery
  • É fácil de testar

But before,
Single Page Applications

But before,
Aplicações baseadas em APIs

Uma API, vários clientes

O que é o AngularJS?

Um framework javascript client-side para adicionar interatividade ao HTML

MV*

Componentes

One-Way Data Binding

Two-Way Data Binding

Three-Way Data Binding?

Estrutura da aplicação

Fluxo da aplicação

2. Agenda de contatos

Baixe as bibliotecas

Módulos

<!DOCTYPE html>
<html ng-app="agenda">
  <head>
    <meta charset="utf-8">
    <title>Agenda</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
  </head>
  <body>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>
var app = = angular.module('agenda', [ ]);

app.js

index.html

Expressões

<!DOCTYPE html>
<html ng-app="agenda">
  <head>
    <meta charset="utf-8">
    <title>Agenda</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
  </head>
  <body>
    <div class="container">
        {{3 + 4}}
    </div>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

index.html

?

Informações de contato

  • Nome
  • E-mail
  • Telefone
  • Aniversário
  • Site
  • Localização
  • Redes Sociais (Facebook, Twitter, Linkedin, Github)

Trabalhando com dados

var contato = {
    nome: 'Jean Lucas de Carvalho',
    email: 'jlcarv@live.com',
    telefone: '(62) 8162-1104',
    localizacao: {
        descricao: 'Casa, Rua Campo Grande',
        latitude: 0,
        longitude: 0
    },
    social: {
        facebook: 'JeanLucasCarvalho',
        twitter: 'JLCarv',
        linkedin: null,
        github: 'JLCarvalho'
    }
};

Controllers

(function(){
    var app = angular.module('agenda', []);

    app.controller('AgendaController', function($scope){
        $scope.contato = {
            nome: 'Jean Lucas de Carvalho',
            email: 'jlcarv@live.com',
            telefone: '(62) 8162-1104',
            localizacao: {
                descricao: 'Casa, Rua Campo Grande',
                latitude: 0,
                longitude: 0
            },
            social: {
                facebook: 'JeanLucasCarvalho',
                twitter: 'JLCarv',
                linkedin: null,
                github: 'JLCarvalho'
            }
        };
    });
})()

app.js

Binding

...

<div class="contatos">
    <div class="contato">
        <h1>Jean Lucas de Carvalho</h2>
        <ul class="contato-info">
            <li>
                <span>Telefone</span>
                <h2>(62) 8162-1104</h2>
            </li>
            <li>
                <span>E-mail</span>
                <h2>jeanlucasdecarvalho@gmail.com</h2>
            </li>
    
            ...
    
        </ul>
    </div>
</div>

...

index.html

Binding

...

<div class="contatos" ng-controller="AgendaController">
    <div class="contato">
        <h1>{{contato.nome}}</h2>
        <ul class="contato-info">
            <li>
                <span>Telefone</span>
                <h2>{{contato.telefone}}</h2>
            </li>
            <li>
                <span>E-mail</span>
                <h2>{{contato.email}}</h2>
            </li>
    
            ...
    
        </ul>
    </div>
</div>

...

index.html

Escopo

...

<div class="contatos" ng-controller="AgendaController">
    <div class="contato">

        ...

    </div>
</div>

{{contato.nome}}

...

index.html

?

Exibir/Esconder

...

<div class="contatos" ng-controller="AgendaController">
    <div class="contato">
        <h1>{{contato.nome}}</h1>
        <a href="" class="btn btn-info btn-block btn-lg"
                   ng-click="varEsconder = !varEsconder">
            Exibir Informações
        </a> 
        <ul class="contato-info" ng-show="varEsconder">
            
            ...
    
        </ul>
    </div>
</div>

...

index.html

Múltiplos contatos

...

$scope.contatos = [
    {
        nome: 'Futuring Lab',
        email: 'contato@futuring.com.br',
        telefone: '(62) 3255-****'
    },
    {
        nome: 'Jean Lucas de Carvalho',
        email: 'jlcarv@live.com',
        telefone: '(62) 8162-1104'
    },
    {
        nome: 'Rafael Dias Soares',
        email: 'rafael_gtt@hotmail.com',
        telefone: '(62) 8503-8794'
    }    
];

...

app.js

Múltiplos contatos

...

<div class="contatos" ng-controller="AgendaController">
    <div class="contato" ng-repeat="contato in contatos">
        <h1>{{contato.nome}}</h1>
        <a href="" class="btn btn-info btn-block btn-lg"
                   ng-click="varEsconder = !varEsconder">
            Exibir Informações
        </a> 
        <ul class="contato-info" ng-show="varEsconder">
            
            ...
    
        </ul>
    </div>
</div>

...

index.html

Output

http://embed.plnkr.co/RWmxekYMFPvazizvPSkr/preview

O que aprendemos?

  • Módulos
  • Expressions
  • Controllers
  • Diretivas
    • ng-app
    • ng-controller
    • ng-click
    • ng-show
    • ng-repeat

3. Agenda de contatos

Parte 2

Filtros

...

<h1>{{contato.nome | uppercase}}</h1>

...

index.html

Exemplos

Receita de bolo

{{ dado | filtro:opções }}
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}} // 12/27/2013 @ 12:50AM
{{'futuring' | uppercase}} // FUTURING
{{'Jean Lucas de Carvalho' | limitTo:8}} // Jean Luc
<li ng-repeat="product in store.products | limitTo:3">
<li ng-repeat="contato in contatos | orderBy:'-nome'">

Alterando nosso contato

...

$scope.contatos = [
    {
        nome: 'Futuring Lab',
        email: 'contato@futuring.com.br',
        telefone: '(62) 3255-****',
        foto: 'https://avatars2.githubusercontent.com/u/1238663'
    },

    ...
 
];

...

app.js

Exibindo imagens

<div class="contato" ng-repeat="contato in contatos">
    <h1>{{contato.nome}}</h1>
    <img src="{{contato.foto}}" class="img-responsive"/>

    ...

</div>

index.html

O navegador tentará exibir a imagem antes do angular obter o resultado da expressão.

<div class="contato" ng-repeat="contato in contatos">
    <h1>{{contato.nome}}</h1>
    <img ng-src="{{contato.foto}}" class="img-responsive"/>

    ...

</div>

index.html

Com o ng-src o angular cuidará de exibir a imagem quando a expressão for evaluada.

Desafio

Como deixar nossa agenda dinâmica?

Agenda dinâmica

  • Criar formulário
  • Salvar conteúdo do formulário em nossa lista de contatos
  • Exibir novo contato na interface

Criando nosso formulário

...

<form class="form" name="novoContato">
    <div class="form-group">
        <label for="inputNome">Password</label>
        <input type="text" class="form-control" id="inputNome" placeholder="Nome">
    </div>
    <div class="form-group">
        <label for="inputTelefone">Telefone</label>
        <input type="text" class="form-control" id="inputTelefone" placeholder="Telefone">
    </div>
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <button type="submit" class="btn btn-default">Cadastrar</button>
</form>

...

index.html

ng-model

Salvando os dados

...

<form class="form" name="novoContato" ng-submit="adicionarContato(contato)">
    <div class="form-group">
        <label for="inputNome">Password</label>
        <input type="text" class="form-control" ng-model="contato.nome" id="inputNome" placeholder="Nome">
    </div>
    <div class="form-group">
        <label for="inputTelefone">Telefone</label>
        <input type="text" class="form-control" ng-model="contato.telefone" id="inputTelefone" placeholder="Telefone">
    </div>
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" ng-model="contato.email" id="inputEmail" placeholder="Email">
    </div>
    <button type="submit" class="btn btn-default">Cadastrar</button>
</form>

...

index.html

Salvar?
Editar?
Excluir?

Organizando Informações

Criando abas

O que aprendemos?

  • Filtros
  • Formulários
  • Two-way Data Binding
    • ng-model
  • Trabalhar com imagens

4. Agenda de contatos

Parte 3

Reutilizando abas

Manual das diretivas

https://github.com/suissa/angularjs-directive-manual

Made with Slides.com