Aplicativo AngularJS Hello World: seu primeiro programa de exemplo

Por: James Hartmann James Hartmann
Hours Atualização do

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.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Olá mundo, AngularJS

O exemplo abaixo mostra a maneira mais fácil de criar sua primeira aplicação “Hello world” em AngularJS.

Programa AngularJS Olá Mundo

<!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:

  1. 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.
  2. 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”.
  3. Estamos usando uma variável de membro chamada “message” que nada mais é do que um espaço reservado para exibir a mensagem “Hello World”.
  4. 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á.
  5. “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.
  6. 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.
  7. 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.

Programa AngularJS Olá Mundo