INSTITUTO TECNOLÓGICO SUPERIOR DE PEROTE.

INGENIERÍA INFORMÁTICA.

APLICACIONES MOVILES II.

PRACTICA 2.

CRISTIAN IGNACIO GARCÍA BARRALES.

LUZ ARELI MARÍN VÁZQUEZ.

14050034

MARZO DEL 2018

ÍNDICE
INTRODUCCIÓN .............................................................................................................................. 3
HERRAMIENTAS A UTILIZAR ..................................................................................................... 4
PROCEDIMIENTO ........................................................................................................................... 5
RESULTADO .................................................................................................................................. 20

2
 INTRODUCCIÓN

En esta práctica trabajaremos con el Framework, Angular.min.js, ya que como

sabemos este Framework nos será de gran utilidad, para trabajar en el desarrollo
de sitios web, las herramientas que contiene nos ayudara en el proceso y desarrollo
de nuestros ejercicios,
Vamos a empezar a realizar una práctica muy básica, utilizando el framework
Angular Js, ya que este framework nos ayuda en el desarrollo de sitios web,
redactaremos el procedimiento, para ejecutar una práctica muy sencilla y muy fácil
de realizar, ya que esta práctica se basa en generar al usuario las tablas que le
ordenemos.
Vamos a realizar una serie de pasos de acuerdo al funcionamiento de este ejercicio,
de acuerdo con los requerimientos que la práctica valla pidiendo así mismo
conociendo los métodos y la estructura que tiene.

3
 HERRAMIENTAS A UTILIZAR

 Computadora
 Sublime Text o algún otro editor de texto
 Navegador
 WampServer o Xammp.

4
 PROCEDIMIENTO

1.-Empezaremos la práctica, comenzando con posicionarnos en “Este equipo” y en “Disco local(C).

2.- Ahora nos dirigimos a Wamp64.

5
3.- Ahora nos vamos a WWW.

4.- Dentro de la carpeta de “WWW” vamos a hacer una nueva carpeta, llamada
Practica3.1_Angular

6
5.- Aquí está la nueva carpeta llamada: practica3.1_Angular

6.- Dentro de la Carpeta “Practica3.1_Angular” vamos a poner una nueva carpeta.

7
7.- Esta nueva carpeta tendrá el nombre de js.

8.- Nos vamos a nuestro navegador y descargaremos el Framework que vamos a utilizar que es
ANGULARJS.

8
9.- Una vez que este descargado nuestro Framework, lo vamos a seleccionar y lo copiaremos.

10.- Ahora lo pegaremos en la carpeta que hicimos anteriormente dentro de Practica3.1_Angular y

dentro de js.

9
Como aquí se observa.

11.- Ahora empezaremos a trabajar en nuestra área de trabajo, abrimos Sublime Tex y
escribiremos HTML: para que empiece la interfaz de HTML.

10
12.- Lo que sigue es empezar a trabajar en Sublime Text, lo primero que realizaremos es escribir
ng-app =”practica”, ng-app es una directiva de angularJs, que nos va a permitir anotar cualquier
elemento existente, permite modificar una sección en particular.

13.- Ahora vamos a dar el título de la práctica y vamos a especificar el tipo de Framework con el
que se estará trabajando, así mismo la ubicación de este.

11
14.- Ahora escribiremos la etiqueta ng-controller, ya que esta etiqueta nos dará disponibilidad a
todos sus datos, los cuales asociaremos en esta práctica.

12
15.- Ahora lo que haremos será escribir el título de nuestra tabla.

16.- Ahora vamos a utilizar la etiqueta ng-repeat, con esta etiqueta estamos haciendo referencia a
la repetición de veces de alguna instancia o para mostrar una fila de tabla para cada objeto y una
tabla de datos para cada propiedad del objeto.

13
17.- Ahora vamos a decir que es lo que queremos que se repita.

18.- Ahora lo que se hará será, guardar la practica con Ctrol+s o en File, Save As.

14
19.- Lo vamos a guardar con el nombre de index.html y con el tipo de HTML.

20.- Ahora vamos a ingresar un New File.

15
21.- Lo primero que haremos será guardar el New File y le daremos de nombre controller.js

22.- Ahora pondremos un contenedor con el código Angular.module(“practica”,[]) ya que estos

sirven para los controladores de la aplicación.

16
23.- Ahora vamos a realizar las tablas generando dos veces el mismo usuario, contraseña, nombre
y fecha de nacimiento.

22.- Para finalizar el ejercicio vamos a guardar la practica.

17
23.-Ahora solo ejecutamos en nuestro navegador

24.-Y aquí está la tabla que generamos

18
25.- Ahora vamos a editar el código en index.html para hacer un nuevo registro y acomodar la
tabla.

26.- Y proseguimos a editar el código en controller.js.

19
 RESULTADO
27.-Aquí está el resultado.

20