Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 28 vistas

    Angular 2

    Cargado por

    Paola Lizarazo “PADIX06”
    Este documento resume los principales conceptos de Angular como módulos, componentes, templates, data binding, directivas, servicios e inyección de dependencias. Explica que un módulo agrupa componentes relacionados, un componente controla una zona de la pantalla y vincula la lógica con la vista, y el data binding permite pasar datos entre la clase y la vista.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Angular 2

    Cargado por

    Paola Lizarazo “PADIX06”
    28 vistas29 páginas
    Este documento resume los principales conceptos de Angular como módulos, componentes, templates, data binding, directivas, servicios e inyección de dependencias. Explica que un módulo agrupa componentes relacionados, un componente controla una zona de la pantalla y vincula la lógica con la vista, y el data binding permite pasar datos entre la clase y la vista.

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento resume los principales conceptos de Angular como módulos, componentes, templates, data binding, directivas, servicios e inyección de dependencias. Explica que un módulo agrupa componentes relacionados, un componente controla una zona de la pantalla y vincula la lógica con la vista, y el data binding permite pasar datos entre la clase y la vista.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    28 vistas29 páginas

    Angular 2

    Cargado por

    Paola Lizarazo “PADIX06”
    Este documento resume los principales conceptos de Angular como módulos, componentes, templates, data binding, directivas, servicios e inyección de dependencias. Explica que un módulo agrupa componentes relacionados, un componente controla una zona de la pantalla y vincula la lógica con la vista, y el data binding permite pasar datos entre la clase y la vista.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 29

    Angular

    Sesión 2

    Martha Avella
    2020 - I
    Modulo
    • Conjunto de código que resuelve una funcionalidad especifica y
    generalmente exporta una clase
    • Cada aplicación tiene por lo menos uno , llamado modulo raíz con
    el nombre AppModule
    • Un modulo puede agrupar varios componentes relacionados entre
    si
    • Las propiedades mas comunes del modulo además del @NgModule
    • Declarations: vistas del modulo
    • Exports
    • Imports
    • Providers: Vistas globales
    • Bootstrap: Vista principal
    Componente

    Template
    • Elemento que controla una zona
    Metadatos
    de la pantalla que representa la
    vista
    • Define las propiedades y
    Clase
    métodos que usa el template
    • Contiene la lógica y
    funcionalidad que utiliza la vista
    • Puede tener atributos tanto de
    entrada como de salida
    Componente
    Template
    • Define la vista de un componente mediante
    un fragmento de código HTML
    Metadatos
    • Permiten decorar una clase y configurar su
    comportamiento.

    • Extiende una funcionalidad mediante otra sin


    tocar la original
    Data binding ( enlace de datos)
    • Permite intercambiar datos entre el template
    y la clase del componente que soporta la
    lógica del componente al cual pertenece
    • Tipos
    – Interpolación
    – Property binding
    – Event binding
    – Two-way binding
    Data binding
    • Interpolación
    – Muestra el valor de la propiedad en el lugar en donde se incluya
    – {{propiedad}}
    • Property binding
    – Traspaso del objeto del componente padre al componente hijo
    – ([objHijo]=“objPadre”)
    • Event binding
    – Permite invocar un método del componente pasándole un
    argumento al producirse un evento
    – (click)=“hazAlgo(obj)”
    • Two-way binding
    – Combina event y property binding
    – <input type="number" [ngModel="lado">
    Directiva
    • Permite añadir comportamiento dinámico a
    un HTML mediante una etiqueta o selector.
    • Existen directivas estructurales (ngFor o nglf )
    o de atributos que modifican solo el
    comportamiento de un elemento (NgStyle,
    NgClass
    Servicio
    • Son clases que permiten poner a disposición
    de cualquier componente una funcionalidad
    especifica. Por ejemplo realizar peticiones a
    un servidor, cálculos complejos u obtener
    datos
    Dependency Injection
    • Permite suministrar funcionalidades o servicio
    a otros componentes sin necesidad de
    instanciar las clases
    Generalmente proporciona servicios yusa el
    decorador Injectable()
    app.module.ts
    Hola Mundo - Manual

    TALLER
    Hola Mundo - Manual
    • Crear directorio
    • Crear archivos
    – Tsconfig.json
    – Compilación utilizada por TypeScript
    Hola Mundo - Manual
    • Crear directorio
    • Crear archivos
    – Tsconfig.json
    – Typings.json
    • Identifica las definiciones de TypeScritp requeridas
    • Descargar de plataforma
    Hola Mundo - Manual
    • Crear directorio
    • Crear archivos
    – Tsconfig.json
    – Typings.json
    – Package.json
    • Definimos las dependencias del proyecto
    • Disponible en plataforma
    – npm install
    Hola Mundo - Manual
    – Crear directorio app
    – Crear Archivo app.component.ts
    • Permite definir un componente
    Hola Mundo - Manual
    – Crear directorio app
    – Crear Archivo app.component.ts
    – Crear archivo main.ts
    • Permite cargar el componente raíz lanzando el
    framework
    Hola Mundo - Manual
    – Crear directorio app
    – Crear Archivo app.component.ts
    – Crear archivo main.ts
    – Posicionarse en directorio raíz del proyecto
    – Crear archivo index.html
    • Página principal
    Hola Mundo - Manual
    – Crear directorio app
    – Crear Archivo app.component.ts
    – Crear archivo main.ts
    – Posicionarse en directorio raíz del proyecto
    – Crear archivo index.html
    – Ejecutar en la terminal el comando:
    • npm start
    Hola Mundo – Angular CLI

    TALLER
    Hola Mundo
    • Crear directorio
    – HolaMundo
    Hola Mundo
    • Crear directorio
    – HolaMundo
    – ng new HMAC
    • Abrir el proyecto
    • Modificar archivo app.component.ts en
    src/app variable title asignar :
    “Hola Mundo Angular CLI”
    Hola Mundo
    • Modificar el archivo html ubicado en
    • HMAC/src/app/app.component.html

    • Para ejecutar
    > ng serve
    http://localhost:4200/

    También podría gustarte