Começando Com AngularJS

AngularJS é um framework JavaScript open source, que auxilia na execução de Single Page Application(SPA). Desenvolvido pela Google, utiliza o padrão model–view–controller (MVC), facilitando tanto o desenvolvimento quanto os testes das aplicações.

No Angular, os dados são ligados em ambos os sentidos, ou seja, quando o model é atualizado, a view será atualizada automaticamente para refletir essas mudanças e vice-versa. Isso faz com que a manipulação do DOM seja fácil e é uma das principais vantagens em se utilizar o Angular.

Data binding

A associação de dados é a característica mais útil e poderosa entre qualquer uma das tecnologias de desenvolvimento de software existentes ou futuras. É realmente um processo que preenche uma conexão entre a visão e a lógica de negócios de uma aplicação.

Basicamente vemos uma associação de sentido único e em dois sentidos de dados no que diz respeito a aplicações AngularJS.

One-way Data Binding

É uma abordagem em que um valor é retirado do modelo de dados e inserido em um elemento HTML. Não havendo uma maneira de atualizar o model pela view.

AngularJS fornece algumas diretivas de associação dados:

ng-bind - Passa a propriedade de texto interno de um elemento HTML.
ng-bind-template - Quase semelhante a diretiva ng-bind, mas permite múltiplos templates.
ng-non-bindable - Declara uma região de conteúdo para o qual a associação de dados será ignorada.
ng-bind-html - Cria associações de dados usando a propriedade interna HTML de um elemento HTML.
ng-model - Cria a associação bidirecional de dados.

Two-Way Data Binding

É quando há mudança no model e a view reflete a mudança, e vice-versa. Associações de duas vias em AngularJS são criadas com a diretiva ng-model. Praticamente, as associações de duas vias pode ser aplicadas apenas aos elementos que permitem que o usuário forneça um valor de dados, seriam input, textarea, e elementos select.

Iniciando com o Angular

Para inicializar qualquer aplicação Angular, precisamos invocar a diretiva ng-app. Essa diretiva pode ser associada a qualquer elemento HTML e é usado para auto-inicialização de uma aplicação Angular. A diretiva ng-app representa a raiz da aplicação e apenas podemos ter uma inicialização de uma aplicação Angular, por página.

O controller é definido utilizando a diretiva ng-controller. O controller é um objeto javascript que contém atributos/propriedades e funções. Cada controller aceita o $scope como um parâmetro que se refere a aplicação/módulo que o controller, irá controlar.

Você pode fazer o download do framework, pelo próprio site ou pelo:

Bower
1
bower install angular
NPM
1
npm install angular
E por outros meios.

Exemplo simples, para o primeiro Olá, mundo, com AngularJS.

index.html

<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>AngularJS</title>
  </head>
  <body ng-controller="ExampleController">
    <p>Olá, <em>{{ name }}</em>!</p>
    <script src="lib/angular/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="example-controller.js"></script>
  </body>
</html>

app.js

(function() {
  'use strict';

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

})();

example-controller.js

(function() {
  'use strict';

  angular
  .module('app')
  .controller('ExampleController', ExampleController);

  ExampleController.$inject = ['$scope'];

  function ExampleController($scope) {
    var vm = this;
    $scope.name = 'Hemerson';
  }
})();

Conclusão

Angular, veio como a solução para abstrair a manipulação do DOM da lógica da aplicação. Abstrai o acoplamento entre o lado cliente e o lado servidor da aplicação. Isto permite que o desenvolvimento evolua em ambos os lados, de forma paralela, e permite o reuso de código. E tem muitos recursos e vantagens que veremos nos próximos artigos sobre o assunto.

Ir para a Página inicial