terça-feira, 2 de agosto de 2016

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




Postado por às

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)