Você está aqui: AngularJS ::: Angular / AngularJS + JavaScript ::: Controllers AngularJS |
Aprenda a criar o seu primeiro controller AngularJS (em JavaScript puro, sem CLI nem TypeScriptQuantidade de visualizações: 1299 vezes |
|
O título desta dica pode ser exagerado, mas é isso mesmo. Mostrarei a seguir como criar o seu primeiro controller AngularJS sem precisar passar pelo processo de escrevê-lo em TypeScript e depois compilá-lo para JavaScript. Além disso, quem está aprendendo AngularJS quer ver alguma coisa logo, e não ficar disparando um monte de comando Angular CLI (Command Line Interface) sem entender muito bem o processo. Então, vamos começar. Um controller AngularJS, no final das contas, é um simples objeto JavaScript usado para controlar os dados e seus fluxos em uma aplicações AngularJS. Abra o seu editor HTML favorito e digite o seguinte código: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro de Alunos AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
<script type="text/javascript">
// vamos criar uma nova aplicação
var app = angular.module('CadAlunos', []);
// vamos criar o controller Aluno
app.controller('Aluno', function ($scope){
$scope.nome = "Osmar J. Silva";
$scope.curso = "Sistemas de Imformação";
});
</script>
<div ng-app="CadAlunos" ng-controller="Aluno">
<h1>Nome: {{nome}} - Curso: {{curso}}</h1>
</div>
</body>
</html>
Ao abrir esta página no navegador você terá o seguinte resultado: Nome: Osmar J. Silva - Curso: Sistemas de Imformação Veja que primeiro nós criamos uma nova aplicação AngularJS chamada "AngularJS" com a linha: var app = angular.module('CadAlunos', []); Em seguida criamos o controller Aluno e passamos a ele o objeto $scope. É ele que nos possibilidade acessar as propriedades e métodos em um controller a partir da view. Em outras dicas desta seção eu mostro como criar métodos (funções) em um controller. Para finalizar, experimente colocar o código para a criação da aplicação AngularJS em um arquivo .js separado. Faça o mesmo com o código do controller. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de AngularJS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
