Академический Документы
Профессиональный Документы
Культура Документы
Formación especializada TI
Angular
Framework Front-end
Crear un proyecto en angular
Para crear una aplicación en Angular se utiliza la terminal de línea de comandos
angular CLI que ya habíamos instalado. Esta nos brinda comandos enfocados a
la creación de aplicaciones en Angular, generadores de código y comandos para
ejecutar el proyectos o pruebas. Para crear una aplicación vamos usar el
siguiente comando.
ng new my-app
styles.css Tus estilos globales van aquí. La mayoría de las veces querrá tener
estilos locales en sus componentes para facilitar el mantenimiento, pero
los estilos que afectan a toda su aplicación deben estar en un lugar
central.
Las funciones decoradoras comienzan por una "@" y a continuación tienen un nombre. Ese
nombre es el de aquello que queramos decorar, que ya tiene que existir previamente.
Podríamos decorar una función, una propiedad de una clase, una clase, etc.
Como crear componentes
Como se menciono anteriormente las aplicaciones de angular se basa en dividir
nuestra app en componentes, para facilitar el desarrollo y no tener que generar
manualmente la estructura de un componente, podemos usar angular CLI.
Para usarla debemos incluirla como un atributo de HTML anteponiendo un asterisco y usando
camelCase iniciando en minúscula, luego ponemos un igual y entre comillas va a ir el código en
typeScript que queremos validar.
Directiva ngIf asociado a un evento (click)
Ahora para que nuestra aplicación sea un poco más dinámica agreguemos un evento click a un botón
para cambiar el estado de una variable y hacer que se muestre o no un párrafo con ngIf.
Para agregar un evento click en angular se debe usar la siguiente sintaxis (click)=“código typeScript”.
Directiva ngIf-else
Ahora veamos como podemos agregar un else a nuestra validación. Para esto en nuestra directiva ngIf,
luego de la condición agregamos un punto y coma (;) y agregamos la palabra reservada else a
continuación debe existir una variable que referencia para dar otro comportamiento. Por ejemplo para
mostrar otro elemento podemos usar esta variable de referencia dentro de una directiva llamada ng-
template donde podemos pasar como atributo esta variable.
Directiva ng-for
Esta directiva nos permite recorrer elementos de nuestros componentes como arrays.
Para esto usamos la directiva ngFor dentro del elemento HTML que queremos iterar y
dentro creamos una variable referencia que vamos a interpolar para mostrar el dato.
Directiva ng-class
Esta directiva nos permite agregar o quitar clases a elementos HTML desde
angular. Para usarla debemos agregar entre llaves ([ ]) la directiva ngClass luego
un igual y entre comillas una variable de typeScript.
Directiva ng-class y enventos (click)
Al igual que hicimos con el ngIf, con ngClass también podemos accionar esta
directiva por medio de un evento, como por ejemplo, el click.
Rutas
En las single page application, vemos que podemos cambiar el contenido de la pagina dinámicamente
pero también en muchas ocasiones la ruta del navegador también cambia. De esta manera el usuario
tiene la sensación de que ya esta en otro contenido de la pagina. Además este es un buen modo de
organizar nuestra aplicación. Hacer el enrutamiento con Angular es bastante sencillo.
Ahora dentro de la propiedad imports del decorador @NgModule vamos a agregar la siguiente
configuración:
Ruta por defecto
Dentro de las rutas podemos especificar que si una ruta esta vacía nos lleve a
determinado componente por ejemplo al componente de inicio. Para redirigir a la
pagina de inicio cuando no se encuetre una ruta podemos definir un path con el
método redirect.
Router-outlet
Ahora vamos a agregar una nueva directiva que tenemos disponible que es
Router-Outlet por medio de la cual se van a ir cargando nuestros componentes
dependiendo del path que este en la barra de dirección de nuestro navegador. Lo
correcto es agregar esta directiva en nuestro app.component.html
Enlaces
Ahora para que se cumpla el objetivo de Angular de no tener que recargar las
paginas vamos a agregar los enlaces en una barra de navegación. Para esto no
vamos a usar anclas con href ya que esto sobre carga la pagina, así que
usaremos una directiva de router llamada Link.