MEAN.JS - Componentes angulares no aplicativo

Neste capítulo, adicionaremos componentes angulares a um aplicativo. É uma estrutura JavaScript de front-end da web, que permite criar aplicativos dinâmicos de página única usando o padrão Model View Controller (MVC). No capítulo de arquitetura MEAN.JS , você viu como o AngularJS processará a solicitação do cliente e obterá o resultado do banco de dados.

Conhecendo o AngularJS

AngularJS é uma estrutura de aplicativo da Web de código aberto que usa HTML como linguagem de modelo e estende a sintaxe do HTML para expressar claramente os componentes de seu aplicativo. O AngularJS fornece alguns recursos básicos, como vinculação de dados, modelo, visualizações, controladores, serviços, etc. Para obter mais informações sobre o AngularJS, consulte este link .

Você pode tornar a página um aplicativo Angular adicionando Angular à página. Ele pode ser adicionado usando apenas um arquivo JavaScript externo, que pode ser baixado ou pode ser referenciado diretamente com uma versão CDN.

Considere que baixamos o arquivo e o referenciamos localmente, adicionando à página da seguinte forma -

<script src="angular.min.js"></script>

Agora, precisamos informar ao Angular que esta página é um aplicativo Angular. Portanto, podemos fazer isso adicionando um atributo, ng-app à tag <html> ou <body> como mostrado abaixo -

<html ng-app>
or
<body ng-app>

O ng-app pode ser adicionado a qualquer elemento da página, mas geralmente é colocado na tag <html> ou <body> para que o Angular possa funcionar em qualquer lugar da página.

Aplicação Angular como Módulo

Para trabalhar com uma aplicação Angular, precisamos definir um módulo. É um local onde você pode agrupar os componentes, diretivas, serviços, etc., que estão relacionados ao aplicativo. O nome do módulo é referenciado pelo atributo ng-app no HTML. Por exemplo, diremos o nome do módulo de aplicativo angular como myApp e pode ser especificado na tag <html> como mostrado abaixo -

<html ng-app="myApp">

Podemos criar uma definição para o aplicativo usando a instrução abaixo em um arquivo JavaScript externo -

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

Definindo o controlador

O aplicativo AngularJS depende de controladores para controlar o fluxo de dados no aplicativo. Um controlador é definido usando a diretiva ng-controller .

Por exemplo, vamos anexar o controlador ao corpo usando a diretiva ng-controller, junto com o nome do controlador que deseja usar. Na linha abaixo, estamos usando o nome do controlador como "myController".

<body ng-controller="myController">

Você pode anexar um controlador (myController) a um módulo Angular (myApp) como mostrado abaixo -

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

É melhor usar a função nomeada em vez de uma função anônima para facilitar a leitura, reutilização e testabilidade. No código a seguir, estamos usando a nova função nomeada "myController" para manter o código do controlador -

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

Para obter mais informações sobre controladores, consulte este link .

Definindo Escopo

Scope é um objeto JavaScript especial que conecta o controlador às visualizações e contém os dados do modelo. Nos controladores, os dados do modelo são acessados por meio do objeto $ scope. A função do controlador usa o parâmetro $ scope que foi criado pelo Angular e dá acesso direto ao modelo.

O trecho de código a seguir especifica como atualizar a função do controlador para receber o parâmetro $ scope e define o valor padrão -

var myController = function($scope) {
   $scope.message = "Hello World...";
};

Para obter mais informações sobre controladores, consulte este link . No próximo capítulo, começaremos a criar um aplicativo de página única usando o Angular.