AngularJS - MVC

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.

Próxima

AngularJS - Sobre o Angular

Um exemplo de código AngularJS

Agora vamos discutir sobre como configurar a biblioteca AngularJS para ser usada no desenvolvimento de aplicações web. Também estudaremos brevemente a estrutura de diretórios e seu conteúdo.

Importante realizar o download do framework antes de começar.

Agora vamos ver um exemplo simples usando a biblioteca AngularJS. Vamos criar um arquivo HTML como abaixo

teste.html

Incluindo AngularJS

Nós incluímos uma referência ao arquivo AngularJS JavaScript na página HTML para que possamos utilizar o AngularJS.

Em seguida nós indicamos que parte do HTML contém a referência ao aplicativo AngularJS. Este é adicionando o atributo ng-app para o elemento HTML. Você pode adicioná-lo ao corpo do html. Como no exemplo abaixo:

View

A view é esta parte:

O componente ng-controller avisa o controller AngularJS para usar a view. 'helloTo.title' diz ao AngularJS para escrever na model o "Olá To.title" nessa parte do HTML.

Controller

Parte do controller:

Este código registra a função de controller chamando o controller HelloController no module angular chamado teste. Mais a frente será abordado de forma mais clara sobre controllers e modules. A função do controlador está registrada no angular através do angular.module (...) , controller(...) , function(...).

O parâmetro $scope passado para a função do controller é a model. A função de controller é adicionar um objeto JavaScript helloTo, nesse objeto que ele adiciona um campo de título.

Quando a página é carregada no navegador algumas coisas acontecem.

• O documento HTML é carregado e avaliado pelo navegador. O arquivo AngularJS JavaScript é carregado, o objeto global angular é criado. Em seguida, o JavaScript registra qual função do controller é executada.
• Depois, o AngularJS varre o código HTML procurando apps e view. Uma view é localizada, ele se conecta a essa view com a função do controller correspondente.
• Em seguida, o AngularJS executa as funções do controller. Depois, ele mostra as views com os dados da model preenchida pelo controller. A página agora está pronta!

Próxima