Course Code: 19067

55266 Building Web Apps with Angular and TypeScript

Class Dates:
1/1/0001
Length:
3 Days
Cost:
$1495.00
Class Time:
Technology:
Virtualization
Delivery:
Instructor-Led Training, Virtual Instructor-Led Training

Overview

  • Course 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.
  • 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.

    At Course Completion
    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.

Prerequisites

  • A good understanding of JavaScript.
    Basic understanding of HTML and CSS.
    At least a notion of node.js and npm.
    An IDE for web development like Visual Studio Code or WebStorm.

Course Disclaimer

Course Cost does not include the cost of the courseware or exam. This course is subject to a minimum enrollment to run. This course may run as a virtual instructor led course if the course has not met the minimum enrollment. For more information, please contact 207-775-0244 or email: learn@vtec.org

Course Details

  • Module 1: Introduction to Angular
  • Evolution in Web App Development
  • Angular Core and Modules
  • TypeScript, Dart, Plain Old JavaScript
  • Understanding of modern web UI technologies
  • Role they play in modern development.
  • Module 2: Strongly Typed JavaScript with TypeScript
  • Writing Application-Scale JavaScript
  • Type-Safe JavaScript Development with TypeScript
  • Implementing Types, Classes and Inheritance
  • Namespaces and Modules
  • Lab 1: 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
  • Module 3: Core Concepts
  • Components
  • Modules
  • Services
  • Tools
  • Lab 1: Inspecting a First Project
  • Opening an running the project
  • Elements of an applications
  • Loading Modules
  • tsconfig.json
  • Module 4: Data binding
  • The Importance of Binding
  • Component to View
  • Structural Directives
  • Local Template Variables
  • Value Conversion
  • View to Component
  • Lab 1: TaskManager with Data Binding
  • Modules
  • Displaying a list of tasks
  • Style
  • Adding a Task
  • Module 5: Components
  • Using Multiple Components
  • Input and Output
  • ViewChild and ContentChild
  • EventEmitter
  • Directive Life Cycle
  • Lab 1: TaskManager: Using Multiple Components
  • Adding some style
  • TaskCreator component
  • TaskCard component
  • TaskList component
  • App component
  • Registering components
  • Module 6: Attribute Directives
  • What are Attribute Directives?
  • Built-in Attribute Directives
  • Custom Attribute Directives
  • Module 7: Structural Directives
  • What are Structural Directives?
  • Built-in Structural Directives
  • Templates
  • Custom Structural Directives
  • Module 8: Dependency Injection and Providers
  • Terminology
  • Dependency Injection Basics
  • Services
  • Providers
  • Factories
  • Injection Tokens
  • Lab 1: Creating a Task Service
  • Implementing the Service
  • Providing the service
  • Updating the AppComponent
  • Replacing the mock service with a real service
  • Module 9: Pipes
  • Using a Pipe
  • Built-in Pipes
  • Custom Pipes
  • Pure versus Impure
  • Lab 1: Temperature Pipe
  • Create a pipe for displaying temperatures in Kelvin, Celsius and Farenheit
  • Use your newly created pipe
  • Module 10: Working with Forms
  • What's in a Form
  • Responding to Changes
  • FormBuilder
  • Data Validation
  • Lab 1: Task Editor Form
  • The TaskEditor component
  • Basic Validation
  • Multiple validators
  • Custom validators
  • Module 11: Talking to the Server
  • Sending and Receiving Data
  • HTTPClient Module
  • HTTP Interceptors
  • Observables versus Promises
  • Lab 1: Working with Observables
  • Update Components wot work with observables
  • Lab 2: Talking to the Server
  • Providing the HttpClient Module
  • Implementing the HTTP service
  • Module 12: Building a Single Page Application
  • What is a SPA
  • Router Module
  • Route Configuration
  • Parent-Child Navigation
  • Route Guards
  • Lab 1: 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