terça-feira, 26 de julho de 2016

AngularJS - Módulos

O AngularJS tem um contexto modular. Os módulos são usados para separar a lógica, declarando services, controlllers,  aplicação, entre outros, mantendo o código organizado. Os módulos são definidos em arquivos js , separados, e nomeados de acordo com o arquivo module.js. Neste exemplo temos dois módulos.

Application Module (Módulo de Aplicação) - usado para inicializar uma aplicação com o Controller.
Controller Module (Controle de Módulo) - utilizado para definir o controller.

Módulo de Aplicação


Arquivo: mainApp.js

var mainApp = angular.module("mainApp", []);

Aqui temos declarado um módulo de aplicação chamado 'mainApp' usando a função angular.module(). Nós passamos um array vazio para ele. Esse array geralmente contém módulos dependentes.

Módulo de Controle


Arquivo: alunoController.js

mainApp.controller("alunoController", function($scope) {
   $scope.aluno = {
      nome: "Jack",
      sobrenome: "Bauer",
      
      materias:[
         {nome:'Física',nota:70},
         {nome:'Química',nota:80},
         {nome:'Matemática',nota:80},
         {nome:'Português',nota:95},
         {nome:'Geografia',nota:85}
      ],
      
      nomeCompleto: function() {
         var alunoObject;
         alunoObject = $scope.aluno;
         return alunoObject.nome + " " + alunoObject.sobrenome;
      }
   };
});
Aqui temos declarado um módulo do controller alunoController usando a função mainApp.controller.

Usando Módulos

<div ng-app = "mainApp" ng-controller = "studentController">
   ...
   <script src = "mainApp.js"></script>
   <script src = "studentController.js"></script>
 
</div>
Aqui nós usamos o módulo de aplicação utilizando a diretiva ng-app e controlador usando a diretiva controller ng-controller. Importamos mainApp.js e alunoController.js na página principal.

Exemplo Completo:


Arquivo: teste_angular.html

<html>
   
   <head>
      <title>Angular JS Modules</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src = "/angularjs/src/module/mainApp.js"></script>
      <script src = "/angularjs/src/module/alunoController.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
         
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
      
   </head>
   
   <body>
      <h2>Módulos</h2>
      <div ng-app = "mainApp" ng-controller = "alunoController">
         
         <table border = "0">
            <tr>
               <td>Nome:</td>
               <td><input type = "text" ng-model = "aluno.nome"></td>
            </tr>
         
            <tr>
               <td>Sobrenome: </td>
               <td><input type = "text" ng-model = "aluno.sobrenome"></td>
            </tr>
         
            <tr>
               <td>Nome Completo: </td>
               <td>{{aluno.nomeCompleto()}}</td>
            </tr>
         
            <tr>
               <td>Matéria:</td>
               <td>
               
                  <table>
                     <tr>
                        <th>Nome</th>
                        <th>Notas</th>
                     </tr>
                  
                     <tr ng-repeat = "materia in aluno.materias">
                        <td>{{ materia.nome }}</td>
                        <td>{{ materia.nota }}</td>
                     </tr>
                  </table>
                  
               </td>
            </tr>
         </table>
         
      </div>
      
   </body>
</html>

Arquivo: mainApp.js

var mainApp = angular.module("mainApp", []);

Arquivo: alunoController.js

mainApp.controller("alunoController", function($scope) {
   $scope.aluno = {
      nome: "Jack",
      sobrenome: "Bauer",
      
      materias:[
         {nome:'Física',nota:70},
         {nome:'Química',nota:80},
         {nome:'Matemática',nota:80},
         {nome:'Português',nota:95},
         {nome:'Geografia',nota:85}
      ],
      
      nomeCompleto: function() {
         var alunoObject;
         alunoObject = $scope.aluno;
         return alunoObject.nome + " " + alunoObject.sobrenome;
      }
   };
});

 OBS: Fique atento ao caminho especificado quando chamar a biblioteca do AngularJS. Ele depende de como você organiza sua aplicação.

Saída:


Testando o arquivo teste_angular.html



Postado por às Nenhum comentário:

sábado, 23 de julho de 2016

AngularJS - HTML DOM

As seguintes diretrizes podem ser usadas para vincular dados do aplicativo aos atributos dos elementos DOM HTML.

Sr.No.NomeDescrição
1ng-disabledDesativa comando.
2ng-showMostra comando.
3ng-hideEsconde comando.
4ng-clickEvento de click.

Diretiva ng-disabled


Adicione o atributo ng-disabled a um botão HTML e o passe a uma model. Vincule a model a uma checkbox.

<input type = "checkbox" ng-model = "showHide1">Mostrar Botão
<button ng-show = "showHide1">Click!</button>

Diretiva ng-hide


Adicione o atributo ng-hide a um botão HTML e o passe a uma model. Vincule a model a uma checkbox.

<input type = "checkbox" ng-model = "showHide2">Esconder Botão
<button ng-hide = "showHide2">Click!</button>

Diretiva ng-click


Adicione o atributo ng-click a um botão HTML e atualize uma model. Vincule a model com o html.

p>Total de clicks: {{ contador }}</p>
<button ng-click = "contador = contador + 1">Click!</button>

Exemplo Completo:

<html>
   
   <head>
      <title>AngularJS HTML DOM</title>
   </head>
   
   <body>
      <h2>DOM HTML</h2>
      <div ng-app = "">
         
         <table border = "0">
            <tr>
               <td><input type = "checkbox" ng-model = "enableDisableButton">Desabilitar Botão</td>
               <td><button ng-disabled = "enableDisableButton">Click!</button></td>
            </tr>
            
            <tr>
               <td><input type = "checkbox" ng-model = "showHide1">Mostrar Botão</td>
               <td><button ng-show = "showHide1">Click!</button></td>
            </tr>
            
            <tr>
               <td><input type = "checkbox" ng-model = "showHide2">Esconder Botão</td>
               <td><button ng-hide = "showHide2">Click!</button></td>
            </tr>
            
            <tr>
               <td><p>Total de clicks: {{ contador }}</p></td>
               <td><button ng-click = "contador = contador + 1">Click!</button></td>
            </tr>
         </table>
         
      </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

Resultado:



Postado por às Um comentário:
Assinar: Postagens (Atom)