Desarrollar un ejemplo muy básico para conocer la estructura de lo que
se hará durante esta etapa de familiarización con AngularJS utilizando el
archivo angular.min.js
1.
Crear un archivo HTML con el nombre
AngularJS-test-00.html
Estructura:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
2.
Incluir el AngularJS archivo JavaScript (angular.min.js) en la página HTML para hacer
uso de ello:
<head>
<script src="angular.min.js"></script>
</head>
3.
Implementar la demo app para esto se añade el atributo ng-app al elemento HTML de la raíz de la aplicación angular.min.js:
<body ng-app="myapp">
</body>
4.
Implementar la vista de la demo:
<div ng-controller="UsoController" >
<h2>Bienvenido {{objBienvenido.Participante}} al mundo de
AngularJS!!!</h2>
</div>
Donde el controlador ng-controlador
le dice a AngularJS para hacer uso desde la VISTA al objeto objBienvenido.Participante en el
lugar indicado del HTML.
5.
Implementar el controlador de la demo:
<script>
angular.module("myapp", [])
.controller("UsoController", function ($scope) {
$scope.objBienvenido
= {};
$scope.objBienvenido.Participante
= "Hadson";
});
</script>
Donde el controlador implementar la función dentro del
módulo de la aplicación myapp.
La función de controlador agrega un objeto objBienvenido – código JavaScript, y
en ese objeto se añade un campo de nombre Participante donde el parámetro $scope
construye el modelo que es parte del controlador
Estructura completa:
<!doctype html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="UsoController" >
<h2>Bienvenido {{objBienvenido.Participante}} al mundo de
AngularJS!!!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("UsoController", function ($scope) {
$scope.objBienvenido
= {};
$scope.objBienvenido.Participante
= "Hadson";
});
</script>
</body>
</html>
Descripción del código anterior - en detalles:
Descripción del código anterior - en detalles:
Si queremos verlo desde el patrón MCV – a nivel de estructura de
código html sería: donde el modelo es la acción que realiza el controlador que se encarga de alimentar o devolverlo datos hacia la vista.
Todos los ejemplos que continúan tendrán esta misma estructura de desarrollo - algo de lectura para iniciar los ejemplos Qué es AngularJS y Iniciando con AngujarJS. Nos vemos en el siguiente test.
0 Comentarios