7 de outubro de 2015

[Livro] AngularJS - Uma abordagem prática e objetiva

Sou meio chato pra indicar livros, mas alguns ganham bons pontos comigo, ou porque tem um conteúdo mais constante com relação ao tempo, ou porque são muito bons começos. É o caso dessa indicação de livro aqui:


Esse livro da editora Novatec é bastante sucinto na sua introdução ao angular, cuidando de vários aspectos do framework. É um livro que não se prende a uma só aplicação, tendo uma discussão bem genérica das aplicações de cada recurso, o que é bom para não prender seu juízo em uma situação só, mas sim compreender pra que cada elemento do AngularJS foi feito.

A versão abordada é a 1.2.22, o que já está um pouco defasada (isso meio q é esperado dos livros, não é? não dá pra publicar livros na mesma velocidade em que a tecnologia evolui) mas é com toda certeza uma das melhores introduções aos conceitos básicos do Angular.

O Índice do livro segue abaixo. A quem não teve nenhum contato com Angular, recomendo os capítulos 1, 2, 3, 4, 8, 9 e 11 com prioridade. Os outros capítulos a meu ver tratam de aspectos mais detalhados, e que complicam o começo, mas ajudam quem já esta compreendendo a aprofundar.

·         Capítulo 1 ■ Introdução ao AngularJS
o   Visão geral
o   Por que outro framework?
o   Conceitos importantes
§  Model-View-Whatever (MVW)
§  Model View Controller – client side
§  SPA – Single Page Application
o   Resumo
·         Capítulo 2 ■ Instalação do AngularJS
o   Preparação do ambiente de desenvolvimento
§  Editores e IDEs mais utilizados no mercado
§  Instalação do Sublime Text
o   Instalação do AngularJS
o   Resumo
·         Capítulo 3 ■ Principais conceitos do AngularJS
o   Configuração da single-page
§  Componentes de aplicação single-page AngularJS
o   Model (Scope)
o   Controllers
o   Controllers aninhados
§  Boas práticas
o   Módulos
§  Módulo principal por meio da diretiva ng-app
§  Componentes de um módulo
§  Sintaxe de injeção de dependências utilizada nos módulos
o   Injeção de dependências (DI
§  Problemas gerados pela injeção baseada no nome da dependência
§  Solucionando o problema de injeção pelo nome da dependência
o   View
o   Serviços
§  Value
§  Constant
§  Factory
§  Service
§  Provider
§  Diretivas
o   A diretiva ng-model e o conceito revolucionário Two-Way Data Binding
o   Como criar uma diretiva customizada?
o   Resumo
·         Capítulo 4 ■ Formulários e CSS
o   View com formulário
§  Diretiva ng-click
§  Enviando dados do formulário para o servidor
§  Classes CSS para o estado do formulário
§  Atributos automáticos para campos do formulário
§  Diretiva ng-show e ng-hide
§  Observando alterações no $scope utilizando $watch
o   Aplicando classes CSS (estilos) aos elementos
§  Utilizando uma função por meio da diretiva ng-class
§  Utilizando expressões para acessar atributos do escopo
§  Utilizando um objeto por meio da diretiva ng-class
o   Resumo
·         Capítulo 5 ■ Filtros
o   Overview
o   Criando filtros customizados
o   Criando filtros que permitem passagem de parâmetros
o   Resumo
·         Capítulo 6 ■ Diretivas – Uma abordagem detalhada
o   Ciclo de vida de uma diretiva
§  Fase Compiling
§  Fase Linking
o   Definição de uma diretiva por meio do objeto de configuração
o   restrict
o   priority
o   terminal
o   template
o   templateUrl
o   replace
o   scope
§  scope com valor false
§  scope com valor true
§  scope com valor object
§  Isolated Scope Bindings
§  Text Binding – Prefixo@
§  One-Way Binding – Prefixo &
§  Two-Way Binding – Prefixo =
o   transclude
o   controller e require
§  Modificadores para o atributo require
§  Injeção de vários controllers por meio do atributo require
§  Utilizando um controller externo por meio do atributo controller
o   compile e link
§  pre e post link
o   Diretivas AngularJS mais utilizadas
§  ng-app
§  ng-model
§  ng-controller
§  ng-bind
§  ng-class
§  ng-show e ng-hide
§  ng-{evento}
§  ng-src e ng-href
§  ng-repeat
o   Resumo
·         Capítulo 7 ■ Ciclo de vida
o   Introdução
o   Ciclo de vida de inicialização
§  Fase Compiling
§  Fase Linking
o   Ciclo de vida em tempo de execução (runtime)
§  Loop $digest
o   Resumo
·         Capítulo 8 ■ Eventos
o   Abordagem sobre eventos
o   Ouvindo eventos
o   Emitindo eventos
§  Qual a diferença entre $emit e $broadcast ?
o   Passando argumentos no evento
o   Resumo
·         Capítulo 9 ■ Mecanismo de rotas
o   Route Engine
o   Instalação
o   Entendendo o conceito de rotas
§  when(path, route)
§  otherwise(params)
§  Diretiva ng-view
o   Modo Hashbang versus HTML 5
§  Modo hashbang
§  Modo HTML5
o   Resumo
·         Capítulo 10 ■ Internacionalização e localização
o   Conceito de internacionalização – i18n
§  Por que a sigla i18n?
§  Locale ID
§  Como aplicar i18n com AngularJS?
o   Conceito de localização – l10n
§  Por que a sigla l10n?
§  Aplicando localização com Angular Translate
o   Resumo
·         Capítulo 11 ■ Comunicação com um servidor
o   Serviço $http
§  method
§  url
§  params
§  data
§  headers
§  transformRequest
§  transformResponse
§  cache
§  timeout
§  withCredentials
§  Métodos convenientes existentes no serviço $http
§  Interceptadores de requisição
o   Serviço $resource
§  Como o serviço $resource funciona
§  Funções JavaScript
§  Funções customizadas no $resource
§  $resource como um serviço AngularJS
o   Resumo
·         Capítulo 12 ■ Outros conceitos AngularJS
o   Promises
§  Como criar uma promise
§  Como consumir uma promise
§  Promises e o loop $digest
§  Promises e o callback de notificação
§  Encadeamento de promises
o   Cache
§  Atributo capacity do cache
§  O cache-padrão HTTP
§  Capacidade do cache $http
o   Cookies
o   Outros serviços AngularJS
§  $window
§  $document
§  $templateCache
§  $parse
§  $location
§  $exceptionHandler
§  $filter
§  $compile
§  $timeout
§  $interval
o   Objeto window.angular
§  angular.bootstrap
§  angular.toJson
§  angular.fromJson
§  angular.module
§  angular.lowercase
§  angular.uppercase
§  angular.isUndefined
§  angular.isString
§  angular.isObject
§  angular.isNumber
§  angular.isFunction
§  angular.isElement
§  angular.isDate
§  angular.isArray
§  angular.forEach
§  angular.element
§  angular.copy
o   Testes
§  Node.js
§  Karma
§  Jasmine
§  Testando a aplicação AngularJS
§  Debugando a aplicação
o   Resumo
·         Capítulo 13 ■ RequireJS e AngularJS
o   Introdução
o   AMD e RequireJS
o   Ordem de carregamento dos arquivos
o   Integração RequireJS e AngularJS
o   Como o AngularJS foi carregado?

o   Resumo 

30 de setembro de 2015

Roteamento no Angular

E Aê!

Roteamento é uma das partes comuns do AngularJS, que acabamos por usar com bastante frequência em aplicações de uma só tela. A idéia é que você tem um ponto do HTML que muda o innerHTML e o Controlador Angular que está associado, montando assim várias exibições diferentes (para funcionalidades diferentes) dentro da mesma aplicação, sem que você tenha de carregar toda uma página.

ng-view com duas rotas

É uma funcionalidade que existia nas versões anteriores do AngularJS como parte integrante do angular.min.js, mas hoje é distribuído como um módulo separado, o angular-route.

Usando bower, pode-se usar: bower install angular; bower install angular-route; Caso você não o esteja usando, basta baixar o arquivo angular-route.min.js do site do Angular (angularjs.org).

Para usar o roteamento, é preciso importar o módulo ngroute na sua aplicação, com:

var app = angular.module('myApp', ['ngroute']);


E depois é preciso configurar o roteamento com a função config:

app.config(function($routeProvider){
    $routeProvider
         .when('/AboutUS', {templateUrl: 'about.htm', controller: 'AboutUsController'})
         .when('/ContactUS', {templateUrl: 'contact.htm', controller: 'ContactUsController'})
         .otherwise(/404);
});

Na index.htm precisa existir um elemento ng-view no ponto que os outros templates serão injetados.

Observações:
  • ngRoute suporta somente uma ngView por App. Isso significa que eu tenho só um ponto de troca de template, mas muitos templates aplicados a um só ponto;
  • Torna natural o uso no Controller o objeto $location, para mudar de rotas e visualizar outras partes da app 
$location.path('/AboutUs'); // muda a url para a AboutUs
  • Aceita parâmetros vindos pela URL. Ao definir a rota em um when, pode-se fazer assim:
.when('/user/:id', {templateUrl: 'views/user.htm', controller: 'UserController'}) 

e ao chamar a url: http://www.seuApp.com/user/12345 seu controller consegue capturar esse valor 12345 com o seguinte código:

function UserController($routeParams){
    console.log($routeParams.id);
}


Existe também um outro sujeito para roteamento, o UI-Router, mas esse fica pra uma outra vez.

18 de agosto de 2015

Agilizando a digitação de HTML no VIm

No post passado, comentei sobre as minhas customizações do VIm, para agilizar o desenvolvimento Web.

Aqui vamos falar do emmet.vim, que é a evolução do Zen Coding. Nunca ouviu falar disso? Vamos explicar:

Quem já digitou código HTML sem nenhuma ajuda de auto-completar e detecção de erros, deve ter tido uma experiência bastante negativa. Nos editores de texto de linha de comando, é uma situação bastante frequente (especialmente aqueles que trabalham com ferramentas leves, como Sublime, Notepad++, VIm, Emacs, TextPad, etc...), quando não são customizados.

O ZenCoding foi o precursor de atalhos que representam trechos do HTML, como snippets padrão. Tão padrão, que todo mundo que quem implantou um plugin dele usava os mesmos atalhos. Outras pessoas evoluiram os padrões e criaram o Emmet (http://emmet.io).

Para implantar o plugin no VIm, coloque no ~/.vimrc a seguinte linha:

NeoBundle 'mattn/emmet-vim'

No VIm, basta colocar o atalho Emmet no seu texto e depois pressionar as teclas Ctrl+y e depois o caracter "," (vírgula) [quer dizer: aperta o Control e o "y", solta as duas e toca na vírgula - parece complicado, mas não é, é só tentar]

No link http://docs.emmet.io/cheat-sheet/ tem os vários atalhos do Emmet. A consulta/leitura é extremamente recomendada.

12 de agosto de 2015

Ambiente de Desenvolvimento - IDE

Existem hoje muitas opções para montar a IDE de desenvolvimento web ou mesmo usar uma IDE já prontinha.

Usei algumas das grandes, como Visual Studio e Eclipse, mas acho que são muito grandes, e por boas que sejam, gosto de editores leves, práticos e que já integrem muitas outras funcionalidades para outras tecnologias.

Como sou Administrador de Sistemas, e uso todo dia o Vim, ele acaba sendo minha escolha natural para qualquer desenvolvimento web (a menos que não faça sentido manter as coisas nele).

A carinha simpática do garoto!
Para quem não conhece, o Vim é a versão melhorada o VI, e são (os dois) editores de texto de linha de comando. A curva de aprendizado do Vim é um pouco longa, mas depois de aprendido, é difícil largar. (tem pessoas que terão o mesmo sentimento com outro editor de texto de linha de comando, o Emacs)

Para quem quiser um tutorial de comandos e funcionalidades básicas, chegue aqui ou veja os VimCasts.

Mas nas minhas aulas, algumas pessoas tem dificuldade de começar com o VIm, instalando e configurando para ter as funcionalidades interessantes para quem desenvolve pra Web.

Pra instalar o vim, na linha de comando, digite:

$ sudo yum install vim


Porém quando essa instalação termina, ele ainda não tem muitas funcionalidades, que são adicionadas com plugins. Aí entra a necessidade de usar um gerenciador de plugins pro VIm, e eu gosto de usar o NeoBundle.

Todas as instruções para instalar e usar o NeoBundle, estão na página inicial do site, mas vamos colocar como um roteirinho pra ficar mais fácil:

Primeiro, instala-se o git com o comando:

$ sudo yum install git

Depois, vc vai baixar o script de instalação, com o comando:

$ curl https://raw.githubusercontent.com/Shougo/neobundle.vim/master/bin/install.sh > install.sh

E por fim, vai executar a instalação:

$ sh ./install.sh

No fim da instalação, ele mostra um arquivo de configuração básico, para que você realize a configuração inicial sem pensar muito. Basta salvar a saída do último comando para o arquivo ~/.vimrc

Para facilitar um pouco mais, eu disponibilizei no GitHub o meu arquivo ~/.vimrc com os plugins que acho mais interessantes, e você pode baixar com o seguinte comando:

$ curl https://raw.githubusercontent.com/fchicout/myvim/master/.vimrc > ~/.vimrc

Os plugins que deixei são os seguintes:


  • NERDTree - Oferece uma janelinha com um navegador de arquivos.
  • neosnippet - Suporte a Snippets de Código
  • neosnippet-snippets - Suporte a Snippets de Código
  • vim-fugitive - Manipulação de repositórios git a partir do modo de comandos do VIm
  • ctrlp.vim - Um plugin para busca muito overpower
  • vim-colorschemes - Melhorias na coloração de código
  • emmet-vim - Zen Coding (uma série de atalhos para digitação de html e css de maneira bem simplificada

Em outro momento devo montar alguma postagem sobre alguns desses plugins.

E por hoje chega!