Angular¶

Introducción¶

Angular es un framework Javascript que permite crear aplicaciones de única página (Single Page Applications, SPA) reactivas.

Versiones de Angular¶

None

Angular CLI¶

Los pasos para crear una nueva aplicación son:

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

Previamente, necesitamos tener instalado node.js.

Utilizar Bootstrap¶

1. Se carga el módulo de bootstrap:

   npm install --save bootstrap@3
   

2. Se modifican los estilos en angular.json, cambiando

   "styles": [
     "src/styles.css"
   ],
   

   por

   "styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.css"
   ],
   

Componentes¶

Los componentes definen áreas de responsabilidad en la interfaz de usuario (UI), que permiten reutilizar conjuntos de funcionalidad UI.

Un componente consiste en tres cosas:

• Clase componente, clase TypeScript que controla los datos y la funcionalidad.
• Plantilla HTML, determina el UI.
• Estilos, define el aspecto.

app_root¶

Es el primer componente que se carga y es el padre de todos los demás componentes, se puede ver como la página base.

Creación¶

Los compomentes se crean añadiendo el decorador typescript @Component.

Por ejemplo:

import { Component } from '@angular/core';
@Component({
selector: 'app-required',
styleUrls: ['required.component.scss'],
// template: `This field is required.`,
templateUrl: 'required.component.html',
})
export class RequiredComponent { }

CLI¶

También se pueden crear desde la consola mediante

ng generate component <nombre_componente>

Módulos¶

Los módulos se utilizan para empaquetar diferentes piezas, por ejemplo componentes.

Databinding¶

None

String Interpolation¶

Se hace mediante {{ }}

Directivas¶

Las directivas son instrucciones en el DOM.

• ngIf: se utiliza para controlar condicionalmente cambios en la estructura del DOM.
• ngStyle: cambios de estilo de forma condicional
• ngClass: cambia dinámicamente clases de CSS
• ngFor
• etc.

Depuración¶

Para ayudarnos a depurar podemos utilizar la extensión de Chrome augury

Errores¶

Error al invocar ng¶

Al ejecutar ng

aparece el error

C:\Users\rober\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng:23
  );
  ^
SyntaxError: Unexpected token )
    at Object.exports.runInThisContext (vm.js:76:16)

Solución

Desinstalar node.js, borrar el directorio de paquetes de npm (C:\Users\rober\AppData\Roaming\npm\node_modules) y volver a instalarlo todo.

La causa probablemente sea el haber instalado más de una versión de angular.

La creación de una nueva aplicación dura mucho¶

Ejecutar la línea de comandos como administrador.

Si esto tampoco funciona, cortarlo y después ejecutar npm install para que instale los paquetes necesarios, que es donde se queda colgado.

La pantalla se ve en blanco¶

Pasa con algunos navegadores, como IE o Vivaldi. Con Chrome y Firefox se ve bien

Referencias¶

• The Complete Guide To Angular 2, Maximilian Schwarzmüller. Udemy
• Documentación Angular