FabrícioRonchi

AngularJS + RequireJS

27 November 2014

Objetivo

Boenas! Querendo contribuir com o BlogMV*, resolvi criar uma aplicação com AngularJS + RequireJS.

Aplicação

Tudo começa no repositório de referência para a criação da aplicação. Então, vá ao terminal e clone esse repositório. Assim:

Feito isso, acesse o diretório baby-steps, e instale as dependências do projeto.

Para isso ser feito, vamos usar o bower, que #digassedepassage tem dependências também, como: Node, NPM e git. Vamos a instalação:

Ok, agora se você abrir seu arquivo index.html, você terá algo parecido com isso.

Configurando AngularJS + RequireJS

Show. Agora edite seu arquivo bower.json, que está na pasta raiz do projeto, com as seguintes linhas.

Agora vamos executar novamente o processo de instalação de dependências. Lá vai:

RequireJS

Bom, agora vamos adicionar o RequireJS na nossa aplicação. Adicione no arquivo index.html, que está na pasta raiz do projeto, antes do fechamento da tag body a seguinte linha.

Simples, essa é a nossa refência pro arquivo de configuração do RequireJS, que está logo aqui em baixo.

Código, Código, Código...

Ok, agora vamos colocar a mão na massa. Primeiro vamos criar o arquivo de configuração do RequireJS, que foi citado anteriormente. Lá vai:

Sem mistério, na primeira parte apenas referênciamos nossas libs, e suas dependências.

Na segunda parte, dizemos quais arquivos vamos utilizar na aplicação, como: controllers, diretivas e constants. Na sua função de callback, configuramos as rotas que vão ser utilizadas pelo AngularJS(nota-se que já dizemos pro qual a view e qual controller que será utilizado em cada rota). Após isso, iniciamos manualmente o AngularJS na aplicação através da função domReady, que é um plugin do RequireJS que avisa quando o DOM está pronto.

Beleza, agora vamos ao próximo.

Como estamos trabalhando com módulos separados, ou seja, controllers, diretivas e constants estão em módulos distintos, o arquivo app.js simplesmente junta eles e adiciona a nossa aplicação AngularJS.

Show, agora vamos ver como que os módulos dos controllers, diretivas e constants são iniciados individualmente. Go Go Go.

Difícil? não né? Simples e fácil de entender.

Bom, agora que já temos na aplicação o AngularJS iniciado, as configurações do RequireJS prontas e os módulos do AngularJS adicionados, vamos adicionar os nossos controllers, diretivas e constants.

Começamos criando uma constants chamada title, que nada mais é do que um objeto que não pode ser alterado, e que vai ser adicionado ao nosso controller HomeController, logo mais vai ser explicado, através de injeção de dependência. Nesse caso atribui dois valores, que vão representar o título da aplicação.

Feito isso, vamos a nossa diretiva.

Bom, primeiro: diretivas é uma forma de abstrair o código, e nela manipulamos o DOM da aplicação. Segundo: Criei uma diretiva chamada myFocus, que vai ser usada para dar focus ao nosso elemento. Há vá? #zuera.

Show, como dito anteriormente no arquivo main.js, temos três rotas na aplicação, são elas: /, /hello e /discussion. Cada rota tem seu controller e sua view. Vamos ver primeiro os controllers:

Tranquilo! Temos nossos três controllers. No primeiro, HomeCtrl, olha o que está ali nas dependências. MAGIC! A constant title que foi criada anteriormente, show ein!

Injetamos também nos três controllers a dependência do $scope. Como diria o Faustão, “Essa fera aí meu!” vai nos ajudar a manipular a nossa página html.

E falando em html, vamos as nossas views:

Beleza, temos nossas views. Agora analisando elas, observamos que temos algo parecido com isso nas view { { ... } } . Essas chaves se chamam interpolação, que é a forma de monstrar no nosso DOM, as variáveis($scope) que foram declaradas nos controllers. Por exemplo, olha o controller HelloCtrl, temos uma variável chamada text, que recebe um texto Lorem Ipsum, e agora olhe a view desse controller, hello.html, temos nela definido { {text} }. Show!

Mas o que é mais legal, e não mencionei ainda, é o ng-repeat, que está na view discussion.html, esse cara é fantástico! No controller dele, DiscussionCtrl, definimos uma array de strings, chamada discussion. Se observarmos temos a diretiva ng-repeat="word in discussion", ou seja, pra cada string da array, ele vai criar o elemento no DOM, nesse caso uma li. MAGIC 2x!

Ok, está quase. Falta apenas o index.html. Lá vai ele:

Bom, em comparação com o index.html que já tinha no nosso projeto referência, foram feitas pequenas alterações. Primeiro, nota-se que tem um input, e olha o atributo que está nele: my-focus, Show né? Essa é diretiva que criamos anteriormente, que servirá pra dar focus ao input quando a nossa aplicação for iniciada. E não para por aí, ela tem outra diretiva atribuida, ng-model="name", que é a forma de mostrar no nosso DOM, as variávies($scope) que foram declaradas nos controllers.

MAS PERAE! Isso não é mesma coisa que interpolação? Resposta: Não! Através do ng-model podemos alterar os valores das variáveis($scope) do controller. MAGIC 3x. Olhe logo em baixo, agora sim temos em forma de interpolação a mesma váriavel($scope). Agora digite algo no input para ver o que acontece: Feittoooo! Ele, AngularJS, faz a sincronização automática do model com o controller. Isso se chama Data Binding.

E pra finalizar, temos a diretiva ng-view, que nela que vai ser exibidas as nossas views.

ACABOU! É TETRA! É TETRA! #zuera;

Agora você já tem a aplicação pronta, é só rodar ela. Espero que tenham gostado e aprendido.

Dúvidas, sugestões, críticas… são sempre bem vindas! Se tiver uma delas, da um berro aí no Twitter!