Angular 2, (Part 1 of 3): Introduction and Components

In this course, software engineer and architect Gregor Dzierzon walks you down the path to Angular 2 software development. You will learn how to choose a code editor as well as the Angular approach to modular applications. You will also get an introduction to and learn the benefits of using the popular programming language TypeScript to build a simple application for Angular 2.

Lesson 1:

• Pre-Requisites
• JavaScript Object Notation
• Setting up the Environment
• What is Node.js?
• Verify the Install
• What Is nmp?
• Text Editors
• IDE
• How to Choose an Editor?
• Demo: Installation
• Demo: Creating a Project
• Demo: Adding Components

Lesson 2:

• Angular2 Uses MV*
• What Is MVC
• Intro to MVC
• Multiple MVC Architecture
• Advanced Hotel Application
• How Does Angular2 Fit In?
• Angular2 Modules
• Demo: Simple Component

Lesson 3:

• Angular2 and TypeScript
• Downsides to TypeScript
• Introduction to TypeScript
• Typed Function Parameters
• Creating Interfaces
• Creating Classes
• Transpiling TypeScript
• Using TypeScript with Angular2
• Demo: Using TypeScript
• Demo: InterfaceDemo: Class
• Demo: JSON

Lesson 4:

• Angular2 Components
• Component = Controller
• Building Components
• Component Decorator
• Component Code
• Component Life Cycle
• Bootstrapping
• Demo: Create Component
• Demo: Lifecycle Events

Lesson 5:

• Angular2 Templates
• Template = View
• Define Custom Selector
• Hosting Templates
• Building Templates
• Adding Styles
• Demo: Templates
• Demo: Styling Templates

Lesson 6:

• Why Databinding?
• Data = Model
• Where Is the Model?
• Binding to the Model
• String Interpolation
• Creating a ViewModel
• Interpolation in HTML Tags
• Property/Attribute Binding
• Two-Way Binding
• Demo: Data Binding
• Demo: Event Binding
• Demo: Two-Way Binding

Lesson 7:

• Building Forms with Angular
• Define User Input
• Design HTML Form
• Improve User Experience
• Add Bootstrap to the Project
• Demo: Create a Form
• Demo: Add Bootstrap
• Process User Input
• HTML 5 Validation with Angular
• Validate User Input
• Using ngControl for Validation
• Define CSS Styles
• Add Validation Messages
• Demo: Add Validation
• Demo: Validation Cont.
• Create Forms with FormBuilder
• Build the HTML Template
• Build Form in the Controller
• Add Logic to Submit Event
• Why Use FormBuilder?
• Demo: FormBuilder
• Demo: FormComponent