Angular 2 Web Development with TypeScript
Appreciate the superiority of TypeScript over JavaScript when writing web applications with Angular 2
Learn how to get started painlessly with Angular 2
Gain core skills by reviewing the well-structured sample code to write apps with TypeScript
Learning
Set up the development environment to get started with Angular 2 and Typescript
Grasp how to debug TypeScript in a browser
See how TypeScript solves “this” problem in JavaScript
Create web API web services in ASP.NET Core with Entity Framework 7 and SQL Server
Author the key building blocks of an Angular 2 application, injectable services, components, pipes, and directives
Find out how to validate user input using Angular 2 forms
Use the built-in Angular features to build list-based screens and study how to conditionally display data
Create a menu-based navigation system to guide the user through the application
Understand the basics of the Reactive Extensions framework to compose complex applications, flowing data, and events between components
About
Angular 2 is a web development framework focused on writing component-based applications. TypeScript allows us to develop applications in a higher language than JavaScript, avoiding common mistakes and leveraging the future features of JavaScript. The two make a great combination, helping us write maintainable, clean web applications’ code using the tools of our choice.
This course will get your well on your way to learning Angular 2 and TypeScript together. You will study and practice how to create Angular 2 components in TypeScript. When we are done, you will be able to set up the environment and create a full-fledged application that can consume and publish server data and allow users to interact with it.
We start out by setting up an environment to develop a TypeScript-based Angular application. You will study the object-oriented features of TypeScript and then jump straight into the key concepts of Angular 2. We will create a new project setup in Visual Studio 2015 using the ASP.NET vNext web project. Next,we’ll cover the creation of database and web API controllers that handle data operations using Entity Framework and SQL Server. Finally, we will create components, communicate with web services, and learn how to guide users through our application with menus and forms.
This course will take your web development skills to a new level, enabling you to author Angular 2 applications from scratch.
Style and Approach
This is a fast-paced, example-based video course packed with information from the basics of TypeScript and Angular 2 to writing code on the go. We start with TypeScript core concepts, move on to Angular building blocks, and finish up with a running application that can serve as a blueprint for further studying or production development. Although briskly paced, it covers all the key concepts of the technologies involved.
Introducing TypeScript
The Course Overview
Features and Benefits of TypeScript
Setting Up Our Environment
TypeScript Concepts
Built-in/ Primitive Types
Your First Class
Creating Advanced Methods
Inheritances and Interfaces
Debugging TypeScript
Advanced TypeScript Concepts
Using Enumerations, Constants, and Block Scope
Working with Statics
Advanced Properties
Generics
Solving "this" Problem
Starting Angular 2 Application
Angular 2.0 Versus Angular 1.0?
Setting Up the New Project
Overview of Key Angular 2 Concepts
Creating the Shell Page
Creating the First Component
Creating Web API Web Services
Brief Overview of the Web API
Brief Overview of the Entity Framework
Creating Entity Framework Classes and Configuration
Creating API Controller to Handle CRUD Operations
Configuring Application Start-up
Authoring Angular Components
Creating a Service That Uses HTTP
Creating the Nested Components Which Use Services
Creating a Directive
Creating a Pipe
Navigation
Basics of Client-Side Routing
Configuring Routes
Nested Routes, Parameters, and Query Strings
Navigating with Directives and Code
Working with Forms
Form Types and Anatomy of an Angular Form
Form Data Binding
Simple Validation
Reactive Forms
Built-in Angular Building Blocks
Dynamic Styling
Displaying Lists of Data
Conditionally Displaying Data
Change Detection and Component Queries
Dynamic Component Loading
Working with Server Data and Next Steps
Reactive Extensions
Performing Insert, Update, and Delete calls
Communicating Events between Components
Next Steps in Learning Angular 2
