Ticker

6/recent/ticker-posts

Ejemplo AngularJS - Test 00

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>
</html>

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:
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 AngujarJSNos vemos en el siguiente test.

Publicar un comentario

0 Comentarios