Programação Wendell Adriel Luiz Silva

AngularJS: Você deveria estar usando este Framework

AngularJS: Você deveria estar usando este Framework

Estou aqui hoje para apresentar a você alguns motivos do porquê você deveria estar usando o AngularJS em suas aplicações e também apresentar este Framework a aqueles que ainda não o conhecem.

Esse artigo faz parte de uma série de aulas sobre AngularJS:
Aula 2: AngularJS: Aprendendo sobre as Diretivas ng-bind e ng-init

O AngularJS é um Framework JavaScript mantido pela Google, porém diferente de outros, ele é usado no desenvolvimento Front-End, disponibilizando diversos componentes para nos auxiliar no desenvolvimento de nossas aplicações.

Ele traz novas funcionalidades para nossas páginas HTML inserindo novos atributos em nossas tags, como por exemplo “ng-model”, “ng-click” e muitas outras diretivas e até mesmo permitindo que criemos nossas próprias. Imagine uma aplicação em que você ao invés de usar uma <div> e manipular o DOM para criar um efeito “accordion” você apenas criaria a sua diretiva/tag <accordion> e sem manipular o DOM você poderia reaproveitar seu novo elemento em toda sua aplicação? Não seria ótimo? Com AngularJS você pode fazer isso de forma fácil.

Se com essa pequena introdução eu ainda não consegui convencer você de que AngularJS pode o ajudar de forma incrível no desenvolvimento de suas aplicações, abaixo segue uma lista com mais alguns motivos que vão fazer você mudar de ideia:

  1. Fácil aprendizado

    Por usar HTML e JavaScript puro em suas aplicações, se você já tem experiência com essas tecnologias, você já pode usar o AngularJS de forma fácil, pois ele utiliza o JavaScript puro para trazer novas funcionalidades para suas tags HTML.

  2. Data Binding

    Uma das mais extraordinárias funcionalidades do AngularJS. Essa funcionalidade faz com que sua interface (camada view) seja atualizada de forma automática quando seus dados (camada model) são alterados. Isso faz com que você não precise ficar manipulando o DOM e gaste seu tempo e esforço com o que realmente importa em sua aplicação.

  3. Componentização

    As diretivas são o carro-chefe do AngularJS, com elas você pode dar novas funcionalidades às suas tags HTML e até mesmo criar seus próprios componentes, dessa forma você aumenta a reutilização de código em sua aplicação. Uma diretiva tem toda estrutura DOM, CSS e comportamento guardados nela, fazendo com que dessa maneira se você precisar dessa mesma estrutura, você pode apenas reutilizar seu componente criado.

  4. Excelente para aplicações RESTful

    O AngularJS fornece vários componentes para facilitar o desenvolvimento de aplicações RESTful, dessa maneira você pode criar o Front-End de sua aplicação independente das tecnologias Back-End utilizadas, facilitando até mesmo a migração entre tecnologias.

Começando a utilizar AngularJS

Agora para você que viu o poder do AngularJS, vamos criar o nosso famoso Hello World o utilizando.

Nosso arquivo hello.html:

<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<title>Hello World AngularJS</title>
</head>
<body>
<label for="nome">Nome:</label>
<input type="text" ng-model="nome" placeholder="Digite seu nome">
<br>
<h1>Olá {{ nome }}</h1>
</body>
</html>

Entendendo nosso exemplo:

Na segunda linha de nosso arquivo usamos a tag <html> com uma diretiva do AngularJS, “ng-app”. Esta diretiva indica que todo nosso documento será uma aplicação AngularJS. Podemos ter várias pequenas aplicações AngularJS em um mesmo arquivo html, para isso devemos utilizar a diretiva “ng-app” em outra tag, por exemplo em uma tag <div>, assim podemos ter N elementos <div>, cada um rodando uma aplicação AngularJS diferente, mas veremos isso em um outro artigo.

Na quinta linha estamos importando o AngularJS para nosso documento, como estamos fazendo apenas um exemplo bem simples não há problemas de fazer a importação no <head> de nossa página. Também estamos utilizando o AngularJS por CDN, mas quando você for utilizar em algum projeto recomendo entrar em no site oficial, clicar na opção download e selecionar a melhor opção para seu projeto, inclusive tem a opção de instalar utilizando o Bower e o npm.

Na décima linha estamos criando um campo simples de formulário, mas estamos utilizando uma outra diretiva do AngularJS, a “ng-model”. Quando utilizamos essa diretiva, passamos para ela uma variável, nesse caso criamos a variável “nome”, em outros artigos veremos como utilizar variáveis de dados já existentes. Quando associamos essa variável ao nosso <input>, o valor de nossa variável passará a ser o valor digitado nele. Essa diretiva é responsável por fazer o “binding” da variável que passamos, dessa maneira quando você começa a digitar algo no <input>, automaticamente a nossa variável é atualizada com o valor atual do mesmo.

Na décima segunda linha temos uma tag <h1> e dentro dela temos o seguinte código “{{ nome }}”. Esse código faz com que seja impresso em nossa tela o valor atual da nossa variável “nome”. Dessa maneira, por causa da nossa diretiva “ng-model” usada em nosso <input>, ao mesmo tempo que você digita, a variável “nome” é atualizada e dessa maneira ela é apresentada pelo nosso código “{{ nome }}”.

Conclusão

Como você viu, o AngularJS nos proporciona grandes ferramentas para nossas aplicações e esse foi apenas uma pequena introdução de todo poder que o Framework nos proporciona. Continue ligado aqui no Estudar TI, pois em breve teremos mais artigos com dicas e tutorias de como resolver problemas com AngularJS e também sobre vários outros assuntos relacionados à desenvolvimento de softwares e sobre tecnologia em geral.

Espero que tenha gostado e qualquer dúvida estou à disposição, basta comentar este artigo!

Um grande abraço a todos e até o próximo artigo!!! 😀

Avatar

| Website

Tenho 23 anos, sou formado em Análise e Desenvolvimento de Sistemas, atuo como Analista Desenvolvedor Web e também como Criador e Tutor da CodeShare. Trabalho com desenvolvimento de sites e softwares há 7 anos e sempre procuro me manter atualizado nas melhores tecnologias e metodologias no desenvolvimento de softwares. Há alguns anos estou focado no desenvolvimento para Web. Já fiz (e continuo fazendo) diversos cursos na área de desenvolvimento e conheço diversas linguagens e tecnologias. Gosto muito do desenvolvimento Front-End, porém prefiro o desenvolvimento Back-End e minhas linguagens preferidas são PHP, Ruby e Java. Recentemente também um grande fã de desenvolvimento utilizando a MEAN Stack. Você pode conhecer mais sobre mim e meu trabalho acessando: http://wendelladriel.github.io.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

Seja o primeiro a comentar!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.