Mostrando las entradas con la etiqueta AngularJS. Mostrar todas las entradas
Mostrando las entradas con la etiqueta AngularJS. Mostrar todas las entradas

viernes, 10 de junio de 2016

Conozca acerca de WCF y Construya una Aplicación

En siguiente articulo quiero compartirles los conceptos necesarios para implementar servicios WCF (Windows Communication Foundation). Además, conoceremos acerca de como crear y cuales con los proyectos de tipo WCF, publicación en el IIS (Internet Information Server) y como consumir dicho servicio ya publicado.

Requisitos para la implementación:
- Microsoft SQL Server Management Studio 2008.
- Microsoft Visual Studio Ultimate 2010 o 2012.
- Framework 4 y MCV 4.
- Enterprise Library 5.
- AngularJS v1.2.24.
- Y algo de sentencia SQL (para manipulación de datos desde base de datos).

Aquí dejo todos los pasos a seguir:
Introducción a WCF - Fase I
Conexión a datos WCF - Fase II
Publicar Servicios WCF - Fase III
Consumir servicio WCF - Fase IV

Pantalla de lo que se logrará al finalizar



Sugerencias y opiniones son bienvenidos o escríbanos a hadson1@gmail.com

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 ;)