Tarea

• Inserción de código en etiquetas html.
• Verificar el funcionamiento de la directiva estructural ngIf: mostrar y ocultar un elemento html en base a una variable.
• Verificar el funcionamiento de la directiva estructural ngFor: recorrer una lista.
• Crear un botón para ocultar una lista.
• Buscar en una lista y mostrar si hay o no coincidencias.

Procesos

1. INSTALACIÓN DE ANGULAR

Como prerrequisito descargar e instalar Node JS https://nodejs.org/en

Ejecutar el comando: npm install -g @angular/cli

Crear un proyecto: ng new nombre_proyecto

Acceder al proyecto: cd nombre_proyecto

Ejecutar el servidor: ng serve o npm start

En el navegador se debe mostrar la página que crea angular por defecto

Instalar librerías externas con el comando: npm install bootstrap jquery --save 

Configurar las librerías, ir al archivo angular.json y agregar los styles y scripts respectivos:

"styles": [

"src/styles.css",

"./node_modules/bootstrap/dist/css/bootstrap.min.css”

],

"scripts": [

"./node_modules/jquery/dist/jquery.min.js",                             

"./node_modules/bootstrap/dist/js/bootstrap.min.js”

]

En el archivo app.component.ts que se encuentra en la ruta src/app crear una variable de tipo string denominada autor e inicialícela.

public autor = "Mateo";

En el archivo app.component.html que se encuentra en la ruta src/app borrar el contenido que viene por defecto llamar a la variable autor, para lo cual deberá colocar dicha variable entre dobles llaves “{{ autor }}”.

<div style="text-align:center">

  <h1>

    Proyecto realizado en Angular

  </h1>

  <h3>

    Autor: {{ autor }}

  </h3>

</div>

Ahora verificar en el navegador que no se esté mostrando el valor de la variable autor.

2. DIRECTIVA NGLF

Para identificar el funcionamiento de la directiva estructural ngIf primero definir una variable de tipo booleno (en este caso se denominará a la variable como mostrar_autor) en el archivo app.component.ts que se encuentra en la ruta src/app. Inicializar la variable en false.

public mostrar_autor = false;

Luego en el archivo app.component.html insertar la directiva ngIf y hacer uso de la variable booleana.

<div style="text-align:center">

  <h1>

    Proyecto realizado en Angular

  </h1>

  <h3 *ngIf="mostrar_autor==true">

    Autor: {{ autor }}

  </h3>

</div>

Con lo cual se miramos el navegador, ahora no se muestra el autor.

3. DIRECTIVA NGFOR

Para identificar el funcionamiento de la directiva estructural ngFor primero definir una variable de tipo booleno (en este caso se denominará a la variable como mostrar_autor) en el archivo app.component.ts que se encuentra en la ruta src/app. Inicializar la variable en true.

Crear un arreglo e inicialícelo con algunos nombres de personas.

public mostrar_lista = true;

public lista_de_usuarios = [ 'Ana', 'Martha', 'Ricardo', 'Mateo', 'Juan'];

Luego en el archivo app.component.html insertar la directiva ngIf y ngFor para mostrar la lista y recorrer la misma.

    <ul  *ngIf="mostrar_lista">

        <li *ngFor="let users of lista_de_usuarios">

            {{users}}

        </li>

    </ul>

Ahora verificar en el navegador que se esté mostrando el contenido del arreglo.

Crear un método en el archivo app.component.ts para cambiar de estado la a variable mostrar_lista cada vez que se pulse en un botón. Además, crear una variable string con el texto Ocultar lista.

public texto_boton = "Ocultar lista"; 

change():void{

    this.mostrar_lista = !this.mostrar_lista;

    if(this.mostrar_lista == false){

      this.texto_boton = "Mostrar lista";

    }else{ this.texto_boton = "Ocultar lista";

    }

  }

En el archivo app.component.html agregar un botón, y cuando se pulse en dicho elemento se llame el método change() para mostrar u ocultar la lista.

<button (click)="change()" class="btn btn-info" > {{texto_boton}}</button>

Y si luego se procede a pulsar en el botón se mostrará nuevamente la lista.

Ahora crear un método en el archivo app.component.ts para buscar elementos de la lista. Sólo indicar con un alert si hay coincidencias o no.

  buscar() {

    var hay_coincidencias = false;

    for(var i=0; i<this.lista_de_usuarios.length; i++){

      if(this.lista_de_usuarios[i] == this.autor){

        hay_coincidencias = true;

      }

    } if(hay_coincidencias==true){

      alert('Si hay coincidencias con la búsqueda');

    }else{

      alert('No hay coincidencias con la búsqueda');

    }

  }

El archivo app.component.html crear los elementos necesarios, como por ejemplo enlazar el input con la propiedad autor, y en el botón al hacer clic llamar al método correspondiente.

<div class="row">

    <div class="col-md-3">

        <label>Nombre</label>

        <input class="form-control" [(ngModel)]="autor" #ctrl="ngModel" required>     

    </div>

    <div class="col-md-3">

        <br>

        <button (click)="buscar()" class="btn btn-success"> Buscar </button>             

    </div>

</div>

Recursos

Evaluación

RUBRICA DE EVALUACIÓN DE LA GUÍA PRÁCTICA (10)
CONCEPTO	MALO (0,5)	REGULAR (1)	BUENO (1,5)	EXCELENTE (2)
TRABAJO EN EQUIPO	El alumno tuvo una mínima o nula colaboración en el proyecto <70%	El alumno colaborará con el equipo de trabajo en un80-70% de las actividades requeridas para el proyecto	El alumno colaborará con el equipo en 90-80 % de las actividades propuestas en el proyecto	Colaboración, en el trabajo en equipo en donde el alumno participa activamente en todas las actividades (100%) descritas en el plan del proyecto.
FUNCIONALIDAD DEL PROTOTIPO	El proyecto no funciona adecuadamente <70%	El proyecto funciona a un  80-70% de lo planeado	El proyecto funciona en un 90-80 % de lo planeado	Funcionalidad, en donde el prototipo funciona correctamente (en un 100%) de acuerdo a lo planteado en el proyecto.
DOMINIO  DE LA APLICACIÓN	El alumno ignora la forma de operar del prototipo <70%	El alumno conoce y opera en un 70-80% el prototipo	El alumno conoce 80-90 % sobre la operatividad del prototipo.	Operatividad, en donde el alumno presenta el dominio de todos controles del prototipo (100%)
CREATIVIDAD	En el prototipo propuesto, no Se observan ninguno  de los elementos a evaluar (originalidad, inventiva e imaginación creativa)	En el prototipo propuesto, se observan 1 de los elementos a evaluar (originalidad, inventiva e imaginación creativa)	En el prototipo propuesto, se observan 2 de los elementos a evaluar (originalidad, inventiva e imaginación creativa)	Creatividad, dirigida al uso de los elementos y el producto final, partiendo de un conocimiento existente a un producto no existente u optimizando lo existente Evaluando la originalidad, inventiva e imaginación creativa
VERIFICACIÓN	No cumple lo estipulado.	Para el desarrollo del proyecto hace falta 1 proceso fundamental	El proyecto cumple con lo limitado.	La estructura del proyecto cumple con los requerimientos (ejemplo el diseño de la base de datos, prototipo, etc), referente a lo solicitado en el proyecto.
TOTAL

Notas

Universidad Técnica de Machala.

Facultad de Ingeniería Civil

Carrera de Ingeniería de Sistemas.