Iniciando

Há várias formas de utilizar o AngularJS. Algumas delas são as seguintes:

Independente da forma que você escolher, lembre-se que o angular estará disponível na forma de um arquivo JavaScript, portanto, basta incluí-lo na página HTML de forma apropriada.

Estrutura do aplicativo

Um aplicativo que usa Angular está baseado no padrão arquitetural MVC (Model-View-Controller). Por causa disso, mesmo um aplicativo mais simples terá uma estrutura natural, baseada no MVC. O exemplo a seguir apresenta este aplicativo simples e a estrutura baseada no MVC. O aplicativo possui dois arquivos:

  • index.html (view)
  • app.js (controller)

View

O arquivo index.html possui o seguinte conteúdo:

{%raw%} <!DOCTYPE html> <html lang="pt-br" ng-app="appsimples"> <head> <meta charset="utf-8" /> <title>App Simples</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css" /> <script>document.write('<base href="' + document.location + '" />');</script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> <script src="app.js"></script> </head> <body ng-controller="HomeController"> <div class="container"> <p>Hello {{nome}}!</p> </div> </body> </html> {%endraw%}

O arquivo index.html representa a View, ou seja, a parte visual do aplicativo. Na linha 2, a diretiva ng-app possui o valor appsimples, que é o nome do módulo que representa o aplicativo. Isso quer dizer que a lógica do aplicativo está em um módulo (um aplicativo pode possuir vários módulos e pode existir uma relação de dependência entre eles, o que será visto posteriormente).

Na linha 17, a diretiva ng-controller é utilizada para indicar que o elemento body em questão está no contexto do Controller chamado HomeController. Um controller é outro elemento do MVC, responsável por ligar a view ao model (e vice-versa) e representar a lógica de negócio. O restante do código HTML é responsável por apresentar uma mensagem na tela (linha 19) por meio de uma expressão.

Módulo e Controller

O arquivo app.js possui o seguinte conteúdo:

{%raw%} (function(){ angular.module('appsimples', []) .controller('HomeController', function($scope) { $scope.nome = 'AngularJS'; }); })(); {%endraw%}

Pode-se perceber, na linha 3, a chamada da função angular.module() passando como parâmetro: o nome do aplicativo (appsimples) e a coleção de dependências (neste caso, nenhuma dependência necessária).

A função angular.module() retorna um objeto do Angular, que possui função controller(). Esta função é chamada com dois parâmetros:

  • o nome do controller (HomeController); e
  • a função anônima que determina o controller.

A lista de parâmetros da função anônima define a lista de dependências do controller. Tanto para as dependências do módulo quanto para as dependências do controller, o Angular utiliza um recurso chamado injeção de dependência, que identifica as dependências e trata de instanciar os objetos, caso necessário.

A função anônima que define o controller possui um parâmetro chamado $scope, que tem um papel especial no Angular. Na view, o que está contido no elemento no qual o controller está aplicado é gerenciado por meio do objeto $scope. Isso quer dizer que um model ou funções utilizadas no controller são definidos por meio deste objeto. Para exemplificar, na linha 5 é criado um elemento nome no model. O valor atribuído a nome é apresentado na view por meio de uma expressão (linha 19 do arquivo index.html).

Veja o aplicativo em funcionamento aqui.

Esta é a estrutura básica do aplicativo Angular baseado no MVC. Nas próximas seções, exploraremos mais dos recursos do Angular e aprenderemos sobre como incluir novos elementos nesta estrutura do aplicativo.

results matching ""

    No results matching ""