Aplicativo AngularJS Hello World: seu primeiro programa de exemplo
James Hartmann
A melhor maneira de ver o poder de um aplicativo AngularJS é criar seu primeiro aplicativo de programa básico “Hello World” em Angular.JS.
Existem muitos ambientes de desenvolvimento integrados que você pode usar para o desenvolvimento AngularJS, alguns dos mais populares são mencionados abaixo. Em nosso exemplo, estamos usando Webstorm como nosso IDE.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio
Olá mundo, AngularJS
O exemplo abaixo mostra a maneira mais fácil de criar sua primeira aplicação “Hello world” em AngularJS.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Guru99</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hello World"
} )
</script>
</body>
</html>
Explicação do código:
- O "aplicativo ng”A palavra-chave é usada para indicar que este aplicativo deve ser considerado um aplicativo angular js. Qualquer nome pode ser dado a esta aplicação.
- O controlador é o que é usado para manter a lógica de negócios. Na tag h1 queremos acessar o controlador, que terá a lógica para exibir “HelloWorld”, então podemos dizer, nesta tag queremos acessar o controlador chamado “HelloWorldCtrl”.
- Estamos usando uma variável de membro chamada “message” que nada mais é do que um espaço reservado para exibir a mensagem “Hello World”.
- A “tag de script” é usada para referenciar o script angular.js que possui todas as funcionalidades necessárias para angular js. Sem esta referência, se tentarmos usar alguma função AngularJS, ela não funcionará.
- “Controlador” é o local onde estamos realmente criando nossa lógica de negócio, que é nosso controlador. As especificidades de cada palavra-chave serão explicadas nos capítulos subsequentes. O que é importante notar é que estamos definindo um método de controlador chamado 'HelloWorldCtrl' que está sendo referenciado na Etapa 2.
- Estamos criando uma “função” que será chamada quando nosso código chamar este controlador. O objeto $scope é um objeto especial em AngularJS que é um objeto global usado em Angular.js. O objeto $scope é usado para gerenciar os dados entre o controlador e a visualização.
- Estamos criando uma variável de membro chamada “message”, atribuindo a ela o valor de “HelloWorld” e anexando a variável de membro ao objeto de escopo.
NOTA: A diretiva ng-controller é uma palavra-chave definida em AngularJS (etapa 2) e é usado para definir controladores em seu aplicativo. Aqui em nosso aplicativo, usamos a palavra-chave ng-controller para definir um controlador chamado 'HelloWorldCtrl'. A lógica real para o controlador será criada na (etapa 5).
Se o comando for executado com sucesso, a seguinte saída será mostrada quando você executar seu código no navegador.
Saída:
A mensagem 'Olá Mundo' será exibida.
