AngularJS Primeiros passos

O AngularJS disponível desde 2010 mas mais comum a partir de 2012, é uma daquelas tecnologias que você ouve falar bastante, mas talvez nunca parou para estudar a fundo. Muito conhecida também por ser apoiada e mantida pelo Google. A partir de agora, teremos uma categoria no HTML5dev para tratar dessa poderosa ferramenta.

Este tutorial é o ponto de início, mas durante a série de artigos, vamos explicar o que é o AngularJS, onde você deve utilizá-lo e onde você não deve. Também além das muitas vantagens(muitas mesmo), acreditamos que você também precisa conhecer quais são os seus pontos fracos, afinal, é uma ferramenta criada por humanos, e então, seria muito previsível dizer que só existem coisas maravilhosas no Angular, ou que é a melhor tecnologia que existe, ocultando suas dificuldades.

O que é AngularJS?

Uma boa definição para o AngularJS é que ele é um excelente Framework MVC Front-end.

Beleza que definição espetacular. Agora traduz:

Framework

Imagine que você é um desenvolvedor web experiente, ou seja, você já criou centenas, talvez milhares de códigos em JavaScript, que é na minha modesta opinião a linguagem mais incrível que eu já vi (Nessa hora o pessoal de C, Java, Python piram kkkk brincadeira gente.), é sério. Aí nesses centenas de códigos que você criou, você aprendeu muito, então, é lógico (eu espero) que os seus códigos atuais sejam bem melhores e mais organizados que os primeiros. Então imagine seguindo nessa ordem que você cria um padrão de desenvolvimento, e você descobre que todos os projetos que você participou tem muitas coisas em comum, todos eles tem formulários, tem botões, tem interação com o usuário, e o bom desenvolvedor não faz o mesmo trabalho várias vezes, ele cria algo que possa reutilizar em projetos semelhantes. Então você agrupa todos os seus melhores códigos que poderão ser utilizados em projetos de qualquer natureza e vai otimizar a sua vida e agilizar o seu desempenho. E você tem um framework.

Eu já vi muitas definições para Framework e biblioteca, mas uma das mais interessantes dizia em parte, o Framework toma conta da sua aplicação, e a Biblioteca, você escolhe qual recurso dela quer utilizar na sua aplicação. jQuery por exemplo é uma biblioteca, eu posso utilizar muitos recursos do jQuery, ou apenas alguns. Mas quando eu construo minha aplicação dentro de um framework eu sou obrigado a no mínimo estudar um pouquinho sobre:

  • Estrutura do Framework
  • Documentação dos principais recursos que vou utilizar
  • Boas práticas (fóruns, stackoverflow( um site que você deveria conhecer))
  • Estabilidade e manutenção
  • Como o mercado encara este Framework(Existe um problema no mundo corporativo, chamado Sistemas Legados, imagine que o criador ou fabricante do produto deixe ele de lado ou venha a falência, como é que fica a manutenção disso...ou o desenvolvedor sai da empresa, e para encontrar outro que conheça a ferramenta)
  • Com que frequência a tecnologia é atualizada e como funciona a retrocompatibilidade( falaremos disso num outro post sobre AngularJS 2.o)

Em resumo pense em:

velocidade e agilidade no aprendizado e construção da aplicação  X manutenção, estabilidade e versionamento.

Falamos sobre Framework, que eu prefiro pensar numa caixinha zipada com um monte de código.

Agora, falemos sobre o que significa ele ser MVC.

MVC

Model View Controller, poderíamos muito bem detalhar todo o processo do MVC, mas faz assim, se quiser conhecer detalhes do MVC, dá um google, que você vai achar muito material legal sobre o que é a estrutura MVC. Simplificando, é um modelo de trabalho, é colocar ordem na casa, é separar o visual da sua aplicação, site ou aplicativo, dos dados e da lógica de programação.

Model - Armazena as informações que serão acessadas pelo controller e exibidas na View.

Controller - Controla todas a regra de negócio tudo que pode e o que não acontecer na sua aplicação.

View - É a parte visual da sua aplicação, pense bem no que isso significa, com uma arquitetura organizada, você pode mudar o visual do seu App ou Site e toda a programação continua intacta.

Trocando em miúdos, MVC é uma bênção. E digo mais, é o que separa os meninos dos homens.

E agora Front End

Front-end

É o termo designado para desenvolvedores que atuam do lado do cliente, são divididos em dois tipos.

Front-end Design

  • Focado em criação
  • Usabilidade e experiência do usuário(UI,UX)
  • Identidade visual
  • HTML e CSS em nível Hard especialmente semântica no HTML5 e CSS3.
  • Noções de Js (JavaScript)

Front-end Developer

  • Focado na programação
  • Imprescindível dominar HTML
  • Conhecer bem CSS
  • Ser o cara em JavaScript, não é alert e confirm não, isso é passado, é a programação pesada do Js. E atual, e o Js mudou muito.(Ainda bem)

AngularJS é um Framework MVC Front-End

Então tudo faz sentido agora, AngularJS é um conjunto de códigos leves e práticos, organizados no modelo MVC de programação e utilizado para a parte Front-end da Aplicação.

Onde usar AngularJS

AngularJS foi criado para Web Apps, ou seja aplicações web, sejam elas corporativas, ou mesmo um aplicativo híbrido feito em HTML5 para rodar num smartphone ou num tablet.

O grande barato de AngularJS são os recursos para agilizar o desenvolvimento, e com base nele já foram criados outros recursos que agilizam o desenvolvimento de um aplicativo em HTML5. Por exemplo o Ionic, teremos nessa categoria do HTML5dev uma série de tutoriais sobre Ionic, por realmente gostamos das experiências que temos feito com ele e com AngularJS e Firebase.

Onde não usar AngularJS

Pense não só no AngularJS, mas no EmberJS no BackboneJS e tantas e tantas outras ferramentas, apenas como o que realmente são: Ferramentas de trabalho.

AngularJS não deve ser utilizado para todo novo site que você vai participar, talvez utilizá-lo pode até prejudicar o projeto, exemplifico com a ilustração do Porsche Panamera para 20 pessoas, será que o carro não presta por que não cabem 20 pessoas? Ou será que era melhor comprar um ônibus se o foco era esse?

Se for fazer um site e não irá utilizar os recursos do Framework, não utilize o Framework, talvez seja melhor estudar um pouquinho mais de JavaScript e CSS, e verá que muitas vezes nem jQuery é preciso.

Pense nisso.

Como utilizar o AngularJS?

Acesse http://angularjs.org e clique no botão Download.

Atualmente as duas versões mais comuns são 1.3.X e 1.4.X em breve sairá a versão 2 e aí é assunto para outro artigo.

A diferença entre 1.3 e 1.4 é o suporte aos navegadores que marcaram época(negativamente falando, é claro) IE 7 e companhia...

angularjs

Embora na imagem, 1.3 esteja como estável, e 1.4 como último lançamento, você pode baixar qualquer um dos dois, recomendo 1.4

E vejamos o código que é adicionado como exemplo no site do AngularJS, vamos dar uma pequena modificada. Explicando o código abaixo, quando utilizamos o AngularJS, o fazemos adicionando uma tag script como na linha 3.

Neste caso estamos usando um CDN(Content Delivery Network) do Google, ou seja estamos utilizando os servidores do Google para baixar nosso arquivo angular.js isso é uma boa prática em aplicações on-line, devido a vários fatores que explicaremos num outro artigo.

Perceba alguns atributos que foram adicionados ao nosso HTML. Por exemplo ng-app no elemento raiz na linha 1.

ng-model na linha 9 está com o nome yourName, nem me dei o trabalho de colocar seuNome, desculpe por isso, é meio tarde e já tirei o print da tela kkkkk, mas quero chamar a atenção para um detalhe muito, muito interessante, repare que com dois pares de chaves, ou chaves duplas, conseguimos imprimir na tela o valor do model yourName. Isso é demais!!!!

Para quem escrevia essas coisas na unha, sabe como é trabalhoso. O melhor é que é leve e fácil para se trabalhar.



angularjs css

angularjs com html5

Bom eu preciso ser muito sincero que esse é só o primeiro artigo, e que esse exemplo é realmente muito simples. Mas e se durante a série de artigos, formos melhorando os exemplos e abordando assuntos mais hard, tais como performance, ou mesmo bug fixies e dificuldade da comunidade? Mande sua dúvida ou deixe uma mensagem.

Veja o resultado em tempo real no Code Pen http://codepen.io/glauciodaniel/pen/mJqwmR

 

Dúvidas e sugestões por favor deixe um comentário, se desejar assine nossa Newsletter (no final da página) ou siga nossos perfis do Twitter, Facebook ou Google+ para ser avisado de novos posts e dicas do HTML5.

 

Compartilhe este Post:

Posts Relacionados

  • Erick Silva

    Muito bacana este tuto de iniciação, era meio complicado entender os includes e tudo mais. Valeuuuu! =D

    Abraço!

  • Pingback: getdate completo no Javascript @ JotaQuery()

  • Pingback: Ext.MessageBox o alert do Ext JS @ JotaQuery()

  • Jadir Rodrigues

    Prezado,

    É possivel fazer essa implementação no asp.net do Visual Studio 2008?

    • Sim, da mesma maneira que se faz em ASP, PHP ou outras… Pois o Ext JS não usa a camada da linguagem ou framework e sim o HTML apenas.

  • Pingback: Metódo setTimeout() do Javascript @ JotaQuery()

  • Pingback: Usando as janelas do ExtJS: Ext.Window @ JotaQuery()

  • Pedro

    Muito bacana este tuto sobre windows. =]

  • Pingback: ExtJS String - .leftPad @ JotaQuery()

  • Heverton Carneiro

    Olá… Como vc fez para que os textos dos botões fiquem em português? Já tentei várias coisas, mas continua em inglês…

  • Olá… Implementei este Ext.MessageBox e estou com um problema, na confirmação de exclusão em uma GridView de pagina .aspx ele não está esperando a confirmação, passa direto ! a tag é a seguinte:

    Aguardo ae fera !
    Abras

    • Olá Wesley,

      Seguinte… se entendi o que esta tentando fazer é executar alguma coisa depois do cara confirmar a exclusão por meio do Ext.MessageBox.confirm. Se for isso basta passar um 3° parametro e verificar se o usuário clicou em Ok. Exemplo:

      Ext.MessageBox.confirm(‘Titulo do alert’,’Deseja realmente, com toda certeza, sem sombra de dúvida, valendo sua vida que vai excluir realmente?’,function(btn){
      if(btn=’yes’){
      //script da exclusão…
      }
      });

  • George

    Massa. Muito útil este seu exemplo. Bom para eu que esto estudando esta library. Seu blog já está no meu favoritos. Continue postando!!!

  • Olá George,

    Vlw cara pelo reconhecimento!

    Pode deixar postaremos sempre que possível… mesmo o tempo sendo tão corrido.

    Abs…

  • George

    João,

    Confirme se entendi certo.
    No exemplo acima você está imprimindo qualquer conteúdo no ‘corpo’ do panel ou window, certo? Então se for um javascript no padrão ext, como um formlário por exemplo, este formulário seria montado dentro do panel ou window?
    Se isso for verdade, seria esta uma forma de navegação entre os formulários de uma aplicação?

    valeu!

  • Olá George,

    Sim é uma forma de navegação, mas não a única e nem necessáriamente a melhor forma. Isso vai depender de real necessidade.

    Caso precise fazer um formulário, existe uma classe pronta no Ext para isso, que é: Ext.FormPanel

    Att,

    João Henrique

  • Olá, preciso realmente atribuir a variável de conexão para uma variável global?

    • Fala Juvencio, tudo certo?

      No exemplo eu atribui a conexão a uma variável global para que ela esteja disponível em todo o meu script para que se eu colocasse dentro de uma function não tivesse problema. Você também pode utilizar uma variável comum só que a mesma deve ser declarada fora da function, no topo do script para que esteja disponível da mesma maneira. Isso se trata de escopo de variáveis.

      Beleza? Abraço.

  • Deolndo

    Eu tenti fazer este formulário, mas não consegui.
    1- quantos arquivos eu tenho que criar tipo .js, .html ou outros

    Obrigado

  • no segundo periodo da dica
    quando vc diz:
    Abaixo vou mostrar um exemplo simples de padrão Json:

    eu tenho q colocar o php p exibir isso ai?

    como seria o processo com o php p/ alimentar esse combo?

    se puder me ajuda…

    criei uma função q abre uma window com o combo dentro só p testar copiei tudo q falou ai, mas n consegui retornar os resultados do php?

    o q eu devo fazer? caso eu tenha uma tabela simples no banco como:

    create table usuario(
    id
    nome
    )

    o q eu deveria criar com php após a consultar essa tabela p q ele preencha o combo?

    • Olá Jr.

      O seu arquivo PHP deve simplesmente resultar em imprimir na tela (echo) os dados do seu select no formato JSON como no exeplo do post onde estou imprimindo duas linhas de uma tabela.

      Adicione no seu objeto Json o paramêtro autoLoad:true ou após o seu objeto chame o método store.load() para que o seu PHP seja carregado. Se ainda assim não mostrar os dados na sua combo adicione os paramêtros:

      displayField:’name’,
      valueField:’id’,
      mode:’local’

  • Bruno

    Acho que faltou um comando pra ativar o form não?
    Aqui não está aparecendo também.
    tentei colocar MyForm.show(); no final mas tb não apareceu.

  • acho desnecessario fazer isso.
    muito mais facil fazer assim

    foreach ($_POST as $key => $value) {
    $$key = $value;
    }

    pronto.. seria a mesma coisa de voce colocar $var = $_POST[‘var’];

    executando o codigo acima é só colocar

    echo $var;

    pronto!

  • ademir Cerqueira

    Rpz você é o cara!!!!!!!

  • Pingback: HTML5 Dev - HTML5 para Desenvolvedores Web - Apresentações - Google Web Fonts – Habilitando Efeitos()

  • Weslley

    Olá gostei dos seus posts sobre como usar o bootstrap, não pare de postar sobre como usar esse framework se é que posso chamar assim!

  • Muito bom!

    Você poderia explicar como customizar esses botões…

    • Marco

      Olá Sandro.
      Supondo que você use no desenvolvimento o Chrome ou Firefox, ambos os browsers possuem ferramentas de WebDesigner. No Firefox você pode instalar o Firebug como complemento.
      Ao visualizar a página clique com o botão direito do mouse no item que deseja customizar (no seu caso o botão).
      Abaixo o navegador irá abrir uma guia nova. Na região da esquerda você verá o item Estilo (utilizado pelo CSS) com o código CSS, o nome do arquivo e a linha onde se encontra o estilo do botão que deseja customizar).
      altere nesse espaço conforme seu gosto e quando o botão ficar do jeito que você deseja, vá até o arquivo CSS e edite o código conforme as modificações feitas na aba estilo por você.
      Espero ter ajudado.
      Abraço
      Como dica, durante o desenvolvimento uso o Firefox como o Firebug instalado.

  • Excelente post , muito util só valew ….

  • Cleberson

    Excelente texto, muito bom.

  • Obrigado por ajudarem a exclarecer o que é HTML5.
    estou estudando o assunto, na area de cadastro e login mais ainda, se tiverem alguma sugestao eu agradesso.
    grato

  • Pingback: HTML5dev - Homepage()

  • Pingback: HTML5dev - Homepage()

  • Pingback: HTML5dev - Homepage()

  • Rômulo

    O Google Webmaster Tools agora de chama Google Search Console, por acaso na mesma data em que esse post foi publicado. Mudaram de nome porque agora o painel não é só web, também contém dados de search para apps.

    • Glaucio Daniel

      Olá Rômulo, muito obrigado pelo seu comentário, vamos ajustar o texto para refletir essa atualização, o legal da web é isso, todo mundo se ajudando em compartilhar conhecimento.

  • Taiolor Morais

    Parabéns!!! Excelente!!!

  • Eduardo Engelmann

    E ai Gláucio, muito bom cara, parabéns à dupla!
    Posso dar uma sugestão? Vou dar assim mesmo, rs; na sua página do facebook, crie uma página para a HTML5dev e quando lançar videos novos divulgue no face, google plus, linkedin etc. Cara, meus vídeos cresceram demais as visualizações. E claro, solicite que curtam sua página. O Google até já me enviou uma cartinha para eu retirar minha grana.
    Abraços!
    Engelmann

    • Glaucio Daniel

      Grande Engelmann, fiquei muito honrado com vosso comentário, muito obrigado! Sobre as dicas, vamos divulgar sim, a ideia é lançar um vídeo a cada quinze dias ou por semana até lançarmos os cursos, depois continuaremos lançando alguns.

      Muito obrigado, e aceito mais sugestões, e parabéns pela TV Ensinar tenho acompanhado sempre.

      Grande abraço,

      Glaucio Daniel

  • Anthony Rafael Ribeiro

    Ótimo post. Muito interessante

  • Pingback: Bootstrap - Criando Tabelas()

  • Pingback: O que é um Web App e o que AngularJS tem haver com isso?()

  • Breno

    Gostaria de saber como faco para desabilitar tabs usando asp.net

  • Rafael Guimarães dos Santos

    Opa, ja fiz algo algum dia, dai tive que fazer novamente e decidi procurar…
    Funcionou direitinho… Só um detalhe, no seu for em vez de aparecer o sinal “<", apareceu & lt 😀
    Valews t+

  • Thiago ArteWeb

    Pessoal, parabéns pelo POST, eu tenho duas dúvidas. Eu já desenvolvi aplicativos utilizando o webview.

    1-Tem como utilizar o webview sem internet, ou seja, tipo como fazemos com o servidor apache só que isso dentro do app?
    2-Tem como, utilizando o webview, quando um cliente inserir um dado no banco de dados mysql, gerar uma notificação no celular? Por exemplo, um novo cliente cadastrou no site, daí inseriu no mysql, o app reconhecer isso e dar uma notificação no celular.

    Abraços!

    • Mauricio Vieira

      Bom Thiago como eles falaram… caso app não precise acessar a internet rodando localmente no dispositivo é sim possível.. afinal você pode baixar algumas paginas da internet e ter o mesmo resultado esperado “WebReaper” ou criar um site local 😉

  • Ricardo Mansini

    Tenho certeza que o evento será ótimo pois quem está a frente são grandes profissionais da área

  • Nelson Fonseca

    Eu estava em dúvida sobre se realmente vale a pena ser um profissional Full Stack. Apesar de ser muito bom para conhecimento e experimento próprio, meu ponto de vista mudou após essa leitura. Gosto do Back End, de fato acho o Front End chato e acredito que as cobranças de um profissional Full Stack seja maior que de um profissional back end ou front end.
    Sou universitário do Rio de Janeiro e vou continuar a investir mais forte em minha formação a fim de ser melhor em Back End que é o que de fato gosto.
    Obrigado pelo artigo.

    • Glaucio Daniel

      Nelson, somos nós que agradecemos seu comentário! Comentários como esse podem ajudar outros leitores que se enquadram na mesma situação. Particularmente a parte final de seu comentário é o segredo, fazer o que gosta!

      Grande abraço,

      Glaucio Daniel

  • Pedro

    Excelente Post !!! Uma dúvida : Teria como eu colocar o vídeo de fundo apenas em uma seção do site ???

    • Glaucio Daniel

      Olá Pedro com certeza, uma maneira de fazer isso é colocando a tag vídeo dentro da seção que você deseja exibir, então essa seção poderá possuir a propriedade position:relative por exemplo e a propriedade overflow:hidden. Isso deve resolver.

      Obrigado por comentar,

      Qualquer dúvida só falar.

  • Rafael

    Olá, um vídeo de 34.MB fica muito pesado ?
    se sim , qual o tamanho ideal ?

    Outra dúvida é onde hospedo o vídeo?

  • Evandro Antônio da Costa de Paula

    Excelente artigo!

    Não conheço muito sobre o AngularJS e seu artigo foi esclarecedor, elogiando mais, o seu site é excelente e tem muito conteúdo rico aqui. Já ganhou um adepto!

    Obrigado pelo conteúdo! 😀

  • sandro

    bom trabalho

  • Pires Miguel

    Não consigo Colocar Os Botões

    • Glaucio Daniel

      Olá Pires, obrigado pelo comentário, qual a sua dificuldade?

  • Dalton

    Ola amigo, estou com um problema, quando adiciona o video no meu servidor interno ele roda, mais quando colaco na ar ele não roda, sabe o que pode ser.

    • Glaucio Daniel

      Olá Dalton obrigado pela pergunta, pode ser o caminho do vídeo, tente acessar o caminho com o vídeo online, tente acessar o vídeo pela url dele.

  • Vitor Melo

    Excelente tutorial.

  • Leonardo Branco

    Muito bom esse artigo. Foi bastante claro e objetivo. Parabéns.

    • Glaucio Daniel

      Muito obrigado Leonardo pelo comentário!

  • TDS RS

    Belo trabalho, Uma dúvida,
    Como coloco os botões como estão abaixo do seu post??
    um ao lado do outro quadrados iguais?

  • Alexandro

    Seria legal um post de como fazer um background interativo como o do site de voces, onde o cursos gera aquela interatividade.
    valeu

  • matheus

    Muito bom, me ajudou bastante 😀

  • Aurelio

    Muito bom o conteúdo, me ajudou bastante.

  • Ismael

    muito bom esse exemplo.
    mas como eu faria pra colocar só em uma parte do site??

  • Alan

    Tutorial fantástico, parabéns!
    Quero mais!

  • David Pereira dos Santos

    Eu acredito que tenho caracteristicas de um Full Stack, mas o que eu gosto mesmo é de fazer front end. Porque uma vez um amigo back end me disse que ele era front end, mas foi ficando chato demais porque alguns problemas de front end, como navegabilidade e incompatibilidade fez ele desistir de front end, pois ele deve dificuldade em resolver. Então pensei é esta área de front end que eu vou fazer e me dei bem, porque tive facilidade em resolver muitos problemas no front. Hoje muitas empresas de ti procuram front end para projetos e tem muita vaga. E agora estou me dedicando ao javascript e angular para ficar ainda mais completo.

  • André

    Obrigado deu certinho !

  • Marcus

    Muito bom artigo! venho pesquisando melhor sobre o termo e ja trabalho bem a mais de 5 anos com criação de layouts em psd, montagem html e css mas nunca fui tão bom em javascript, agora surgiu a verdadeira necessidade em aprender a programar e estou buscando me interar mais em programação, pois sempre me dedique muito mais a parte visual, e como tudo que venho lendo, percebi que é um mundo muito VASTO pra o cara tentar abraçar tudo é simplesmente impossivel,.Pra mim esse termo full stack nao existe, pois pelo que percebi e tenho observado é muito dificil você dominar as duas áreas com tamanha capacidade, e isso se confirma no seu artigo. Quem tenta ser full stack ao meu ver nos dias atuais terá uma grande dor de cabeça.

  • Isa

    Eu amei o post, mas nao sei mexer em HTML entao nao consegui fazer kkk

  • DAVI

    Muito bom o post!!!!
    Parabéns!

  • Vitor Melo

    Vamos ficar no aguardo da nova versão.

  • Marlon

    o flexbox ja é compativel com todos os navegadores ?
    e oque acontece com o float ?
    sera que é o fim do float e do display alline-block e algumas outras propriedades?
    mt bom o post foi uma aula de flexbox excelente, sem deixar duvidas.
    PARABENS…..

    • Glaucio Daniel

      Olá Marlon, obrigado pelo seu comentário!
      O Flexbox está compatível com praticamente todos os navegadores, apenas no IE11 ele ainda é parcial.

      Acredito que o Float continuará sendo importante em situações que você não for utilizar o Flexbox, embora naturalmente a web esteja convergindo para flexbox.

      Mas não tenha dúvida que o Flexbox tem como objetivo assistir de melhor maneira toda a construção da estrutura do layout.

  • Ótimo post, parabéns.
    Estou com uma dúvida quando executo página no Firefox atualizado o vídeo não inicia automaticamente e no IE11 o vídeo não aparece mesmo permitindo o ActiveX. Alguém sabe o que pode estar causando isso?
    Obrigado.

  • Xerxes

    Muito bom.

  • Valter Andrei

    Muito bom artigo, parabéns,!

  • paulo

    Felizmente, do jeito que queria, os outros tutoriais saiam diferentes. muito obgd, parabéns

  • Jupirão Bolado

    Delícia de post, man.
    Como eu n usei essa maravilha ainda? :O

    Thanks ~

  • Neydson

    Muito Obrigado ajudou bastante, está até mais explicativo que o site do w3schools ^^

  • Edson

    em Compiler vc programa o AngularJS? estou querendo aprender sobre…