JPlol

domingo, 10 de julho de 2016

AngularJS - Primeira Aplicação

Primeira Aplicação

Antes de começar com a criação de aplicação usando o AngularJS, vamos ver quais são as partes reais de uma aplicação AngularJS. Uma aplicação AngularJS consiste em seguir três partes importantes.

ng-app - Define e linka uma aplicação AngularJS com o HTML.
ng-model - Linka os valores de dados da aplicação AngularJS com o HTML para inserir dados.
ng-bind - Linka os dados da aplicação com as tags HTML.

Passos para criar uma aplicação AngularJS:

Passo 1 - Carregar framework

Sendo um framework JavaScript puro, ele pode ser adicionado usando a tag <script>.

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Passo 2 - Definir uma aplicação AngularJS utilizando a diretiva ng-app

<div ng-app = "">
   ...
</div>

Passo 3 - Defina o nome da model utilizando a diretiva ng-model

<p>Insira seu nome: <input type = "text" ng-model = "name"></p>

Passo 3 - Vincular o valor da model utilizando a diretiva ng-bind.

<p>E aee \0/ <span ng-bind = "name"></span>!</p>

Utilize as três etapas acima em uma página HTML.

Nome do arquivo: teste_angular.html

<html>
   
   <head>
      <title>AngularJS</title>
   </head>
   
   <body>
      <h1>Primeira Aplicação</h1>
      
      <div ng-app = "">
         <p>Insira seu nome: <input type = "text" ng-model = "name"></p>
         <p>E aee \0/ <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

Resultado:

Integração do AngularJS com HTML

ng-app: indica o início da aplicação AngularJS.

ng-model: cria uma variável model chamada "name" que pode ser usada com a página html e dentro da div tendo a diretiva ng-app.

ng-bind: usa a model de name a ser exibida na tag span html sempre que o usuário inserir algo na caixa de texto.

O fechamento da tag </ div> indica o fim da aplicação AngularJS.

MVC ( Model - View - Controller )

O Model View Controller ou MVC, como é popularmente chamado, é um padrão de projeto de software para desenvolvimento de aplicações web. Um padrão MVC é composto de três partes:

Model - É o nível mais baixo do padrão responsável pela manutenção de dados.

View - É responsável por exibir todos ou uma porção dos dados para o usuário.

Controller - É um código de software que controla as interações entre o model e a view.

O MVC é popular porque isola a lógica da aplicação da camada de interface do usuário e suporta SoC. O controller recebe todas as solicitações da aplicação e, em seguida, trabalha com o model para preparar todos os dados necessários para a view. A view, em seguida, usa os dados gerados pelo controller para gerar uma resposta final. A abstração MVC pode ser representada graficamente como no exemplo a seguir.

Model

A model é responsável pela gestão de dados da aplicação. Ela responde ao pedido da view e com as instruções do controller para se atualizar.

View

Apresenta dos dados em um formato específico, depende da decisão do controlador para apresentar os dados. É um sistema de modelos baseados em scripts, como JSP, ASP, PHP e muito fácil de integrar com a tecnologia AJAX.

Controller

O controller responde a entrada do usuário e executa interações sobre os objetos da model. O controller recebe a entrada, valida, e em seguida, executa operações de negócios que modificam o estado dos dados da model.