Angular 2 & TypeScript Beginner Web Development

Overview and Tools
001 – What is Angular 2?
002 – Angular 2 – Why we use TypeScript
003 – Angular 2 – Overview of tools
004 – How to get free live help in our chatroom

Angular 2 – Creating a Skeleton Project
005 – Angular2 – skeleton project overview
006 – Angular2 – Defining the Dependancies (package.json)
007 – Angular2 – Configuring the TypeScript Compiler (tsconfig.json)
008 – Angular2 – Configuring the SystemJS Module Loader (systemjs.config.js)
009 – Angular2 – Installing the NPM Packages (npm install)
010 – Angular2 – Creating the Root Module (app.module.ts)
011 – Angular2 – Creating the Root Component (app.component.ts)
012 – Angular2 – Configuring the Starting of the App (main.ts)
013 – Angular2 – Creating the Hosting Webpage (index.html)
014 – Angular2 – Creating the Global Stylesheet (styles.css)
015 – Angular2 – Building and Running the App (npm start)
016 – angular2-skeleton-project.zip

Angular 2 Fundamentals – Task Card App
016 – Angular 2 – Task Card App Introduction
017 – Angular 2 – How to Clone the Skeleton Project
018 – Angular 2 – Creating the Card Component
019 – Angular 2 – Creating the Card-s HTML Markup (External Template)
020 – Angular 2 – Styling the Card Component
021 – Angular 2 – Adding the Task Status Icon (Third Party Library)
022 – Angular 2 – Creating the Task Model Class
023 – Angular 2 – Creating the Properties for the Card Component (Input Properties)
024 – Angular 2 – Using the Task Property Data (Property Binding)
025 – Angular 2 – Creating the Task Data Source
026 – Angular 2 – Using the Data Source to Generate Tasks (ngFor)
027 – Angular 2 – Creating the Add Task Form
028 – Angular 2 – Styling the Add Task Form
029 – Angular 2 – Adding the Angular Form Syntax (Template Driven Form)
030 – Angular 2 – Creating the Add Task Method (TypeScript Methods)
031 – Angular 2 – Adding New Tasks to the Data Source (Event Binding)
032 – Angular 2 – Protecting the Data Source from Empty Tasks
033 – Angular 2 – Clearing the Input Field After Adding a Task
034 – Angular 2 – Marking Tasks as Complete-Not Complete
035 – Angular 2 – Styling the Completed Cards (Class Binding)
036 – Angular 2 – Setting the Task Status Label to Reflect the Status (ngIf)
037 – Angular 2 – NgIf Directive vs the Hidden Property
038 – Angular 2 – Final Tweaks
039 – Exercise

Web API’s/HTTP – Reusable Weather Component
040 – Angular 2 – Introduction to the App
041 – Angular 2 – Creating the Weather Component
041 – angular2-task-card-app.zip
042 – Angular 2 – Creating the Weather Component Template
043 – Angular 2 – Styling the Weather Component
044 – Angular 2 – Creating the Weather Component (Services)
045 – Angular 2 – An Introduction to Dependency Injection
046 – Angular 2 – Getting the User-s Geographical Location
047 – Angular 2 – Signing Up for Forecast.io (Weather Data Web API)
048 – Angular 2 – Introduction to Observables (ReactiveX (RXJS) Library)
049 – Angular 2 – Introduction to JSONP Get Requests (HTTP-JSONP)
050 – Angular 2 – Getting the Weather Data (HTTP-JSONP)
051 – Angular 2 – Converting the Location Method to an Observable
052 – Angular 2 – Creating the Weather Model Class
053 – Angular 2 – Introduction to the Component Lifecycle
054 – Angular 2 – Subscribing to the Weather Data Observable (ngOnInit)
055 – Angular 2 – Displaying the Weather Data in the Template
056 – Angular 2 – Formatting the Weather Data on the Template (Pipes)
057 – Angular 2 – Converting the Wind Value (Custom Pipes)
058 – Angular 2 – Converting the Temperature Value (Custom Pipes)
059 – Angualr 2 – Getting a Goole Maps API Key
060 – Angular 2 – Getting the Location Name Using Reverse Geocoding (Google Maps API)
061 – Angular 2 – Displaying the Location on the Component
062 – Angular 2 – Allowing the Changing of the Data Units
063 – Angular 2 – Adding the Javascript Icon Library (Skycons)
064 – Angular 2 – Adding the Animated Weather Icons
065 – Angular 2 – Configuring the Weather Based Colors
066 – Angular 2 – Changing the Component Colors Based on the Weather (ngStyle)
067 – Angular 2 – Hiding the Component Content Until the Data is Available
068 – Angular 2 – Adding a Loading Indicator
069 – Angular 2 – Final Tweaks
070 – Angular 2 – Reusing the Component in Another App
071 – Angular 2 – Summary and Challenges

Real World Angular 2 App with Backend – Bugged Out
072 – Introduction to the Bugged Out App
073 – Angular 2 – Adding the Bugs Module (Feature Module)
074 – Angular 2 – Creating a Shared Module
074 – angular2-task-card-app-with-weather.zip
074 – angular2-weather-widget.zip
075 – Angular 2 – Creating the Bug List Component
076 – Angular 2 – Introduction to Routing
077 – Angular 2 – Creating the Router
078 – Angular 2 – Creating the Bug Module-s Own Routing
079 – Angular 2 – Implementing Route Redirection
080 – Angular 2 – Adding Wildcard Routing
081 – Angular 2 – Creating the Navbar Component
082 – Angular 2 – Creating the Navbar Template
083 – Angular 2 – Styling the Navbar
084 – Angular 2 – Introduction to Router Links
085 – Angular 2 – Creating the Bug List Template
086 – angular2-bugged-out-11-asset-buggedout-logo.png
086 – Angular 2 – Styling the Bug List Component
087 – Angular 2 – Introduction to the Core Module
088 – Angular 2 – Creating the Core Module
089 – Angular 2 – Introduction to Firebase
090 – Angular 2 – Creating the Firebase Project
091 – Angular 2 – Adding the Firebase SDK
092 – Angular 2 – Creating the Firebase Config Service
093 – Angular 2 – Structuring Our Bug Data in the Firebase Database
094 – Angular 2 – Configuring Access to the Firebase Database
095 – Angular 2 – Creating the Bug Service
096 – Angular 2 – Introduction to Firebase Listeners
097 – Angular 2 – Using a Firebase Listener to Get Data
098 – Angular 2 – Typescript Data Encapsulation
099 – Angular 2 – Creating the Bug Model Class
100 – Angular 2 – Parsing the Bug Data from Firebase (TypeScript Casting)
101 – Angular 2 – Displaying the Bugs in the Table
102 – Angular 2 – Creating the Bug Detail Component
103 – Angular 2 – Creating the Bug Detail Template (Bootstrap Modal)
104 – Angular 2 – Displaying the Bug Detail Modal (Attribute Binding)
105 – Angular 2 – Creating the Bug Detail Form
106 – Angular 2 – Styling the Bug Detail Form
107 – Angular 2 – Creating the Form Model (Reactive Forms-Model Driven Forms)
108 – Angular 2 – Binding the Form Model to the Template
109 – Angular 2 – Submitting the Reactive Form
110 – Angular 2 – Using Validators for Form Validation
111 – Angular 2 – Introduction to Form and FormControl States
112 – Angular 2 – Creating a Custom Validator
113 – Angular 2 – Applying a Custom Validator (Reactive Form – Model Driven Form)
114 – Angular 2 – Applying Validation Styling
115 – Angular 2 – Creating Reactive Forms Using the FormBuilder
116 – Angular 2 – Creating the Add Bug TypeScript Method
117 – Angular 2 – Using the Add Bug TypeScript Method
118 – Angular 2 – Resetting the Form on Submit
119 – Angular 2 – Passing an Existing Bug into the Form
120 – Angular 2 – Creating the Bug Update Method
121 – Angular 2 – Using the Update Bug Method
122 – Angular 2 – Adding a Firebase Child Changed Listener
123 – Angular 2 – Parsing the Bug Updates
124 – Angular 2 – Transforming the Date Format in the Table
125 – Angular 2 – Displaying the Status String in the Table (TypeScript Enum)
126 – Angular 2 – Displaying the Severity String in the Table
127 – Using the TypeScript Enums for the Dropdowns
128 – Disabling the Submit Button when the Form is Invalid
129 – Final Tweaks of the Bugged Out App
130 – Bugged Out Exercise
132 – angular2-course-bugged-out-app.zip

part-01 files 1-6
part-02 files 7-11
part-03 files 12-17
part-04 files 18-24
part-05 files 25-30
part-06 files 31-39
part-07 files 40-45
part-08 files 46-51
part-09 files 52-59
part-10 files 60-65
part-11 files 66-70
part-12 files 71-76
part-13 files 77-83
part-14 files 84-88
part-15 files 89-95
part-16 files 96-98
part-17 files 99-105
part-18 files 106-111
part-19 files 112-117
part-20 files 118-123
part-21 files 124-132