Angular 5 (formerly Angular 2) – The Complete Guide

Angular 5 (formerly Angular 2) – The Complete Guide
Angular 5 (formerly Angular 2) – The Complete Guide

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 27 Hours | 5.10 GB
eLearning | Skill level: All Levels


Master Angular (Angular 2+, incl. Angular 5) and build awesome, reactive web apps with the successor of Angular.js

This course starts from scratch, you neither need to know Angular 1 nor Angular 2! (Angular 5 simply is the latest version of Angular 2)

Join the most comprehensive and popular Angular course on Udemy, because now is the time to get started!

From Setup to Deployment, this course covers it all! You’ll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular App with Modules and Offline Compilation and much more – and in the end: You’ll learn how to deploy an application!

But that’s not all! This course will also show you how to use the Angular CLI and feature a complete project, which allows you to practice the things learned throughout the course!

Get a very deep understanding of how to create Angular applications

This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular offers and how to apply them correctly.

Specifically you will learn:

  • Which architecture Angular uses
  • How to use TypeScript to write Angular applications
  • All about directives and components, including the creation of custom directives/ components
  • How databinding works
  • All about routing and handling navigation
  • What Pipes are and how to use them
  • How to access the Web (e.g. RESTful servers)
  • What dependency injection is and how to use it
  • How to use Modules in Angular
  • How to optimize your (bigger) Angular Application
  • We will build a major project in this course
  • and much more!
+ Table of Contents

Getting Started
1 Course Introduction
2 What is Angular_
3 Angular vs Angular 2 vs Angular 4
4 CLI Deep Dive & Troubleshooting
5 Project Setup and First App
6 Editing the First App
7 The Course Structure
8 How to get the Most out of the Course
9 What is TypeScript_
10 A Basic Project Setup using Bootstrap for Styling
11 Where to find the Course Source Code

The Basics
12 Module Introduction
13 How an Angular App gets Loaded and Started
14 Components are Important!
15 Creating a New Component
16 Understanding the Role of AppModule and Component Declaration
17 Using Custom Components
18 Creating Components with the CLI & Nesting Components
19 Working with Component Templates
20 Working with Component Styles
21 Fully Understanding the Component Selector
22 What is Databinding_
23 String Interpolation
24 Property Binding
25 Property Binding vs String Interpolation
26 Event Binding
27 Bindable Properties and Events
28 Passing and Using Data with Event Binding
29 Two-Way-Databinding
30 Important_ FormsModule is Required for Two-Way-Binding!
31 Combining all Forms of Databinding
32 Understanding Directives
33 Using ngIf to Output Data Conditionally
34 Enhancing ngIf with an Else Condition
35 Styling Elements Dynamically with ngStyle
36 Applying CSS Classes Dynamically with ngClass
37 Outputting Lists with ngFor
38 Getting the Index when using ngFor

Course Project – The Basics
39 Project Introduction
40 Planning the App
41 Setting up the Application
42 Creating the Components
43 Using the Components
44 Adding a Navigation Bar
45 Alternative Non-Collapsable Navigation Bar
46 Creating a _Recipe_ Model
47 Adding Content to the Recipes Components
48 Outputting a List of Recipes with ngFor
49 Displaying Recipe Details
50 Working on the ShoppingListComponent
51 Creating an _Ingredient_ Model
52 Creating and Outputting the Shopping List
53 Adding a Shopping List Edit Section
54 Wrap Up & Next Steps

Debugging
55 Understanding Angular Error Messages
56 Debugging Code in the Browser Using Sourcemaps
57 Using Augury to Dive into Angular Apps

Components & Databinding Deep Dive
58 Module Introduction
59 Splitting Apps into Components
60 Property & Event Binding Overview
61 Binding to Custom Properties
62 Assigning an Alias to Custom Properties
63 Binding to Custom Events
64 Assigning an Alias to Custom Events
65 Custom Property and Event Binding Summary
66 Understanding View Encapsulation
67 More on View Encapsulation
68 Using Local References in Templates
69 Getting Access to the Template & DOM with @ViewChild
70 Projecting Content into Components with ng-content
71 Understanding the Component Lifecycle
72 Seeing Lifecycle Hooks in Action
73 Lifecycle Hooks and Template Access
74 Getting Access to ng-content with @ContentChild
75 Wrap Up

Course Project – Components & Databinding
76 Introduction
77 Adding Navigation with Event Binding and ngIf
78 Passing Recipe Data with Property Binding
79 Passing Data with Event and Property Binding (Combined)
80 Allowing the User to Add Ingredients to the Shopping List

Directives Deep Dive
81 Module Introduction
82 ngFor and ngIf Recap
83 ngClass and ngStyle Recap
84 Creating a Basic Attribute Directive
85 Using the Renderer to build a Better Attribute Directive
86 More about the Renderer
87 Using HostListener to Listen to Host Events
88 Using HostBinding to Bind to Host Properties
89 Binding to Directive Properties
90 What Happens behind the Scenes on Structural Directives
91 Building a Structural Directive
92 Understanding ngSwitch

Course Project – Directives
93 Building and Using a Dropdown Directive

Using Services & Dependency Injection
94 Module Introduction
95 Why would you Need Services_
96 Creating a Logging Service
97 Injecting the Logging Service into Components
98 Creating a Data Service
99 Understanding the Hierarchical Injector
100 How many Instances of Service Should It Be_
101 Injecting Services into Services
102 Using Services for Cross-Component Communication

Course Project – Services & Dependency Injection
103 Introduction
104 Setting up the Services
105 Managing Recipes in a Recipe Service
106 Using a Service for Cross-Component Communication
107 Adding the Shopping List Service
108 Using Services for _Push Notifications_
109 Adding Ingredients to Recipes
110 Passing Ingredients from Recipes to the Shopping List (via a Service)

Changing Pages with Routing
111 Module Introduction
112 Why do we need a Router_
113 Understanding the Example Project
114 Setting up and Loading Routes
115 Navigating with Router Links
116 Understanding Navigation Paths
117 Styling Active Router Links
118 Navigating Programmatically
119 Using Relative Paths in Programmatic Navigation
120 Passing Parameters to Routes
121 Fetching Route Parameters
122 Fetching Route Parameters Reactively
123 An Important Note about Route Observables
124 Passing Query Parameters and Fragments
125 Retrieving Query Parameters and Fragments
126 Practicing and some Common Gotchas
127 Setting up Child (Nested) Routes
128 Using Query Parameters – Practice
129 Configuring the Handling of Query Parameters
130 Redirecting and Wildcard Routes
131 Important_ Redirection Path Matching
132 Outsourcing the Route Configuration
133 An Introduction to Guards
134 Protecting Routes with canActivate
135 Protecting Child (Nested) Routes with canActivateChild
136 Using a Fake Auth Service
137 Controlling Navigation with canDeactivate
138 Passing Static Data to a Route
139 Resolving Dynamic Data with the resolve Guard
140 Understanding Location Strategies
141 Wrap Up

Course Project – Routing
142 Planning the General Structure
143 Setting Up Routes
144 Adding Navigation to the App
145 Marking Active Routes
146 Fixing Page Reload Issues
147 Child Routes_ Challenge
148 Adding Child Routing Together
149 Configuring Route Parameters
150 Passing Dynamic Parameters to Links
151 Styling Active Recipe Items
152 Adding Editing Routes
153 Retrieving Route Parameters
154 Programmatic Navigation to the Edit Page
155 One Note about Route Observables
156 Project Cleanup

Understanding Observables
157 Module Introduction
158 Analyzing a Built-in Angular Observable
159 Building & Using a First Simple Observable
160 Building & Using a Custom Observable from Scratch
161 Unsubscribe!
162 Where to learn more
163 Using Subjects to Pass AND Listen to Data
164 Understanding Observable Operators
165 Wrap Up

Course Project – Observables
166 Improving the Reactive Service with Observables (Subjects)

Handling Forms in Angular Apps
167 Module Introduction
168 Why do we Need Angular’s Help_
169 Template-Driven (TD) vs Reactive Approach
170 An Example Form
171 TD_ Creating the Form and Registering the Controls
172 TD_ Submitting and Using the Form
173 TD_ Understanding Form State
174 TD_ Accessing the Form with @ViewChild
175 TD_ Adding Validation to check User Input
176 Built-in Validators & Using HTML5 Validation
177 TD_ Using the Form State
178 TD_ Outputting Validation Error Messages
179 TD_ Set Default Values with ngModel Property Binding
180 TD_ Using ngModel with Two-Way-Binding
181 TD_ Grouping Form Controls
182 TD_ Handling Radio Buttons
183 TD_ Setting and Patching Form Values
184 TD_ Using Form Data
185 TD_ Resetting Forms
186 Introduction to the Reactive Approach
187 Reactive_ Setup
188 Reactive_ Creating a Form in Code
189 Reactive_ Syncing HTML and Form
190 Reactive_ Submitting the Form
191 Reactive_ Adding Validation
192 Reactive_ Getting Access to Controls
193 Reactive_ Grouping Controls
194 Reactive_ Arrays of Form Controls (FormArray)
195 Reactive_ Creating Custom Validators
196 Reactive_ Using Error Codes
197 Reactive_ Creating a Custom Async Validator
198 Reactive_ Reacting to Status or Value Changes
199 Reactive_ Setting and Patching Values

Course Project – Forms
200 Introduction
201 TD_ Adding the Shopping List Form
202 Adding Validation to the Form
203 Allowing the Selection of Items in the List
204 Loading the Shopping List Items into the Form
205 Updating existing Items
206 Resetting the Form
207 Allowing the the User to Clear (Cancel) the Form
208 Allowing the Deletion of Shopping List Items
209 Creating the Template for the (Reactive) Recipe Edit Form
210 Creating the Form For Editing Recipes
211 Syncing HTML with the Form
212 Adding Ingredient Controls to a Form Array
213 Adding new Ingredient Controls
214 Validating User Input
215 Submitting the Recipe Edit Form
216 Adding a Delete and Clear (Cancel) Functionality
217 Redirecting the User (after Deleting a Recipe)
218 Adding an Image Preview
219 Providing the Recipe Service Correctly
220 Deleting Ingredients and Some Finishing Touches

Using Pipes to Transform Output
221 Introduction & Why Pipes are Useful
222 Using Pipes
223 Parametrizing Pipes
224 Where to learn more about Pipes
225 Chaining Multiple Pipes
226 Creating a Custom Pipe
227 Parametrizing a Custom Pipe
228 Example_ Creating a Filter Pipe
229 Pure and Impure Pipes (or_ How to _fix_ the Filter Pipe)
230 Understanding the _async_ Pipe

Making Http Requests
231 MUST READ_ Angular 5 and Http
232 Introduction & How Http Requests Work in SPAs
233 Example App & Backend Setup
234 Sending Requests (Example_ POST Request)
235 Adjusting Request Headers
236 Sending GET Requests
237 Sending a PUT Request
238 Transform Responses Easily with Observable Operators (map())
239 Using the Returned Data
240 Catching Http Errors
241 Using the _async_ Pipe with Http Requests

Course Project – Http
242 Introduction
243 Setting up Firebase as a Dummy Backend
244 Sending PUT Requests to Save Data
245 GETting Back the Recipes
246 Transforming Response Data to Prevent Errors

Authentication & Route Protection in Angular Apps
247 Module Introduction
248 How Authentication Works in Single-Page-Applications
249 More about JWT
250 Creating a Signup Page and Route
251 Setting up the Firebase SDK
252 Signing Users Up
253 Signin Users In
254 Requiring a Token (on the Backend)
255 Sending the Token
256 Checking and Using Authentication Status
257 Adding a Logout Button
258 Route Protection and Redirection Example
259 Wrap Up
260 Possible Improvements

Using Angular Modules & Optimizing Apps
261 Module Introduction
262 The Idea behind Modules
263 Understanding the App Module
264 Understanding Feature Modules
265 Creating a Recipe Feature Module
266 Registering Routes in a Feature Module
267 Understanding Shared Modules
268 Creating a Shared Module
269 Creating a Shopping List Feature Module
270 Loading Components via Selectors vs Routing
271 A Common Gotcha
272 Creating the Auth Feature Module
273 Understanding Lazy Loading
274 Adding Lazy Loading to the Recipes Module
275 Protecting Lazy Loaded Routes with canLoad
276 How Modules and Services Work Together
277 Understanding the Core Module
278 Creating a Basic Core Module
279 Restructuring Services to use the Child Injector
280 Using Ahead-of-Time Compilation
281 How to use AoT Compilation with the CLI
282 Preloading Lazy Loaded Routes
283 Wrap Up

Deploying an Angular App
284 Module Introduction
285 Deployment Preparations and Important Steps
286 Example_ Deploying to AWS S3

Bonus_ The HttpClient
287 Module Introduction
288 The Documentation
289 Unlocking
290 Request Configuration and Response
291 Requesting Events
292 Settings Headers
293 Http Parameters
294 Progress
295 Interceptors
296 Modifying Requests in Interceptors
297 Multiple Interceptors
298 Wrap Up
299 Useful Resources & Links

Bonus_ Working with NgRx in our Project
300 Module Introduction
301 State Challenges
302 Getting Started with Reducers
303 Adding Actions
304 Finishing the First Reducer
305 Registering the Application Store
306 Selecting Data from State
307 Dispatch Actions
308 More Actions and Adding Ingredients
309 Dispatching Update and Deleting Shopping List Actions
310 Expanding App State
311 Editing the Shopping-List via NgRx
312 Managing all Relevant State
313 Authentication and Side Effects – Introduction
314 Setting up the Auth Store Files
315 The Reducer
316 Adding Reducer Logic & Actions
317 Adjusting the App Module Setup
318 Using Authentication
319 Dispatch Actions
320 Getting State Access in Http Interceptor
321 Handling the Auth Token
322 Only React to Actions Once via take(1)
323 A Closer Look at Effects
324 Auth Effects and Actions
325 Effects – How they Work
326 Adding Auth Signup
327 Adding Auth Signin
328 Navigation as a Side Effect
329 Handling Logout via NgRx
330 Additional Fixes
331 Redirecting Upon Logout
332 What’s Next_
333 The Router Store Package
334 Store Devtools
335 Lazy Load and Dynamic Injection
336 Adding Recipe Actions
337 Adding Recipe Reducers
338 Dispatching and Selecting State
339 Viewing and Deleting Recipes via NgRx
340 Editing and Updating Recipes via NgRx
341 Recipes Side Effects – Fetching from Server
342 Recipes Side Effects – Storing Recipes on Server
343 Cleaning Up
344 Wrap Up
345 Useful Resources & Links

Bonus_ Angular Universal
346 Module Introduction
347 A Look at the Prequisites
348 Creating the Server Main File (main_server_ts)
349 Working on the tsconfig Configuration
350 Handling SSR as a New App (in _angular-cli_json)
351 Creating the Server
352 Wrap Up
353 Useful Resources & Links

Angular Animations
354 Making Animations Work with Angular 4+
355 Introduction
356 Setting up the Starting Project
357 Animations Triggers and State
358 Switching between States
359 Transitions
360 Advanced Transitions
361 Transition Phases
362 The _void_ State
363 Using Keyframes for Animations
364 Grouping Transitions
365 Using Animation Callbacks

A Basic Introduction to Unit Testing in Angular Apps
366 About this Section
367 Introduction
368 Why Unit Tests_
369 Analyzing the Testing Setup (as created by the CLI)
370 Running Tests (with the CLI)
371 Adding a Component and some fitting Tests
372 Testing Dependencies_ Components and Services
373 Simulating Async Tasks
374 Using _fakeAsync_ and _tick_
375 Isolated vs Non-Isolated Tests
376 Further Resources & Where to Go Next

Course Roundup
377 Course Roundup

About the Course Update & Angular 4
378 What Changed with Angular 4_

Custom Project & Workflow Setup
379 Introduction
380 Initializing the Project
381 Setting up the Basic Project Files
382 Installing the Core Dependencies
383 Filling the Project Files with Some Life
384 index_html & Polyfills
385 Installing Development Dependencies
386 Setting up a Development Workflow
387 Finishing & Using the Development Workflow
388 Lazy Loading + AoT Temporarily Broken
389 Setting up a Production Workflow
390 Adding Types & Fixing Bugs
391 Finishing Touches

Bonus_ TypeScript Introduction (for Angular 2 Usage)
392 Introduction
393 Using Types
394 Classes
395 Interfaces
396 Generics
397 Wrap up & Modules
398 Deep dive into TypeScript

Download from DepFile

Download from Turbobit

Download from DepositFiles