JPlol

Uma aplicação AngularJS utiliza controllers para controlar o fluxo de dados na aplicação. Um controller é definido utilizando a diretiva ng-controller. Um controller é um objeto JavaScript que contém atributos / propriedades e funções. Cada controller aceita $scope como um parâmetro que se refere à aplicação / módulo que é gerenciada pelo controller.


<div ng-app = "" ng-controller = "alunoController">

...

</div>

Aqui temos declarado um controller de alunoController usando a diretiva ng-controller. Como próximo passo, vamos definir o alunoController da seguinte forma:


<script>

   function alunoController($scope) {

      $scope.aluno = {

         nome: "Jack",

         sobrenome: "Bauer",

         nomeCompleto: function() {

            var alunoObject;

            alunoObject = $scope.aluno;

            return alunoObject.nome + " " + alunoObject.sobrenome;

         }

      };

   }

</script>

O alunoController é definido como um objeto JavaScript passando $scope como argumento.
$scope liga a view ao alunoController.
Nome e sobrenome são duas propriedades do objeto $scope.aluno. Nós passamos os valores padrão para eles.
O nomeCompleto é a função do objeto $scope.aluno cuja tarefa é devolver o nome concatenado.

Agora podemos utilizar a propriedade aluno alunoController usando ng-model ou usar expressions como no exemplo a seguir:

Insira o nome: <input type = "text" ng-model = "aluno.nome"><br>
Insira o sobrenome: <input type = "text" ng-model = "aluno.sobrenome"><br>
<br>
Inserindo: {{aluno.nomeCompleto()}}

Estamos pegando aluno.nome e aluno.sobrenome pelas input boxes.

Depois passamos aluno.nomeCompleto() para o HTML.

Agora, sempre que você digitar qualquer coisa no nome e no sobrenome, você pode ver o nome completo sendo atualizado automaticamente.

Exemplo:

Arquivo: test_angularjs.htm

<html>
   <head>
      <title>Angular JS Controller</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   <body>
      <h2>Exemplo Controller</h2>
      <div ng-app = "mainApp" ng-controller = "alunoController">
         Insira o nome: <input type = "text" ng-model = "aluno.nome"><br><br>
         Insira o sobrenome: <input type = "text" ng-model = "aluno.sobrenome"><br>
         <br>
         Você está inserindo: {{aluno.nomeCompleto()}}
      </div>
      <script>
         var mainApp = angular.module("mainApp", []);
         mainApp.controller('alunoController', function($scope) {
            $scope.aluno = {
               nome: "Jack",
               sobrenome: "Bauer",
               nomeCompleto: function() {
                  var alunoObject;
                  alunoObject = $scope.aluno;
                  return alunoObject.nome + " " + alunoObject.sobrenome;
               }
            };
         });
      </script>
   </body>
</html>

Saída:

As expressions são usadas para vincular dados da aplicação com o html. Elas são escritas entre chaves duplas como {{expression}}. Comportam-se de forma idêntica a diretiva ng-bind. As expressions de AngularJS são expressões JavaScript puras e mostram os dados onde eles são utilizados.

Usando números

<p>Preço do livro : R$ {{custo * quantidade}}</p>

Usando strings

<p>E aee {{estudante.nome + " " + estudante.sobrenome}}!</p>

Usando objetos

<p>Número: {{estudante.numero}}</p>

Usando array

<p>Matéria(Math): {{marks[1]}}</p>

Arquivo: test_angularjs.htm

<html>
   
   <head>
      <title>AngularJS Expressions</title>
   </head>
   
   <body>
      <h1>Expressions</h1>
      
      <div ng-app = "" ng-init = "quantidade = 1; custo = 50; estudante = {nome:'Jack',sobrenome:'Bauer',numero:150};marks = [1,2,3]">
         <p>E aee {{estudante.nome + " " + estudante.sobrenome}}!</p>
         <p>Preço do livro : R$ {{custo * quantidade}} </p>
         <p>Número: {{estudante.numero}}</p>
         <p>Matéria(Math): {{marks[1]}}</p>
      </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

quarta-feira, 13 de julho de 2016

AngularJS - Controllers

Exemplo:

Saída:

terça-feira, 12 de julho de 2016

AngularJS - Expressions

Usando números

Saída:

Total de visualizações de página