Ticker

6/recent/ticker-posts

Ejemplo AngularJS - Test 01

En este ejemplo hice un cambio en cuando a posición del código script del la creación del controles. Además, debemos considerar los comentarios internos que se encuentran en todo la pagina HTML del dicho ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Angular JS Controller</title>
<!--1. Referenciamos el framework de JavaScript de código abierto-->
<script src="angular.min.js"></script>
<!--NOTA: Por ahora mantendré en script en la parte del head de la página, considerando que no es lo recomendable mantenerlo en esta parte de la página ya que en muchas ocasiones bloquean la descarga de otros contenido importantes de la página, como por ejemplo las imágenes, validaciones entre otros.-->
<script>
<!--2. Implementamos el modulo de la app-->
var mainApp = angular.module("mainApp", []);
<!--Creamos el controller de nombre AlumnoController-->
mainApp.controller('AlumnoController', function($scope) {
   <!--Creamos el objeto scopeAlumno-->
   $scope.scopeAlumno = {
      pNom: "S. Hadson",
      pApe: "Paredes Cordova",
         <!--Concatenamos ambos valores-->
      fullName: function() {
         var pObjAlumno;
         pObjAlumno = $scope.scopeAlumno;
         return pObjAlumno.pNom + " " + pObjAlumno.pApe;
      }
   };
});
</script>

</head>
       <body>
             <h4>AngularJS Test 01</h4>
             <!--3. Implementamos la app y asociamos el controller creado-->
             <div ng-app="mainApp" ng-controller="AlumnoController">
                    <!--4. Implementamos la vista - Pasando los valores pNom, pApe del objeto scopeAlumno-->     
                    Nombres: <input type="text" ng-model="scopeAlumno.pNom"><br><br>
                    Apellidos: <input type="text" ng-model="scopeAlumno.pApe"><br>
                    <br>
                    <!--Pasando el valor fullName en una expresión propio del AnjularJS-->   
                    Nombres y Apellidos: {{scopeAlumno.fullName()}}
             </div>
       </body>
</html>     

Ahora lo que se observa en la implementación se esta haciendo uso de la etiqueta input type="text" que es propio del html5, de esta manera AngularJS simplifica la manipulación de datos. Paulatinamente iremos viendo mas ejemplos donde usaremos mas etiquetas html5 que mostrarán información que es procesado por el controller.

Publicar un comentario

0 Comentarios