Série AngularJS – Por onde começar? Qual o melhor livro?

Olá Pessoal,

Resolvi criar esse post para ajudar aqueles que estão querendo começar com o AngularJS, mas não sabem como dar os primeiros passos.

Lets go…

Por onde começar?

Essa é uma pergunta muito comum para quem quer ter o primeiro contato com o framework da Google. Eu também fiz essa pergunta quando me foi apresentado o AngularJS, apesar de que a documentação do framework é boa e está em atualização constante. Algumas coisas não são bem explicadas como deveriam, mas dá pra fazer pelo menos um “Hello world” e tirar dúvidas de como usar algumas funcionalidades do Angular, sem falar que a lista de discussão deles é bem ativa e os próprios desenvolvedores do framework estão lá participando.

Sabemos que se formos no Google.com e realizarmos uma pesquisa sobre AngularJS vai ter bastante post sobre assunto, e alguns de qualidade, mas será o suficiente para você de fato aprender o framework? Depende até onde você deseja ir. Para sair do 0 x 0 o material que está disponível na internet já é mais que o suficiente, mas se você deseja se aprofundar mais no framework e começar a tratar o mesmo para ambientes corporativos, dai terá que entender alguns assuntos mais específicos, pois achei as informações práticas limitadas na documentação. Sem falar que entender angularJS é apenas uma parte da história, o ideal é que você entenda como trabalhar com frameworks JS da mesma forma que você trabalha do lado do servidor, por exemplo unit test, build etc. Eu particularmente estou entrando aos poucos no mundo JS e o Angular está sendo meu ponto de entrada, uma vez que client-side nunca foi meu forte por questões de projetos e fora um trauma que tenho de JavaScript de 13 anos atras, mas hoje acho que ja superei.

Quando me perguntam por onde começar com o AngularJS sempre recomendo na seguinte ordem:

1. Internet: pesquise posts sobre o assunto na Internet, veja aqueles que tem qualidade e comece a ler, e se for prático ja saia metendo mão na massa. Leia a parte teórica que tem na documentação, participe de grupo de discussões como o AngularJS-Brazil  e  o AngularJS-Brasil no Faceboook. Aqui seu objetivo é descobrir o framework, de poder brincar com ele e saber se você curtiu o jeito de “trampar”. Acho que é a melhor forma e mais barata que se deve seguir quando ainda está experimentando se você deve investir tempo e dinheiro no angularJS. No grupo AngularJS-Brazil eu postei uma pilha de hotlinks sobre o framework, é só acessar o grupo e conferir.

2. Livros: Hoje há bastante livro  sobre o assunto comparado a 3 meses atras onde tinham apenas 2-3. Mas o negócio cresceu e temos mais opções.

3. Comunidade: Participe das comunidades ativas do AngularJS. A página no facebook é bem agitada e recentemente criei um grupo no Google Groups AngularJS-Brazil para centralizar posts, links e discussoes sobre o framework.

A seguir alguns livros que recomendo:

1. AngularJS na Prática

É um livro em português sobre o framework, mas ainda está em desenvolvimento. Acho que já passou da hora do autor publicar, pois esse foi o primeiro livro que vi do assunto em português, lá em meados de julho/13. Recomendo o livro para quem quer dar os primeiros passos com o framework. A escrita do autor é bem confortável e os exemplos funcionam. Um detalhe importante é que a parte de server-side é em PHP, mas não vejo isso como problema, é só pegar o conceito e aplicar na linguagem que você trabalha.

2. Recipes with Angular.js
É um livro bacana que recomendo para quem já está mexendo com AngularJS. Não precisa ser um expert, mas se você já aprendeu a base do framework já consegue fazer um pequeno projeto (nem que seja um crud) usando o AngularJS. Esse livro vai dar umas dicas legais, é bem pequeno e prático. Pena que o autor não mostra o resultado do código, apenas joga e o resto fica direcionado para pegar no github dele. Mas ele organizou bem os arquivos no github e você pega por capítulo. Recomendo. Foi o terceiro livro que li.

3. Instant AngularJS Starter

Esse livro aqui não é dos melhores. Em termos teóricos até ajuda, mas parece que o autor pegou o que tem na documentação, jogou no livro e tratou apenas deixando a escrita direcionada para o modelo de livro. Eu li e gostei como ele conceituou, já que no início tinham coisas que não eu sabia o porquê e a forma que ele explicou ficou melhor de entender. Muitos dos códigos que estão no livro estão quebrados, parece que o copy/paste não foi feito da melhor forma. Por um lado foi minha primeira oportunidade em abrir a fazer um fix em um código angularJS escrito por outra pessoa. Pelo preço do livro na versão kindle talvez vale a pena comprar só pra não aprender pelo caminho feliz.

4. ng-book (http://www.ng-book.com/)

É um livro que ainda não li, mas vi que quem leu gostou do livro. Está na minha lista. Aqui

5. Mastering Web Application Development with AngularJS

Esse é o que estou começando a ler. Os comentarios de quem já leu são animais. Parece ser um bom livro. Estou esperando chegar o meu exemplar, pois pela quantidade de página prefiro ler na versão impressa, além de poder usar o marcatexto, escrever no livro, etc. O preço é diferente, $40 doletas e ainda tem IOF + Frete. A versão Kindle tá mais em conta. Assim que terminar de ler posto um review aqui no blog.

Estou com um post em draft com review dos livros que já li. Vou postar em breve e com mais detalhes.

Bom, é isso pessoal. Vou ficando por aqui e espero que tenham gostado da série AngularJS, foi mais de um mês postando e compartilhando com vocês há muito mais coisas sobre o framework (claro) e quem sabe fica para uma outra série mais lá na frente?

Abracos, see ya!!!

Série AngularJS Resolvendo problemas com rotas AngularJS 1.2.x

Olá Pessoal,

O post de hoje é bem curto. A ideia aqui é mostrar o quanto é importante acompanharmos as releases do AngularJS a partir da versão 1.1.6. O angularjs team separou as rotas e agora temos um JS específico, então precisamos informar isso no head do nosso html, caso contrário vamos ter o problema a seguir:

agendaangularversionroutefix

O error: Fixing $injection:modulerr

E para resolver é simples, basta adicionar o trecho a seguir no head

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js”></script>

Pronto, resolvido. Uma forma legal que venho fazendo para acompanhar os updates do angularJS é ficar ligado nos posts no blog do framework. Tudo acontece lá: http://blog.angularjs.org/ . No meu caso é minha home page :).

Abracos, see ya!!

Série AngularJS Criando um dialog com AngularJS + AngularUI

 

Olá Pessoal,

Mais um post da série AngularJS e hoje vamos ver como criar um dialog. Eu lembro que uma vez tentei fazer isso em JavaScript puro e foi muito sofrimento, mas      o angular-ui nos facilita muita coisa.

Lets go..

 

Starting…

Como sempre, vou considerar que você já vem acompanhando a série e entende a estrutura básica com o angular e rotas. O projeto que tem os exemplos da série está no meu GitHub

Requisitos

  • – angular-ui-bootstrap-modal.js
  • – angular-ui.js

Para o dialog, é desse cara que precisamos. Você pode baixá-lo no projeto pegando o arquivo no meu github.

Na página do angular-ui tem exemplos bacanas usando o modal http://angular-ui.github.io/bootstrap/

Vamos agora colocar a mão na massa

Development

Step 1

Antes de começar, a estrutura aqui é baseada no meu projeto que está no github. Se você tem o seu basta fazer a adaptação onde atualizar. (O que?)

Primeiro passo é atualizarmos a declaração do module no arquivo app.js  deixando assim:

var app = angular.module(“myapp”, [ “ui”, “ui.directives”,”ui.bootstrap.modal” ]);

Adicionamos o “ui.bootstrap.modal”  (o “ui.directives” não é requerido para esse exemplo).

Step 2

Agora vamos atualizar o index.html informando para carregar .js  que tem a funcionalidade do dialog:

<head>

<script src=“js/lib/angular-ui-bootstrap-modal.js”></script>

<link rel=“stylesheet” href=“css/bootstrap.css”>

</head>

No meu caso esse é o caminho.  Adicionei o css do bootstrap para ficar com layout agradável.

Step  3

Vamos criar o controller que vai cuidar do dialog. No meu arquivo recipeController.js adicionei o seguinte controller:

var MyCtrlDialog = function($scope) {

$scope.open = function() {

$scope.showModal = true;

};

$scope.ok = function() {

$scope.showModal = false;

};

$scope.cancel = function() {

$scope.showModal = false;

};

};

A leitura é bem simples: quando a função open for chamada ele deve mostrar o modal, quando a função  ok ou cancel for chamada o modal deve ser fechado.

Step 4

Como estou usando rotas, vou adicionar uma para o dialog. Não é requerido que seja feito com rotas, desde que ao carregar o HTML os .js sejam carregados, tudo vai funcionar.

No arquivo app.js adicionei a rota:

when(“/dialog”, {

templateUrl : “dialog.html”,controller:MyCtrlDialog

}).

Step 5

Agora vamos criar o arquivo dialog.html para vermos o resultado:

<!– In this dialog is using angularui –>

<body>

<!– Criando um botão para abrir o modal –>

<button class=“btn” ng-click=“open()”>Open Dialog</button>

<!– My dialog Content –>

<div modal=“showModal” close=“cancel()”>

<div class=“modal-header”>

<h4>Modal Dialog</h4>

</div>

<div class=“modal-body”>

<p>Teste dialog. Are you sure?</p>

</div>

<div class=“modal-footer”>

<button class=“btn btn-success” ng-click=“ok()”>Ok</button>

<button class=“btn” ng-click=“cancel()”>Cancel</button>

</div>

</div>

</body>

 

Testando

 

angularjsdialog

 

angularjsdialogopened

 

Simples, não?

Abraços, see ya!!

 

Série AngularJS Usando o $watch

Olá Pessoal,

No post de hoje vamos ver como usar o $watch no angular. Mas pra que serve? Bem, se você já trabalhou com JSF ou  JavaScript puro certamente algum dia teve que implementar em algum elemento alguma ação após alteração de um campo.  Por exemplo, após digitar o usuário, digitar o email e senha habilitamos o botão login. É isso que vamos ver com o $watch, ele faz sync com um elemento.

Lets go…

Starting…

Para esse exemplo vamos usar o projeto recipeangularexample, que já estamos usando nos últimos posts, portanto vou considerar que você tem a estrutura do projeto conforme estamos evoluindo desde o último post. Se você baixar a versão do GitHub terá o projeto completo com tudo que veremos na série.

Development

A implementação é bem simples, vejamos:

Alterando recipeController.js

var recipeController  = function ($scope){

       $scope.name=””;

       //é aqui que está mágica

       $scope.$watch(“name”,function(newValue,oldValue){

             if($scope.name.length > 0){

                    $scope.greeting = “Greeting ” + $scope.name;

             }

       });

};

Alterando o arquivo watch.html

<body>

<div>

<input type=“text” ng-model=“name”>

<p>{{greeting}}

</div>

</body>

Resultado:

angularjsrecipewatch

Simples, não?

Abracos, see ya!!

SérieAngularJS: Internacionalização com Angular-Translate

Olá Pessoal,

No post de hoje vou mostrar como suportar internacionalização para quem está usando AngularJS.

Lets go

O angularJS suporta internacionalização ?

Sim, mas com limitação, e muita até. Como, por exemplo, ele consegue suportar internacionalização para datas, números, mas não suporta internacionalização para o conteúdo da sua aplicação.

E o que faço?

Se você pesquisar na internet pode encontrar alguns frameworks  que ajudam na internacionalização. Eu pesquisei bastante e testei alguns, e o melhor foi esse aqui:

Angular-Translate

http://pascalprecht.github.io/angular-translate/#/guide

Github

https://github.com/PascalPrecht/angular-translate/wiki/Getting-Started#configuring-translateprovider

Pelo seguinte:

  • Fácil de usar;
  • Boa documentação;
  • Comunidade bem ativa;
  • Releases constantes;
  • Bug fixing curto;

O ponto negativo que adiciono é que o autor colocou o nome dele na declaração do uso da API. Acho isso ruim, ‘pascalprecht.translate’. Se a API vira e o Google adota, iai? Certamente eles vão tirar esse nome e deixar algo global. E a migração para o novo nome é fácil?

Outro ponto negativo é a forma de obter o arquivo .min.js É preciso instalar o bower e rodar

bower install angular-translate 

Por que não disponibilizar o .min.js on-line no próprio github?

Para quem usa JSF, por exemplo, está acostumado a ter um arquivo .properties que possui uma key:value  para tradução e o JSF se vira para saber o idioma do browser e faz o translate. Mas com AngularJS é um pouco diferente. Claro que não teremos um arquivo .properties, mas sim um arquivo .js que funciona da mesma forma key:value.

Na prática

Vou considerar que você já tem uma aplicação com Angular e agora quer apenas internacionalizar. Veja os steps:

Passo 1

O que achei ruim, apesar de ser rápido, é instalar o bower para obter o .min.js

Se você tiver o git bash, apenas digite

npm install -g bower 

Dúvida, veja aqui: https://github.com/bower/bower

Passo 2

Após ter instalado o bower vamos gerar o min.js do angular-translate  no git bash

bower install angular-translate

Aguarde terminar a instalação e veja onde está o .min.js Será algo assim:

Xxx\bower_components\angular-translate

Passo 3

Copie o arquivo angular-translate.min.js para o seu projeto. No meu caso eu tenho uma pasta lib somente para js, veja:

angularjsangulartranslatelib

Passo 4

Crie um arquivo que terá a internacionalização, ou seja, que terá o que você gostaria que fosse traduzido (eu chamei de inter.js). O conteúdo é bem simples, veja:

$app.config([‘$translateProvider’, function ($translateProvider) {

  $translateProvider.translations(‘en’, {

    ‘label.question.movie’: ‘What is your favorite movie?’,

    ‘label.title’: ‘Vote in Movie?’,   

  });

  $translateProvider.translations(‘pt’, {

    ‘label.question.movie’: ‘Qual filme você gosta mais?’,

    ‘label.title’: ‘Vote no Filme’   

  });

  $translateProvider.preferredLanguage(‘en’); //temos que dizer qual é a default.

}]);

Passo 5

Após ter criado o arquivo que contém as mensagens de tradução, precisamos dizer ao angular que vamos usar esse cara para isso. No arquivo js que você cria o module, vamos adicionar o translate (no meu caso é o arquivo application.js)

var $app = angular.module(‘app’,[‘ngResource’,’pascalprecht.translate’]);

Passo 6

No meu arquivo index.html preciso carregar o .js do angular-translate. Veja:

<body>

<script src=“js/lib/angular.js”></script>

<script src=“js/lib/angular-resource.js”></script>

<script src=“js/lib/jquery.js”></script>

<script src=“js/lib/angular-translate.min.js”></script>

Outros codigos omitidos aqui

</body>

 Passo 7

Agora vamos chamar as keys que criamos no inter.js  no nosso arquivo .html . Temos várias opções, veja:

Usando Diretivas

<H2 translate=“label.title”></H2>

Usando expression

{{movie.name}}

Passo 8

Salve as alterações, build o projeto e suba.

angularjsvotenomovieapp

Um ponto importante: a tradução não vai ocorrer com base no idioma definido no browser e sim o que você setou como preferido. Infelizmente ainda não tem essa feature. Daí, para que o usuário queira ver aplicação no idioma dele, você terá que colocar algo como a bandeira do país na aplicação, e ao clicar o valor do preferred é alterado.  Na documentação tem um exemplo.

GitHub

https://github.com/camilolopes/workspaceAngularJs

Vou ficando por aqui. Caso queiram ver aplicação movie-vote usando API basta ir ao meu github e fazer clone ou download e executar

Abraços, see ya!!