<!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.
0 Comentarios