martes, 28 de julio de 2015

Ejemplo AngularJS - Test 03

Ahora a nuestro ejemplo implementaremos un poco de CSS para una mejor presentación y darnos cuenta que AngularJS nos brinda esta posibilidad de poder combinar HTML5 y CSS3 que hacen que nuestras aplicaciones web se acerca mas a la funcionalidad de una aplicación de escritorio.

Maquetación combinando HTML5 y CSS3
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Table</title>
<script src="angular.min.js"></script>

<style>
tableth , td {
  border1px solid blue;
  border-collapsecollapse;
  padding2px;
}
table tr:nth-child(odd) {
  background-color#54A0CD;
}
table tr:nth-child(even) {
  background-color#7CBBF2;
}
</style>

</head>
<body>
<h2>AngularJS Table</h2>
<div ng-app="mainApp" ng-controller="AlumnoController">
       <table border="0">
             <tr><td>Nombres:</td><td><input type="text" style="background-color:#54A0CD" ng-model="Alumno.pNom"></td></tr>
             <tr><td>Apellidos: </td><td><input type="text" style="background-color:#54A0CD" ng-model="Alumno.pApe"></td></tr>
             <tr><td>Nombres y Apellidos: </td><td>{{Alumno.pApeNom()}}</td></tr>
             <tr><td>Pensión: </td><td>{{Alumno.pPens | currency:"S/."}}</td></tr>
             <tr><td>Cursos:</td><td>
                           <table>
                              <tr>
                                    <th>curso</th>
                                    <th>cod</th>
                              </tr>
                              <tr ng-repeat="Cursos in Alumno.mCursos">
                                    <td>{{ Cursos.curso }}</td>
                                    <td>{{ Cursos.cod }}</td>
                              </tr>
                           </table>
             </td></tr>
       </table>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.controller('AlumnoController'function ($scope) {
        $scope.Alumno = {
            pNom: "SEGUNDO HADSON",
            pApe: "PAREDES CORDOVA",
            pPens: 1230,
            mCursos: [
                       { curso: 'Diseño de Proceso', cod: 70 },
                       { curso: 'Ingenieria de Requerimiento', cod: 80 },
                       { curso: 'Gestión de Proyecto', cod: 65 }
            ],
            pApeNom: function () {
                var AlumnoObject;
                AlumnoObject = $scope.Alumno;
                return AlumnoObject.pNom + " " + AlumnoObject.pApe;
            }
        };
    });
</script>
</body>
</html>

Resultado de maquetación
Angular JS Table

AngularJS Table

Nombres:
Apellidos:
Nombres y Apellidos: {{Alumno.pApeNom()}}
Pensión: {{Alumno.pPens | currency:"S/."}}
Cursos:
curso cod
{{ Cursos.curso }} {{ Cursos.cod }}

Como resultado de nuestra ejecución
Espero que revisen mucho mas de este Framework en mi opinión es una muy buena alternativa para poder realizar paginas SPA para nutrir nuestro Front End. Mejor aun si implementamos con JQuery y AngularJS.

Link para la descarga de todos los ejemplos - Test incluyendo el AngularJS.js


jueves, 23 de julio de 2015

Ejemplo AngularJS - Test 02

Ahora implementaremos un pequeño ejemplo que nos permite filtrar datos desde una matriz haciendo uso de la directiva ng-repeat y el servicio filter, independientemente de la funciones uppercase y lowercase.

La directiva ng-repeat básicamente nos sirve para generar un bucle (parecido a un bucle de java o C#).


<!DOCTYPE html>
<html lang="es">
<head>
       <title>Filtrar datos</title>
       <script src="angular.min.js"></script>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      
       <script>
           var mainApp = angular.module("mainApp", []);

           mainApp.controller('studentController', function ($scope) {
               $scope.scopeAlumno = {
                   pNom: "SEGUNDO HADSON",
                   pApe: "PAREDES CORDOVA",
                   pPens: 1230,
                   /*Definir Array*/
                   mCursos: [
                           { curso: 'Diseño de Proceso', cod: 70 },
                           { curso: 'Ingenieria de Requerimiento', cod: 80 },
                           { curso: 'Gestión de Proyecto', cod: 65 }
                   ],

                   pNomApe: function () {/*Función para concatenar los valores pNom y pApe*/
                       var pObjAlumno;
                       pObjAlumno = $scope.scopeAlumno;
                       return pObjAlumno.pNom + " " + pObjAlumno.pApe;
                   }
               };
           });
             </script>
</head>
<body>

<h3>Ahora construiremos una matriz y haremos uso de filter, uppercase, lowercase</h3>
<h5>filter : filtrar datos de la matriz<br>
       uppercase : converte los datos en mayusculas<br>
       lowercase : converte los datos en minuscula<br>
       ng-repeat : directiva que nos permite listar los datos de la matriz</h5>
<div ng-app="mainApp" ng-controller="studentController">
<hr>
<table border="0">
       <tr align=center><td collapse=3>INGRESAR DATOS</td></tr>
       <tr><td>Nombres:</td><td><input type="text" ng-model="scopeAlumno.pNom"></td></tr>
       <tr><td>Apellidos: </td><td><input type="text" ng-model="scopeAlumno.pApe"></td></tr>
       <tr><td>Pension: </td><td><input type="text" ng-model="scopeAlumno.pPens"></td></tr>
</table>
<hr>
<br/>
<table border="0">
       <!--Aplicar uppercase (mayusculas) y lowercase (minuscula) en la expresion-->
       <tr><td>DATOS MAYUSCULA : </td><td>{{scopeAlumno.pNomApe() | uppercase}}</td></tr>
       <tr><td>datos minuscula : </td><td>{{scopeAlumno.pNomApe() | lowercase}}</td></tr>
       <!--Aplicar currency para el tipo de dato moneda por default está con tipo dolar - así que
             para poder modificar aplicamos el currency:"S/." (después de los dos puntos antepone que usaremos algún tipo de moneda definido)-->
       <tr><td>PENSION: </td><td>{{scopeAlumno.pPens | currency:"S/."}}</td></tr>
       <tr><td><b>Filtrar datos: </b></td><td><input type="text" ng-model="mCursos"></td></tr>

       <tr><td>Cursos:</td><td>
             <ul>
                    <!--Para listar los cursos se hace uso de la directiva ng-repeat (la funcionalidad es parecido al de un bucle) y uso del filtro incorporado y ordenamos por código.-->
                   
                <li ng-repeat="subject in scopeAlumno.mCursos | filter: mCursos |orderBy:'cod'">
                      {{ subject.curso + ', código: ' + subject.cod }}
                </li>
             </ul>
       </td></tr>
</table>
</div>
</body>
</html>

Imagen - Tiempo de ejecución

Nos vemos en el siguiente apartado ;)