Öppna kurser

Webbutveckling med Angular

Learn Angular and build responsive, enterprise-strength applications that run smoothly on desktop and mobile devices with this Angular training course. Angular provides a robust framework that facilitates the development of richly interactive applications running on multiple platforms. Gain experience building components, creating directives, modularising applications, and building template-driven forms..

Du får lära dig att:

  • Create device-independent Angular applications
  • Develop Components using TypeScript, Templates, and
  • Decorators
  • Consume REST services using Observables
  • Modularise applications with the Component Router
  • Capture and validate input with template-driven forms

Kursinnehåll:

Angular Introduction

Architectural overview

  • Simplifying development of complex modern applications
  • The organisation of an Angular app
  • Supporting multiple client devices
  • Configuring an Angular development environment
  • Bootstrapping your first Angular application

Getting started with TypeScript

  • Transpiling TypeScript to JavaScript
  • Building an app with TypeScript

Constructing User Interface (UI) Components

Defining components

  • Structure of a component
  • Introducing the component hierarchy
  • Declaring metadata with the @Component decorator
  • Controlling HTML5 generation with Templates
  • Displaying repeating data with *ngFor
  • Conditional generation of DOM content

Debugging techniques and strategies

  • Interpreting framework error messages
  • Exploring the component hierarchy with Augury

Reducing code complexity with Dependency Injection (DI)

  • Principles of DI
  • Creating loosely coupled applications
  • Configuring providers and declaring Injectables
  • Satisfying dependencies with Provider metadata

Testing Angular Components & Functionality

Structuring test strategies

  • Unit testing vs. integration testing
  • Working with mock Angular components
  • Asynchronous testing with ES6 arrow functions

Leveraging 3rd party tools

  • Defining tests with Jasmine
  • Automating tests with Angular CLI and Karma
  • Building and running a Protractor test

Adding Interactivity to Your Applications

Coordinating Component interaction

  • Passing data from parent to child with Input bindings
  • Listening for property changes with ngOnChanges
  • Binding a model to display with interpolation

Managing events

  • Detecting and responding to user interaction
  • Capturing browser events
  • Emitting custom events to trigger behaviour

Navigation and Data Transformation

Creating modular applications

  • Controlling application flow with the Component Router
  • Dividing application functionality across multiple Component trees
  • Parameterising routes for dynamic navigation

Manipulating data with Pipes

  • Formatting dates for display
  • Chaining pipes to combine functionality
  • Filtering data with custom Pipes

Building Interactive Forms

Displaying and capturing data

  • Developing forms with ngFormModel and FormBuilder
  • Creating a form from a business object
  • Two-way binding between input controls and data model

Validating form input

  • Leveraging HTML5 and custom validation
  • Providing user feedback from validators

Managing Asynchronous Behaviour

Keeping the App responsive

  • Subscribing to Observables
  • Converting stream data types with the Observable map function
  • Optimising change detection with immutability and onPush

Interacting with a REST Web service

  • Retrieving data with the HTTP object
  • Sending data asynchronously with POST
  • Invoking different HTTP methods
  • Gracefully handling errors

Extending Angular Capabilities

  • Adding functionality to the DOM
  • Creating a custom styling directive
  • Performing animation