Please enable JavaScript.

Coggle requires JavaScript to display documents.

Angular (Código (Sintaxis (interpolación o expresiones ({{}}), bindeo o…

- - - - [propiedad]
        
        {{expresion}}
    - - (evento)
    - - [(ngBind)]
- - - - lanza comandos
        
        ej: ng --help
      - Modificadores
        
        new
        
        Crea
        
        Nuevo proyecto y lo ubica en carpeta con mismo nombre
        
        Un servidor para servir el proyecto por HTTP
        
        Sistema Live-Road (refresca el navegador al cambiar archivos)
        
        Herramienta testing
        
        Herramienta despliegue proyecto
        
        ng new mi-nuevo-proyecto-angular
        
        serve
        
        ng serve
        
        Sirve proyecto desde un web serve
        
        Lanza el servidor web y pondrá en marcha
        
        En terminal muestra ruta del servidor (Ej: http://localhost:4200)
        
        Modificadores
        
        --port numPuerto --> modifica el puerto
        
        --o --> abre el navegador
        
        build
        
        ng build
        
        Lleva a producción el proyecto
        
        generate
        
        ng generate
        
        genera componentes, directivas, servicios, clases, etc
- - - - dentro del código typescript o javascript
    - - definir etiquetas ya que html no distingue mayusculas por lo que esa es su representación equivalente a PascalCase
- - - - Creado al crear la aplicación
        
        Contiene:
        -- nombre proyecto
        -- licencia
        -- autores
        -- dependencia
        -- Scripts de npm. Son invocados con "npm nombreScript" (ej: npm start) y junto a ellos aparece el comando que invocan
        ---- start --> "ng serve"
        ---- build --> "ng build --prod"
        ---- test --> "ng test"
        ---- podemos modificarlos para así ahorrarnos trabajo. ej modificar start añadiendo "--o". Esto abre navegador web. Simplemente debemos poner en consola "npm start" y ejecutará el comando "ng serve --o"
- - - - información básica proyecto creado
        
        explica algunos comandos de CLI
        
        generado automáticamete
    - - archivo oculto
    - - resumen dependencias proyecto (librerías que se gestionan por npm) o descriptor de dependencias
    - - configura linter (programa que alerta problemas de estilos)
    - - centraliza cofiguración del editor que estemos utilizando para hacerla común al equipo
  - - - archivos fuente
        
        aquí desarrollamos la aplicación, colocamos componentes y otros artefactos
      - archivos
        
        index.html
        
        raiz proyecto
        
        <app-root></app-root> --> componente principal a partir del cual se construirá toda la aplicación
        
        No contiene código javascript ya que es inyectado por Webpack cuando la aplicación se ejecuta
        
        archivos .ts
        
        con codigo TypeScript. En proceso transpilado realizado por WebPack se traduce a javascript
        
        main.ts -> código typeScript principal de la aplicación (normalmente no se toca)
        
        Solo existen en etapa desarrollo ya que los navegadores no entienden TypeScript
        
        main.ts
        
        es el archivo inicial que estará contenido en el script javascript que el navegador ejecutará para poner en marcha la aplicación. Será traducido por el webpack y se incorporará a los archivos del directorio dist
        
        tipos
        de imports
        
        de dependencia
        a librerías
        
        import { enableProdMode } from '@angular/core';
        
        instaladas via mpn y código en carpeta "node_modules"
        
        de código de
        nuestro
        proyecto
        
        import { AppModule } from './app/app.module';
        
        ruta relativa al main.ts
        
        los imports a archivos TypeScript no llevan extensión .ts ya que serán traducidos a .js
        
        al final del archivo
        
        platformBrowserDynamic().bootstrapModule(AppModule)
        ** .catch(err => console.log(err));**
        
        Con bootstrap (bootstrapModule). Instancia sistema arranque. Indica que AppModule es el módulo principal
        
        Provoca que Angular lea código del módulo y sepa que componentes hay en index
        
        app/app.modules.ts
        
        Módulo principal
        
        Llamado desde main.ts
        
        NgModule indica que AppComponent forma parte de bootstrap
        
        tipos
        imports
        
        import { AppComponent } from './app.component'; - componente raiz (etiqueta HTML del body del index). Único construido automáticamente
        
        referencia AppComponent al archivo que contiene la implementación de la etiqueta
        
        otros módulos
      - carpetas
        
        app
        
        Codigo del componente principal
        
        .html --> código de presentación del componente
    - - contiene dependencias, por tanto tendrá todas las librerías declaradas en package.json
        
        podría estar dentro de src pero cuelga de raiz porque vale tanto para pruebas como para desarrollo
    - - archivos para realizar pruebas "end to end"
    - - realizar test
    - - almacena archivos listos para subir al servidor web
        
        no contiene archivos .ts (TypeScript)
        
        son los que entienden los navegadores con el código de src traducido a ES5
        
        puede que sea necesario inciar el servidor web integrado en Angula CLI para mostrar esta carpeta
    - - archivos estáticos proyecto, imágenes y similares conocidos como "assets"
        
        su contenido será modido a dist
    - - No tocar
        
        contiene archivos generados por angual Cli
    - - definiciones de tipos usados en las librerías para que el editor pueda informarte con el "intelillense" en el acto de escribir (gracias a TypeScript)
- - - - NgModule
        
        Contenida en archivo src/app/app.module.ts
        
        Alimentada con objeto pasado por parámetro con datos útiles para la clase AppModule
        
        Indica que AppModule forma parte de bootstrap
        
        Lo editaremos a medida que desarrollemos
        
        propiedades
        
        bootstrap
        
        Array con componentes de angula a los que ha de dar vida (AppModule)
      - Component
        
        Contenido en archivo src/app/app.component.ts
        
        Alimentada con selector o etiqueta que implementa el componente "app-root" que se corresponde con la etiqueta <app-root></app-root> del archivo src/index.html
        
        template archivo .html y su estilo
    - - import { Component } from '@angular/core';
        ....
        Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
        })
        
        Import que trae la clase Component
        
        Decoramos dicha clase (para permitir registrarlo posteriormente) añadiendo metadata para describir el componente
        
        Elementos:
        -- Selector: nombre etiqueta que representará al componente en el HTML
        -- tempalteUrl: nombre archivo HTML ó código de la vista
        -- StyleUrl: array cont todas las hojas de estilo
        
        Estos elementos son genedos por Angular CLI así como los nuevos elemento que generemos. Nos permite obtener este esqueleto (scaffolding) del cual partiremos
  - - - package.json
        
        declara dependencia gestionadas via npm
        
        las instala npm en carpeta "node_modules"
        
        propiedades
        
        dependencies
        
        librería Angular separada en módulos (common, compiles, code,..) (característica de angular2)
        
        librerías de terceros (rxjs, zone.js)
        
        aneriormente a v2 estos SCRIPT se metían con etiqueta script en el HTML, pero Agular CLI implementa esta nueva forma
  - - - Componente inicial
        
        Puede cambiar su nombre dependiendo de la vesión de Angular y la configuración de Angular CLI detallada en .angular-cli.json
        
        A partir de este la aplicación se desarrollará y todos los demás componentes colgarán de él en arbol
        
        Versiones tempranas de angular: solo en modo desarrollo , al iniciar la aplicación aparecerá "loading" mientras hace transpilado de código
      - implementación
        
        en carpeta src/app
        
        Los ficheros forman el componente completo
        separados por tipo de código
        
        app.component.html
        
        Vista
        
        admite etiquetas estandar y otros componentes y expresiones así como declarar binding entre componentes
        
        app.component.css
        
        app.component.ts
        
        Archivo TypeScript corazón del componente. Será traducido a javascript. Equivalente a MVC aunque el controlador desaparece en angular2
        
        Necesario para crear el componente
        
        Es una clase normal como las ofrecidas en ES6 solo que aquí la ofrece TypeScript
        
        angular/core: función decoreadora que registra el componente y hace las veces de controlador
        
        Al final se define la clase con un "export" para que sea conocido fuera del módulo en el que se crea . Es la parte que representa el MVC y donde colocaremos lo que se desea utilizar en la vista. Ej: title
        
        app.component.spec.ts
        
        testing
    - - sique el concepto de directiva y son similares,
        
        componentes: tipo de directiva dedicada a piezas negocio
        
        directivas: presentación y problemas estructurales
    - - Template (MVC --> vista, en el HTML)
        
        Clase (MVC --> controlador en el Javacript)
        
        Función decoradora (registra componente en enlaza javascript con HTML)
    - - con Angular CLI
        
        ng generate component nombre-del-componente
        ó utilizando alias para "generate" --> "g"
        
        ng g component nombre-del-componente
        
        se genera nueva carpeta con el nombre nombre-del-componente dentro de src/app/ que contendrá diversos archivos
        
        residirá en el módulo prinipal (app.module.ts) en el cual lo declararemos (tb podemos crearlo dentro de un módulo)
        
        generado en modulo principal
        (app.modules.ts)
        
        export class NombreDelComponenteComponent implements OnInit {
        
        .. implements OnInit --> interfaz no disponible en javascript ni en ES6 pero si en TypeScript. Es como un contrato que define que dentro de la clase del componente vamos a definir la función ngOnInit()
        
        NgModule({
        declarations: [
        AppComponent,
        NombreDelComponenteComponent
        ],
        
        declaración (declarations)
    - - Insertar la etiqueta del componente, definida en función decoradora, en el HTML (template app.component.html) del componente principal (el generado por Angular CLI al construir el proyecto)
      - importar
        componente
        
        import { NombreDelComponenteComponent } from './nombre-del-componente/nombre-del-componente.component';
        
        import {nomClase} from 'ubicación'
        
        Necesario para conocer su código
        
        Realizado por Angular automáticamente
        
        no necesario indicar extensión .ts
      - Añadirlo al
        array de "declarations"
        
        declarations: [
        AppComponent,
        NombreDelComponenteComponent
        ],
        
        realizado automáticamente por Angular CLI dentro de la función decoradora "NgModule"
  - - - {{}}
    - - [[]]
    - - [propiedad]
        
        <p [hidden]="!visible">Adiós</p>
        
        <div [class]="clase">Una clase marcada por el modelo</div> - Asignar a la propiedad "class" la clase del modelo llamada "clase"
        
        <a [href]="enlace">Pulsa aquí</a> - la propiedad "enlace" del componente se volcará en el href
    - - {{exrpresion}}
        
        {{title}}
        
        <a href="{{enlace}}">Clic aquí</a> - También se podría representar así para las propiedades HTML
    - - [(ngBind)]
        
        <input type="text" [(ngModel)]="quien">
        
        Notación banana in box
        
        funciona igual que la antigua directiva de AngulaJs
        
        El hecho de crearla en el HTML provocará que se inicialice en el modelo por lo que no será necesario inicializarla en el mismo aunque sería lo mejor. Tomará el valor que se le introduzca.
        
        Si quisieramos utilizarla en otro lugar pondríamos {{quien}}
        
        Para usar ngModel es necesario importar un módulo adicional (FormsModule)
    - - (evento)
        
        <button (click)="decirAdios()">Decir adiós</button>
        
        entre paréntesis el tipo de evento y como valor el código a ejecutar
        
        Esto hace desaparecer el evento ng-clic de AngularJs
    - - tipos
        
        de atributos
        
        cambian apariencia o comportamiento de un elemento
        
        ej: ngClass --> permite colocar una o más clases CSS
        
        Estructurales
        
        Realiza cambios en el DOM
        
        Ej: ngFor
        
        Componentes
        
        directiva con template. Resulven necesidades negocio
  - - - Elemento principal para organizar código
        
        Su decorador es NgModule
    - - ng generate module nombre
        
        dentro de la carpeta "src/app" se crea subdirectorio con nombre del módulo y archivo con código módulo (nombre.module.ts)
        
        se recomienda usar minúscular. Angular pondrá en mayusculas el nombre de la clase (NombreModule)
        
        NgModule({
        imports: [
        CommonModule
        ],
        declarations: []
        })
        
        imports: array con los imports necesarios
        
        declarations: array con los componentes u otros artefactos que construye este módulo
    - - ng generate component nombre/miComponente
        
        Genera carpeta "miComponente" dentro del módulo "nombre" con los archivos del componente.
        
        Al poner nombre en CamelCase el archivo generado lo nombra con guiones (mi-componente.component.ts)
        
        El código clase aparece en PascalCase (class MiComponenteComponent)
        
        Se pueden generar en cualquier módulo (no solo en el principal)
        
        Añade automáticamente al código del módulo el import del componente y su referencia en array "declarations"
      - permitir usarlo
        en otros
        módulos
        
        Añadir manualmente en array "exports" del módulo el nombre de la clase del componente
    - - Modificar el módulo principal para que conozca el módulo que contiene el componente (el módulo define lo que se quiere exportar en "exports")
        
        añadir el import
        
        declarar el import en el decorador
        
        import { NombreModule } from './nombre/nombre.module';
    - - colocar en template del componente raiz el selector declarado en el componente creado
        
        <app-mi-componente></app-mi-componente>
  - - - Altera las clases CSS
        
        No necesaria en todos los casos
        
        Un atributo "class" entre [ ] funciona como propiedad a la que puedes asignar algo que esté en el modelo (controlador asociado a un componente)
      - como asignar
        clases de un
        grupo de posibilidades
        
        listado clases
        
        por HTML
        
        <p [ngClass]="['negativo', 'off']">Pueden aplicarse varias clases</p>
        
        desde el modelo
        
        clases = ['positivo', 'si'];
        <p [ngClass]="arrayClases">Pueden aplicarse varias clases</p>
        
        objeto con
        propiedades
        y valores
        
        <li [ngClass]="{positivo: cantidad > 0, negativo: cantidad < 0, off: desactivado, on: !desactivado }">Línea</li>
        
        cada nombre es una posible clase CSS y cada valor es una expresión cuyo resultado hará que se aplique o no dicha clase
    - - como implementar
        
        con array
        de Strings
        
        en el componente
        
        preguntas: string[] = [
        "¿España ganará la Euro 2016?",
        "¿Hará sol el día de mi boda?",
        "¿Estás aprendiendo Angular 2 en DesarrolloWeb?",
        ];
        
        en el HTML
        
        <p *ngFor="let pregunta of preguntas"> {{pregunta}}
        </p>
        
        con array
        de objetos
        
        sin TypeScript
        
        en el HTML
        
        <p *ngFor="let objPregunta of preguntasObj">
        {{objPregunta.pregunta}}:
        <br>
        <span class="si">Si {{objPregunta.si}}</span> /
        <span class="no">No {{objPregunta.no}}</span>
        </p>
        
        en el componente
        
        preguntasObj = [
        { pregunta: "¿España ganará la Euro 2016?",
        si: 22,
        no: 95
        },
        { pregunta: "¿Estás aprendiendo Angular 2 en DesarrolloWeb??",
        si: 262,
        no: 3
        }
        ]
        
        con TypeScript
        
        crear interfaz
        
        interface PreguntasInterface {
        pregunta: string;
        si: number;
        no: number;
        }
        
        Normalmente irá en archivo a parte aunque se puede poner en el mismo
        
        Necesario para que TypeScript conozca el esquema de un objeto
        
        video con más info
        
        usar interfaz
        
        preguntasObj: PreguntasInterface[] = [
        {
        pregunta: "¿Te gusta usar interfaces?",
        si: 72,
        no: 6
        }
        ]
        
        Usando componente
        ion-list
        
        <ion-list>
        <ion-item *ngFor="let sitio of arraySitios">
        <a href="{{sitio.url}}">{{sitio.nombre}}</a>
        </ion-item>
        </ion-list>
      - el asterisco es simplemente para indicar que afectará al DOM produciendo una inserción, manipulación o borrado de elementos
        
        let indica que la viriable solo tendrá valor en el bloque donde se declara
    - - Con expresiones como {{dato}} tb se muestra el valor del modelo. La diferencia está en que ngModel es necesario para los campos de formulario. Ej
        
        Componente Cuandro con la propiedad lado
        
        export class CuadradoComponent { lado = 4;}
        
        <input type="number" [ngModel]="lado">
      - Necesario importar FromsModule (en el módulo al que pertenezca el componente con la propiedad "lado") ya que si no no reconoce ngModule como propiedad del campo INPUT.
        
        import { FormsModule } from '@angular/forms';
      - También define qué campos de formulario deben ser tratados al generarse los objetos ngForm
        
        Estos objetos se crean automáticamente y Angular los pone a disposición para poder controlar el formulario de una manera muy precisa
  - - - <input type="number" [ngModel]="lado" (ngModelChange)="lado = $event">
        
        Se ejecuta al cambiar valor propiedad asociada a un ngModel
        
        Comportamiento similar al doble binding pero sin usar el mimso
        
        Util para realizar más operaciones cuando cambia el modelo
        
        no tiene escrito el código del manejador en la propia vista, por considerarlo un antipatrón
        <input type="number" [ngModel]="lado" (ngModelChange)="cambiaLado($event)">
        
        Es más interesante que el código se coloque dentro de un método del componente. En este caso tendrás que enviarle al método el valor $event, para que lo puedas usar allí.
        ....
        export class CuadradoComponent {
        lado = 1;
        cambiaLado(valor) {
        this.lado = valor;
        ** }
        }
  - - - evento
        
        Suceso al cual se puede definir manejadores (funciones)
      - binding
        
        enlace entre modelo y vista.
        
        En Angular 2 el doble binding es opcional ya que relentiza código y es dificil de entender y depurar
      - expresion
        
        cualquier información que sea procesable por Angular.
        
        Será sustituida por su valor
      - propiedad
        
        cualquier valor asignado a traves de una atributo HTML ya sea estandar, de Angular o personalizado
    - - Etiqueta SCRIPT (puede originar problemas seguridad). Angular la ignorará. También la sanitizará si la localiza por interpolación {{}} o bindeo a propiedad [[]]
        
        Etiquetas BODY o HEAD ya que un componente es una parte concreta de la página, no la cabecera ni el cuerpo
        
        Etiqueta BASE ya que sirve para indicar la ruta base a aplicar a todas las rutas relativas
    - - colocados en TypeScript o archivo aparte
        
        escritos con HTML
        
        permiten expresiones Angular, bindeos, eventos, etc
  - - - Contexto:
        
        componente del template que se esté desarrollando y no pueden acceder al contexto global (variables globales u objetos como document o window u objetos del navegador como console.log)
        
        No se pueden escribir estructuras de control
        
        if, for, etc
        
        Ejecución directa
        
        no se podrá hacer llamada REST
        
        Simplicidad
        
        Si lógica compleja utilizar llamada a método
        
        Idempotencia
        
        Ofrecer siempre la misma salida con los mismos valores de entrada
        
        Necesario para que los algoritmos de detección de cambios de Angular funcionen corréctamente
- - - - {{nombre_propiedad}}
  - - - <input type="text" [value]="autor"> - Binding de una sola vía
        
        Si lo modificamos no viaja al modelo
      - <input type="text" [(ngModel)]="autor">
        
        Bindeo a dos vías
  - - - <img src="imagen.jpg">
        <button disabled>Estoy desactivado</button>
        
        si queremos que
        cambie dinámicamente
        aplicamos el bindig de propiedad
        
        No se está asignando valores a atributos HTML
        
        Al ponerle los corchetes dejan de ser atributos para pasar a ser propiedades del template de Angular
        
        En src, al crearse la imagen tomará como valor lo que haya en la propiedad rutaImagen
        
        <img [src]="rutaImagen">
        
        <button [disabled]="estadoBoton">Estoy activado o desactivado</button>
    - - <div [ngStyle]="objEstilos">DIV con estilos definidos por Angular</div>
        
        binding a propiedades de directiva
        
        Propiedad objEstilos define dinámicamente el sytle de la división
    - - <mi-componente [propiedadPersonalizada]="valorAsignado"></mi-componente>
        
        En ese caso concreto, mediante la propiedad del componente padre "valorAsignado" estamos aplicando el valor del componente hijo en la propiedad "propiedadPersonalizada"
      - <app-cliente [nombre]="nombreCliente"></app-cliente>
        
        Padre define que el nombre del cliente sea lo que éste tiene en su propiedad "nombreCliente"
        
        Si el componente app-cliente cambiase el valor de su propia propiedad "nombre", el componente padre no notará nada por darse un binding de una única dirección (padres a hijos).
  - - - <img [src]="'ruta.jpg'">
        
        Sin mucho sentido ya que se podría haber conseguido con el propio atributo HTML
        
        <img src="'ruta.jpg'">
        
        Tiene más sentido en componentes personalizados
        
        <app-cliente nombre="DesarrolloWeb.com"></app-cliente>
        
        Al no colocar la propiedad entre corchetes, es como hacer un binding a un literal de string
        
        el componente app-cliente recibirá el valor "DesarrolloWeb.com" en su propiedad "nombre" al inicializarse, pero no se establecerá ningún binding durante su existencia
    - - <p [ngClass]="obtenClases()">Esto tiene class o clases dependiendo de la ejecución de un método</p>
        
        El método se ejecuta para aplicar valor a la propiedad bindeada
        
        cada vez que cambie cualquier cosa del estado del componente, se ejecutará de nuevo obtenClases() para recibir el nuevo valor de clases CSS que se deben aplicar al elemento