Building web apps with Angular and TypeScript [M55266]

Durée totale
Localisation
A cet endroit, En ligne
Date et lieu de début
Logo Global Knowledge Belgium BV
Note du fournisseur: starstarstar_halfstar_borderstar_border 4,5 Global Knowledge Belgium BV a une moyenne de 4,5 (basée sur 2 avis)

Astuce: besoin de plus d'informations sur la formation? Téléchargez la brochure!

Dates et lieux de début

computer En ligne: VIRTUAL TRAINING CENTER
20 déc. 2021 jusqu'au 22 déc. 2021
placeMechelen (Battelsesteenweg)
9 mar. 2022 jusqu'au 11 mar. 2022
computer En ligne: VIRTUAL TRAINING CENTRE
9 mar. 2022 jusqu'au 11 mar. 2022
placeMechelen (Battelsesteenweg)
20 juin 2022 jusqu'au 22 juin 2022
computer En ligne: VIRTUAL TRAINING CENTRE
20 juin 2022 jusqu'au 22 juin 2022

Description

Vrijwel iedere training die op een onze locaties worden getoond zijn ook te volgen vanaf huis via Virtual Classroom training. Dit kunt u bij uw inschrijving erbij vermelden dat u hiervoor kiest.

OVERVIEW

In recent years a lot of effort has gone into making HTML and JavaScript a better place for web apps rather than just web content. With Angular, you can exploit these new and modern concepts to take it to the next level. By using a componentized approach, Angular is better equipped than ever to build performant data-driven web-apps. While Angular takes care of data binding, navigation and server communication; TypeScript allows you to use the most advanced features JavaScript has to offer on any browser. Features like strong typing make your application more maintainable, better structured and flexible. This course is constantly being updated to the latest version of Angular, curren…

Lisez la description complète ici

Foire aux questions (FAQ)

Il n'y a pour le moment aucune question fréquente sur ce produit. Si vous avez besoin d'aide ou une question, contactez notre équipe support.

Vous n'avez pas trouvé ce que vous cherchiez ? Voir aussi : Angular, Développeur / Developer, Créer son site web, Open-Source et Unified Modeling Language (UML).

Vrijwel iedere training die op een onze locaties worden getoond zijn ook te volgen vanaf huis via Virtual Classroom training. Dit kunt u bij uw inschrijving erbij vermelden dat u hiervoor kiest.

OVERVIEW

In recent years a lot of effort has gone into making HTML and JavaScript a better place for web apps rather than just web content. With Angular, you can exploit these new and modern concepts to take it to the next level. By using a componentized approach, Angular is better equipped than ever to build performant data-driven web-apps. While Angular takes care of data binding, navigation and server communication; TypeScript allows you to use the most advanced features JavaScript has to offer on any browser. Features like strong typing make your application more maintainable, better structured and flexible. This course is constantly being updated to the latest version of Angular, currently Angular 6. Enjoy this beautiful synergy between Google's Angular and Microsoft's TypeScript.

OBJECTIVES

  • Set up and write application with TypeScript.
  • Create and manage Angular applications.
  • Use data binding to update your screen.
  • Split up complex interfaces into components.
  • Write their own directives and pipes.
  • Create complex forms with validation.
  • Communicate with a REST backend.
  • Write an Single Page Application with client-side routing.

AUDIENCE

This course targets professional web developers who are looking for a kick-start into the world of Angular and TypeScript. Participants of this course need to have a good understanding of JavaScript, HTML and CSS and a notion of node.js and npm.

CONTENT

Module 1: Introduction to Angular

In this module you'll see what Angular is all about and why it is so important in modern web development.

Lessons of Module 1

  • Evolution in Web App Development
  • Angular Core and Modules
  • TypeScript, Dart, Plain Old JavaScript

After completing module 1, students will be able to:

  • Have an understanding of modern web UI technologies and the role they play in modern development.

Module 2: Strongly Typed JavaScript with TypeScript

Let's face it: JavaScript was never designed for big applications. Many constructs to tame complex code like interfaces and strong typing are completely absent. And many of the new cool JS features are not implemented in current browsers. TypeScript is the solution to both problems; allowing you to write modern, application-scale JavaScript.

Lessons of Module 2

  • Writing Application-Scale JavaScript
  • Type-Safe JavaScript Development with TypeScript
  • Implementing Types, Classes and Inheritance
  • Namespaces and Modules

Lab : Toy Store

  • Getting started with a TypeScript project
  • Making the models: Product, Category, Order
  • Creating the ShoppingCart
  • Using an external library
  • Adding the code to the HTML page

After completing module 2, students will be able to:

  • Have an understanding of the benefits of TypeScript
  • Use core features of TypeScript
  • Set up a new TypeScript project
  • Compile and run TypeScript project

Module 3: Core Concepts

In this module you'll get acquainted with the most important building blocks for any Angular application. This is the foundation of all following chapters.

Lessons of Module 3

  • Components
  • Modules
  • Services
  • Tools

Lab : Inspecting a First Project

  • Opening an running the project
  • Elements of an applications
  • Loading Modules
  • json

After completing module 3, students will be able to:

  • Understand the goal of Components and Services.
  • Group Components and Services into Modules. Work with Angular Tools.

Module 4: Data binding

Data binding allows you to forget about the HTML while writing JavaScript code. It allows you to inject data into a view without creating a strong dependency between the two. This results into more flexible, testable and maintainable code.

Lessons of Module 4

  • The Importance of Binding
  • Component to View
  • Structural Directives
  • Local Template Variables
  • Value Conversion
  • View to Component

Lab : TaskManager with Data Binding

  • Modules
  • Displaying a list of tasks
  • Style
  • Adding a Task

After completing module 4, students will be able to:

  • Create and update a view using data binding.
  • Handle user interactions in a component.
  • Refer to elements with local template variables.
  • Use pipes for value conversion.

Module 5: Components

In this module we'll dive a bit deeper into Components. You'll learn how to create a hierarchy of components and how to communicate between them.

Lessons of Module 5

  • Using Multiple Components
  • Input and Output
  • ViewChild and ContentChild
  • EventEmitter
  • Directive Life Cycle

Lab : TaskManager: Using Multiple Components

  • Adding some style
  • TaskCreator component
  • TaskCard component
  • TaskList component
  • App component
  • Registering components

After completing module 5, students will be able to:

  • Split up complex components into multiple components
  • Set up parent-child communication
  • Work with various life cycle hooks

Module 6: Attribute Directives

What if you want to add custom behavior to an existing element? In this module you'll explore existing directives like NgClasses and NgStyle; and learn how to build your own.

Lessons of Module 6

  • What are Attribute Directives?
  • Built-in Attribute Directives
  • Custom Attribute Directives

After completing module 6, students will be able to:

  • Understand the role of attribute directives.
  • Use built-in attribute directives. Create your own attribute directives.

Module 7: Structural Directives

With structural directives you can change the flow in your HTML. For example, how do you generate HTML dynamically based upon your data without having to write HTML in your JavaScript?

Lessons of Module 7

  • What are Structural Directives?
  • Built-in Structural Directives
  • Templates
  • Custom Structural Directives

After completing module 7, students will be able to:

  • Understand the role of structural directives.
  • Use built-in structural directives.
  • Create your own structural directives.

Module 8: Dependency Injection and Providers

Dependency Injection (DI) is the art of taking two strongly coupled objects and tearing them apart. This helps you write understandable, maintainable and testable code. It's not really a choice in Angular either: you have to do it. Angular has an entire mechanism based on Providers to support DI which you will explore in this module.

Lessons of Module 8

  • Terminology
  • Dependency Injection Basics
  • Services
  • Providers
  • Factories
  • Injection Tokens

Lab : Creating a Task Service

  • Implementing the Service
  • Providing the service
  • Updating the AppComponent
  • Replacing the mock service with a real service

After completing module 8, students will be able to:

  • Create their own services.
  • Work with the various providers in Angular.
  • Inject services into components and other services.

Module 9: Pipes

Pipes are a convenient way to make little changes to values in a view. This includes formatting and filtering of data. It's easy to use and to extend the possibilities of pipes.

Lessons of Module 9

  • Using a Pipe
  • Built-in Pipes
  • Custom Pipes
  • Pure versus Impure

Lab : Temperature Pipe

  • Create a pipe for displaying temperatures in Kelvin, Celsius and Farenheit
  • Use your newly created pipe

After completing module 9, students will be able to:

  • Use built-in pipes.
  • Create their own pipes.
  • Understand the importance of pure pipes.

Module 10: Working with Forms

Forms are essential to any app that allows you to manage data. You need to do more than just data binding. You need validation, automatic formatting, respond to data changes a so on. Angular provides two different approaches to dealing with this: Template-driven forms and Model-driven forms. This module will explore both.

Lessons of Module 10

  • What's in a Form
  • Responding to Changes
  • FormBuilder
  • Data Validation

Lab : Task Editor Form

  • The TaskEditor component
  • Basic Validation
  • Multiple validators
  • Custom validators

After completing module 10, students will be able to:

  • Choose between template-driven and model-driven forms.
  • Create a form and submit the information.
  • Add validation and visual feeback.

Module 11: Talking to the Server

This module will teach you how to retrieve and send data to your backend. We will focus on REST and use RxJS's Observables to get the job done.

Lessons of Module 11

  • Sending and Receiving Data
  • HTTPClient Module
  • HTTP Interceptors
  • Observables versus Promises

Lab : Working with Observables

  • Update Components wot work with observables

Lab : Talking to the Server

  • Providing the HttpClient Module
  • Implementing the HTTP service

After completing module 11, students will be able to:

  • Work with HttpClient to make rest calls.
  • Process the result with observables.

Module 12: Building a Single Page Application

Instead of hopping from one page to the next, you can design your website as a Single Page Application. This makes your website feel and perform more like an application. SPAs have many advantages, but are usually difficult to implement. This module will teach about the constructs available in Angular to build a SPA.

Lessons of Module 12

  • What is a SPA
  • Router Module
  • Route Configuration
  • Parent-Child Navigation
  • Route Guards

Lab : 7Building a SPA: Rabbit Rescue

  • Replace static HTML with components and templates
  • Set up routing per feature area
  • Linking the feature area with with root area

After completing module 12, students will be able to:

  • Create a single page application.
  • Create feature areas.
  • Set up routing per feature.
  • Intercept navigation with guards.

Rester à jour sur les nouveaux avi

Pas encore d'avis.
  • Demander des informations à propos de cours. Dorénavant, nous recevrez aussi une notification lorsque qu'un autre utilisateur partage son avis. C'est un bon moyen de vous encourager à continuer d'apprendre!
  • Voir les produits similaires avec des avis: Angular.

Partagez vos avis

Avez-vous participé à cours? Partagez votre expérience et aider d'autres personnes à faire le bon choix. Pour vous remercier, nous donnerons 1,00 € à la fondation Stichting Edukans.

Il n'y a pour le moment aucune question fréquente sur ce produit. Si vous avez besoin d'aide ou une question, contactez notre équipe support.

Recevoir une brochure d'information (gratuit)

Sexe:
(optionnel)
(optionnel)
(optionnel)
(optionnel)
(optionnel)
(optionnel)
(optionnel)

Vous avez des questions?

(optionnel)
Nous conservons vos données personnelles dans le but de vous accompagner par email ou téléphone.
Vous pouvez trouver plus d'informations sur : Politique de confidentialité.