Topo Actividades

Hands-On - Getting Started With Angular 5 Using Visual Studio Code

esta formação será dado a conhecer como efetuar o setup de uma aplicação web desenvolvida em Angular 5 utilizando para tal o Visual Studio Code

Formadores:

  • Rui Silva - Software Engineer@DevScope
  • Sérgio Azevedo - Senior Software Engineer@DevScope

Horário: 11/04/2018 às 14h30

Local: B404

Inscrições:

  • Alunos do DEI-ISEP HelpDesk - opção "inscrição em eventos".
  • Alunos externos ao DEI-ISEP): mlsb@isep.ipp.pt

Para mais informações: handsondei@isep.ipp.pt

Os workshops são gratuitos mas requerem inscrição, sendo o número de vagas limitado.

Overview

Angular is a popular framework for building UI applications. The newest version, which is not backward-compatible with the original version, is referred to as Angular, while the original version is referred to as AngularJS. The Angular team recently released version 4 of the framework. This lab is based on that version.

Angular takes a template-driven approach to building UIs. An HTML template is decorated with component elements, directives, and other expressions to bind data models and other entities. The fundamental building block of Angluar apps is the component. Components are template-bound to a data model. The template is part of the component's metadata, and the data model is the component instance itself.

Composing rich UIs from components is major aspect of Angular programming. Angular partially implements the W3C recommendations for Web Components. As Web Components grow in popularity and browser support increases, Angular will be well positioned to fully support them. In addition to component-driven development, Angular is well known for its rich services architecture, which even includes hierarchical dependency injection. While two-way data binding between the UI and data models is supported in Angular, developers who do not like the two-way pattern can easily avoid it. This lab makes use of ngModel to perform two-way binding for collecting form data, but does not use two-way binding otherwise. Angular is a complete framework for building UIs. Angular apps can be written in JavaScript, but TypeScript is more commonly used to due to its support for advanced features such as decorators (which are used to configure metadata for components), directives, modules, and services. TypeScript is especially helpful when building enterprise applications because of the strong typing that it enforces.

In this lab, you will use Angular, TypeScript, and Visual Studio Code to build a simple application for managing a table of widgets. Data will be loaded from a REST service and displayed in an HTML table by Angular components. In addition, the application will fully support CRUD (Create, Read, Update and Delete), allowing widgets to be added and edited as well as viewed and deleted. As you build out the app, you will learn the basics of Angular and get a feel for what Angular programming is all about.

Objectives

In this hands-on lab, you will learn how to:

  • Create Angular components and services
  • Combine Angular with HTML forms for collecting and editing data
  • Decompose a single UI component into several smaller components
  • Compose rich UIs from Angular components
  • Integrate REST services into Angular apps

Prerequisites

The following are required to complete this hands-on lab:

  • Visual Studio Code
  • Node.js version 7.0 or higher