
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](https://angularjs.org/) ou pelo:

- Bower

```bash
bower install angular
```

- NPM

```bash
npm install angular
```

E por outros meios.

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

### index.html

```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

```javascript
;(function () {
  'use strict'

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

### example-controller.js

```javascript
;(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.


UI2CodeGo to Home Page

Angular

Compartilhar