Skip to content

Manual AngularJS

Jump to bottom
Erick Nilsen Pereira de Souza edited this page Sep 25, 2015 · 6 revisions

Manual: criando uma aplicação com AngularJS

  1. Crie uma estrutura de diretórios (e.g. ExemploAngularJS/js) e copie para a pasta js o arquivo angular.min.js

  2. Abra o Sublime Text e importe o diretório criado

  3. Crie o arquivo main.js na pasta js e insira o código abaixo para instanciar um módulo

var app = angular.module('Hello', []);
  1. Crie o arquivo HelloController.js na pasta js e insira o código abaixo para a criação de um controlador e atualização do modelo a partir de uma função
app.controller('HelloController', function($scope) {
    $scope.total = 0;

    $scope.incrementar = function() {
        $scope.total++;
    }
});
  1. Crie o arquivo index.html na pasta ExemploAngularJS com o seguinte conteúdo
<!doctype html>
<html lang="pt" ng-app="Hello">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>        
</head>
<body ng-controller="HelloController">
    <button ng-click="incrementar()">Clicar</button>
    <label>Você clicou: {{total}} vezes</label>
    
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script> 
    <script src="js/main.js"></script>
    <script src="js/HelloController.js"></script>    
</body>
</html>
Clone this wiki locally