JPlol: 2016

terça-feira, 2 de agosto de 2016

Ícones

É sempre importante ter algumas referências quando estamos enrascados procurando os componentes certos para nossas aplicações.

Decidi listar alguns sites que oferecem ícones muito bem elaborados para você utilizar em suas aplicações.

AngularJS - Includes

O HTML não suporta a incorporação de páginas html dentro de outra página html. Para conseguir essa funcionalidade são utilizadas as seguintes tecnologias:

Ajax - Busca e carrega dados em background sem a necessidade de reload da página.
Side Server Includes - JSP, PHP e outras tecnologias de servidor web podem incluir páginas HTML dentro de uma página dinâmica.

O AngularJS, pode incorporar páginas HTML dentro de uma outra página HTML usando a diretiva ng-include.

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

Exemplo Completo

Arquivo: testeAngular.html

<html>
   <head>
      <title>Angular JS Includes</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.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>Include</h2>
      
      <div ng-app = "mainApp" ng-controller="alunoController">
         <div ng-include = "'/angularjs/src/include/main.htm'"></div>
         <div ng-include = "'/angularjs/src/include/materias.htm'"></div>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('alunoController', function($scope) {
            $scope.aluno = {
               nome: "Jack",
               sobrenome: "Bauer",
               grana:500,
               
               materias:[
                  {nome:'Física',marks:70},
                  {nome:'Química',marks:80},
                  {nome:'Dinamarquês',marks:80},
                  {nome:'Inglês',marks:65},
                  {nome:'Japonês',marks:90}
               ],
               
               nomeCompleto: function() {
                  var alunoObject;
                  alunoObject = $scope.aluno;
                  return alunoObject.nome + " " + alunoObject.sobrenome;
               }
            };
         });
      </script>
      
   </body>
</html>

Arquivo: main.html

<table border = "0">
   <tr>
      <td>Insira o nome:</td>
      <td><input type = "text" ng-model = "aluno.nome"></td>
   </tr>
   
   <tr>
      <td>Insira o sobrenome: </td>
      <td><input type = "text" ng-model = "aluno.sobrenome"></td>
   </tr>
   
   <tr>
      <td>Nome: </td>
      <td>{{aluno.nomeCompleto()}}</td>
   </tr>
</table>

Arquivo: materias.html

<p>Materias:</p>
<table>
   <tr>
      <th>Nome</th>
      <th>Notas</th>
   </tr>
   
   <tr ng-repeat = "materia in aluno.materias">
      <td>{{ materia.nome }}</td>
      <td>{{ materia.notas }}</td>
   </tr>
</table>

OBS: Coloque os arquivos em um web server e teste.

Saída

segunda-feira, 1 de agosto de 2016

Podemos usar ng-click para lidar com cliques e usar as flags $dirty e $invalid para fazer as validações de forma perfeita. Use novalidate com uma declaração no formulário para desativar qualquer validação específica do browser. Os formulários fazem uso pesado de eventos AngularJS. Agora vamos uma rápida "bisoiada" nestes eventos.

Eventos

O AngularJS fornece vários eventos que podem ser vinculados ao HTML. Por exemplo, ng-click é normalmente vinculado com botões.

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

ng-click

Limpa os dados de um formulário usando a diretiva onclick em um botão.

<input name = "firstname" type = "text" ng-model = "firstName" required>
<input name = "lastname" type = "text" ng-model = "lastName" required>
<input name = "email" type = "email" ng-model = "email" required>
<button ng-click = "reset()">Reset</button>

<script>
   function studentController($scope) { 
      $scope.reset = function(){
         $scope.firstName = "Mahesh";
         $scope.lastName = "Parashar";
         $scope.email = "MaheshParashar@tutorialspoint.com";
      }   
      
      $scope.reset();
   }
</script>

ng-dbl-click

Permite especificar o comportamento personalizado em um evento dblclick.

<button ng-dblclick="count = count + 1" ng-init="count=0">
  Increment (on double click)
</button>
count: {{count}}

ng-mousedown

Permite especificar o comportamento personalizado no evento mousedown. No exemplo, clicando.

<button ng-mousedown="count = count + 1" ng-init="count=0">
  Increment (on mouse down)
</button>
count: {{count}}

ng-mouseup

Permite especificar o comportamento personalizado no evento mouseup. No exemplo, clicando.

<button ng-mouseup="count = count + 1" ng-init="count=0">
  Increment (on mouse up)
</button>
count: {{count}}

ng-mouseenter

Permite especificar o comportamento personalizado no evento mouseenter. No exemplo, passando o mouse sobre o botão.

<button ng-mouseenter="count = count + 1" ng-init="count=0">
  Increment (when mouse enters)
</button>
count: {{count}}

ng-mouseleave

Permite especificar o comportamento personalizado no evento mouseleave. No exemplo, bote o mouse sobre o botão e depois tire.

<button ng-mouseleave="count = count + 1" ng-init="count=0">
  Increment (when mouse leaves)
</button>
count: {{count}}

ng-mousemove

Permite especificar o comportamento personalizado no evento mousemove. No exemplo, enquanto o mouse se move sobre o botão o contador é incrementado.

<button ng-mousemove="count = count + 1" ng-init="count=0">
  Increment (when mouse moves)
</button>
count: {{count}}

ng-mouseover

Permite especificar o comportamento personalizado no evento mouseover. No exemplo, bote o mouse sobre o botão e o contador será incrementado.

<button ng-mouseover="count = count + 1" ng-init="count=0">
  Increment (when mouse is over)
</button>
count: {{count}}

ng-keydown

Faz a contagem da quantidade de caracteres na caixa de texto.

<input ng-keydown="count = count + 1" ng-init="count=0">
key down count: {{count}}

ng-keyup

Faz a contagem da quantidade de caracteres na caixa de texto e na outra caixa mostra o código do caractere digitado.

<p>Typing in the input box below updates the key count</p>
<input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}}

<p>Typing in the input box below updates the keycode</p>
<input ng-keyup="event=$event">
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>

ng-keypress

Faz a contagem da quantidade de caracteres na caixa de texto. Mesmo apagando o contador é incrementado.

<input ng-keypress="count = count + 1" ng-init="count=0">
key press count: {{count}}

ng-change

Avaliar a expressão dada quando o usuário altera a entrada. A expressão é avaliada imediatamente, ao contrário do evento onchange do JavaScript que só age no final de uma alteração (normalmente, quando o utilizador deixa o elemento de forma ou pressiona a tecla de retorno).

<script>
  angular.module('changeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.counter = 0;
      $scope.change = function() {
        $scope.counter++;
      };
    }]);
</script>
<div ng-controller="ExampleController">
  <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
  <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
  <label for="ng-change-example2">Confirmed</label><br />
  <tt>debug = {{confirmed}}</tt><br/>
  <tt>counter = {{counter}}</tt><br/>
</div>

Validate Data

$dirt- confirma que o valor foi alterado.

$invalid - confirma que o valor digitado é inválido.

$error - confirma o erro exato.

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>