Introdução ao AngularJS — Primeiro programa Hello, World!

Neste exemplo utilizaremos a versão 1.2.29 do AngularJS, para criar nossa primeira aplicação em AngularJS.

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<title>Hello World</title>
<! — Bootstrap CSS — Parte 1 →
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity=”sha384–1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin=”anonymous”>
<link rel=”stylesheet” href=”../lib/css/app.css”>
</head>
<body ng-app> <! — Parte 2 →
<! — Parte 3 →
<div class=”container”>
<div class=”form-group input-text”>
<input type=”text” ng-model=”name” name=”name” id=”input” class=”form-control”>
</div>
</div>
<! — Parte 4 →
<h1 class=”text-center”>Hello, <span ng-bind=”name”></span>!</h1>
<! — jQuery →
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<! — AngularJS — Parte 5 →
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
<! — Bootstrap JavaScript →
<! — Latest compiled and minified JavaScript →
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity=”sha384–0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=”anonymous”></script>
</body>
</html>

Irei detalhar o arquivo para você:

  1. Adicionamos dois arquivos CSS, o primeiro é o bootstrap para da um pouco de vida a nossa aplicação. O segundo arquivo é um css personalizado chamado de app.
  2. a diretiva ng-app foi adicionada a tag body, o que faz dizer que a nossa aplicação é de fato uma aplicação AngularJS.
  3. A diretiva ng-model foi adicionada dentro do campo input do tipo text, essa diretiva serve para recuperar tudo que o usuário digitar e armazenar em uma variável de sua preferência, neste caso foi passada a name.
  4. Utilizamos o ng-bind para imprimir o que estar armazenado na variável name.
  5. E por mim adicionamos o arquivo angularjs em sua versão 1.2.29 em nossa aplicação. *Confirmo que esse arquivo é essencial para que a nossa aplicação funcione.

Você sempre poderá baixar o código fonte clicando aqui.

Copie o código fonte disponibilizado acima, salve em um arquivo do tipo HTML e execute em seu browser, ao digitar qualquer palavra no campo input, o h1 será atualizado em tempo real.