O Básico para iniciar no Angular JS

1 de dezembro de 2014 por Kadu Oliveira

O Angular é um framawork de JavaScript patrocinado pelo Google com base no modelo de arquitetura MVC ( principal conceito por trás do framework) que oferece uma estrutura consistente e escalável, facilitando desenvolver aplicações complexas e de grande porte.

A estrutura do AngularJS veio para garantir mais velocidade no desenvolvimento, facilidade de manutenção a longo prazo e separação de responsabilidades no projeto.

O projeto é open source e está hospedado no GitHub https://github.com/angular/angular.js
Site oficial: https://angularjs.org

AngularJS e MVC

Separar as responsabilidades da sua aplicação é uma de suas filosofias. O framework adota um padrão bem parecido com o MVC (Model-View-Controller ou Modelo-Visão-Controlador) para estruturar a aplicação. Se olharmos bem, temos realmente três camadas na nossa aplicação com Angular:

Temos as informações que serão mostradas aos usuários ou coletadas dos usuários. Isso seria o nosso modelo (Model).
Temos também a interface, que no nosso caso é a linguagem HTML. É a camada de visualização, onde o usuário interage. Ou seja é nossa Visão (View).
Nossa última camada é onde fica as regras de negócio, lógica de negócio. É a camada que acessa os dados do modelo (Model) e envia para a camada de visão (View). Nela que é feita as validações por exemplo. Ou seja, tudo que for referente a lógica de negócio está aqui.

Vantagens do AngularJS

Menos linhas de código, até mesmo que jQuery, para realizar uma tarefa, assim terá um código mais limpo, já que toda lógica ficará contida em componentes que podem ser reutilizados.
Seguindo o padrão MVC, a maioria do seu código está focado na regra do negócio, nas funcionalidades de sua aplicação, e não focada em códigos redundantes, por exemplo.
Algo básico, porém interessante de ressaltar é que é possível modificar todo seu layout de um site ou aplicação sem alterar uma única linha do seu código JavaScript.
Facilidade para os designers trabalharem, pois os templates da aplicação do Angular são aplicados em HTML puro.
Interage muito bem com componentes de outras bibliotecas, por exemplo: Foundation, BootStrap. Disponibiliza hooks para ser integrado conforme a necessidade do desenvolvedor.

Conhecendo o AngularJS

O framework permite aos desenvolvedores criar aplicações complexas e de grande porte de forma rápida e fácil. O AngularJS não segue a risca o padrão MVC, por exemplo: o controlador jamais fará uma referência direta à camada visão (View). Sendo assim podemos facilmente testar nosso controlador sem inicializar algo nos nossos elementos HTML (DOM).

O AngularJS é um dos poucos frameworks JavaScript com um sistema completo
de injeção de dependência incluído.

AngularJS na prática

Primeiramente, como qualquer framework, devemos incorporar o framework em nosso projeto. Você pode utilizar o serviço do Google https://developers.google.com/speed/libraries/devguide ou baixar o arquivo direto do site http://www.angularjs.org

Logo depois devemos inicializar o Angular por meio do atributo ng-app. Isso indica a seção do HTML que será controlada pelo framework. Na maioria das vezes usamos no elemento HTML, logo estamos dizendo que todos os elementos que são filhos desse elemento poderá ser controlado pelo framework AngularJS.

Para entendermos melhor vamos montar um exemplo bem simples e básico. No nosso exemplo teremos um campo de texto que ao digitar algo outro elemento será atualizado com esse valor.

<!DOCTYPE html>
<html ng-app>
    <body>
        <input type="text" ng-model="name" placeholder="Enter your name">
        <h1>Olá <span ng-bind="name"></span></h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    </body>
</html>

Explicação do código acima:

Na linha dois estamos inicializando o Angular com ng-app.
O atributo ng-model utilizamos em campos de entrada de dados para armazenar o valor digitado pelo usuário, e em seguida manipula-lo com JavaScript. No exemplo estamos armazenando o valor digitado pelo usuário numa variável chama name.
O atributo ng-bind insere o valor da variável name na tag e vai atualizando-o caso tenha alguma alteração no seu valor.

Podemos substituir:
< h1>Olá < span ng-bind=”name”>< /span>< /h1>
Por:
< h1>Olá {{ name }}< /h1>

Repare que não precisamos escrever nada de JavaScript/jQuery. Se por acaso tivéssemos usado JS teríamos que criar eventos, seletores para escrevermos o texto digitado, etc.

Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.