Criando um "Hello, World" em AngularJS
AngularJS é um framework JavaScript open-source, mantido pelo Google, que auxilia na execução de single-page applications. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web, foi construído sob o padrão model-view-view-model (MVVM), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos.
Criar uma simples aplicação em AngularJS pode ser uma tarefa complicada, para os mais leigos.
O primeiro passo é fazer o download do arquivo angular.min.js (ou angular.js, para a versão extended to developers) no site original do framework.
Estrutura básica de uma aplicação em AJS:
<!DOCTYPE html> <html lang="pt-br" ng-app="helloWorld"> <head> <meta charset="UTF-8"> <title>Hello, World! em AngularJS</title> <!--Import do Angular em arquivo Offline Pode ser substituido pelo link da Google CDN--> <script src="assets/js/angular.min.js"></script> </head> <body> </body> </html>
Caso você entenda o mínimo de HTML, percebeu que existe um atributo ng-app="helloWorld" na tag html. Na verdade, isto é uma diretiva do AngularJS. A diretiva ng-app declara um elemento como o elemento raiz da aplicação, ocasionando a mudança do comportamento padrão da tag. Geralmente, usamos Camel Case na hora de declarar o nome da nossa aplicação.
Se você copiar este código e rodar com o seu console aberto, receberá uma mensagem de erro.
O erro ocorre pois nós não criamos o nome da aplicação. Fazemos isso por JavaScript.
<script>
angular.module('helloWorld', []);
</script>
Para exibir na página nosso "Hello, World!", temos que, primeiramente, definir um ngController para nossa aplicação. Um ng-controller especifica um controller JavaScript para aquele HTML em questão.
<script>
angular.module('helloWorld', []);
angular.module('helloWorld').controller('helloWorldController', function($scope){
$scope.showMessage = 'Hello, World!';
});
</script>
Por fim, vamos especificar em qual local da nossa página o AngularJS vai imprimir o texto contido no nosso Controller.
<body ng-controller="helloWorldController">
<div>
{{showMessage}}
</div>
</body>
Esta é a forma correta de exibir dados em AngularJS. Você simplificar toda esta aplicação apenas com este código:
<!DOCTYPE html>
<html lang="pt-br" ng-app="helloWorld">
<head>
<meta charset="UTF-8">
<title>Hello, World! em AngularJS</title>
<script src="assets/js/angular.min.js"></script>
<script>
angular.module('helloWorld', []);
</script>
</head>
<body>
<div>
{{"Hello, World!"}}
</div>
</body>
</html>
Mas, obviamente, irá perder totalmente o dinamismo oferecido pelo AngularJS. Lembrando que, para páginas estáticas, recomenda-se HTML5, não é necessário usar AngularJS.
Reviewed by Daniel Bonifacio
on
10:01
Rating:
Nenhum comentário