Recomendados
Más contenido relacionado
Similar a Angular - Introduccion
Similar a Angular - Introduccion (20)
Último
Último (7)
Angular - Introduccion
- 1. Angular Leandro Tuttini Developer Sr - Lagash - Microsoft MVP Developer Technologies ltuttini@Lagash.com Leandro Seoane Developer Sr - Emerios lleandro.seoane@emerios.com
- 2. Embrace the challengelagash.com Agenda Angular Veremos como instalarAngular, configurarlo einstalar también Bootstrap Conceptos Básicos Veremos conceptos básicos como: • Componentes • Data Binding • Decorators • Nested Components Introducción sobreAngular De que se trata este Framework, susdiferentes versiones.
- 3. Embrace the challengelagash.com Angular Que esAngular? Angular es un framework para aplicaciones web desarrollado en JavaScript el cual permite crear Aplicaciones reactivas de una Sola Pagina (SPA’s).
- 4. Embrace the challengelagash.com Angular Angular 6 Angular 5 Angular 4 Angular 2 Angular 1 Se reescribió completamente Angular AngularJs La reescritura se baso en resolver principalmente problemas de performance.
- 5. Embrace the challengelagash.com Setup Node I. Instalar Node
- 6. Embrace the challengelagash.com SetupAngular • Ejecutar la terminal en modo Administrador si es Windows, si es mac, anteponer “sudo”.
- 7. Embrace the challengelagash.com Ejecución del proyecto
- 8. Embrace the challengelagash.com Comandos deAngular
- 9. Embrace the challengelagash.com Setup Bootstrap
- 10. Embrace the challengelagash.com TypeScript TypeScript TypeScript ofrece mas caracteristicas que JS: (ejemplo -> Tipos, Clases, Interfaces, etc) JavaScript Se transpila a JS
- 11. Embrace the challengelagash.com Componentes • Layout de vista • Código HTML • Bindeo de datos, Directivas • Código asociado a la vista. • El lenguaje de programación es TypeScript. • Bindeo de datos, Directivas. • Proporciona informacón adicional sobre el componente a angular. • La metadata es definida como Decoradores • Propiedades de datos como por ejemplo, el título de la vista.
- 13. Embrace the challengelagash.com Creación de componente
- 15. Embrace the challengelagash.com Comic Store
- 16. Embrace the challengelagash.com Flow de Comic Store
- 18. Embrace the challengelagash.com Data Binding Es un proceso que crea una conexión entre la interfaz de usuario de la aplicación y los datos. Angular soporta los siguientes tipos de data binding: • Interpolación (Interpolation) • Bindeo de propiedades (Property Binding) • Bindeo de Eventos (Event Binding) • Bindeo de dos caminos (two-way binding)
- 19. Embrace the challengelagash.com Data Binding Bindeo de propiedades <img [src]='showComic.imageUrl'> Interpolación <img src=‘{{showComic.imageUrl}}'> <img src='https:// + {{showComic.imageUrl}}'> Bindeo de eventos <button class="btn btn-primary" (click)="showComicImage()">{{ buttonLabel }}</button>
- 20. Embrace the challengelagash.com Data Binding Bindeo de dos caminos La modificación del dato puede nacer tanto de la interfaz UI como desde el componente. <input [value]="username" (input)="username = $event.target.value"> <p>Hello {{username}}!</p> <input [(ngModel)]="username"> <p>Hello {{username}}!</p>
- 21. Argentina | Buenos Aires +54 (11) 4982 4185 info@lagash.com Chile | Santiago de Chile +56 (2) 2231 9428 info_chile@lagash.com Colombia | Bogotá +57 (1) 750 5276 info_colombia@lagash.com México | México DF +52 (55) 6394 0617 info_mexico@lagash.com USA | Seattle - US +1 844 4 Lagash infousa@lagash.com Uruguay | Montevideo +598 2623 2546 info_uy@lagash.com Let’s keep in touch