Angular 6 (formerly Angular 2) – The Complete Guide

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

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

Master Angular (Angular 2+, incl. Angular 6) 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 6 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!

And if you do get stuck, you benefit from an extremely fast and friendly support – both via direct messaging or discussion. You have my word!

Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away.

This Course uses TypeScript

TypeScript is the main language used by the official Angular team and the language you’ll mostly see in Angular tutorials. It’s a superset to JavaScript and makes writing Angular apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. Check out the free videos for more information.

TypeScript knowledge is, however, not required – basic JavaScript knowledge is enough.

Why Angular?

Angular is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular 6 simply is the latest version of the Angular framework and simply an update to Angular 2.

Angular is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.

Due to the drastic differences between Angular 1 and Angular (=Angular 6) you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular.

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 A Basic Project Setup using Bootstrap for Styling
3 Where to find the Course Source Code
4 What is Angular
5 Angular vs Angular 2 vs Angular 4
6 CLI Deep Dive _ Troubleshooting
7 Project Setup and First App
8 Editing the First App
9 The Course Structure
10 How to get the Most out of the Course
11 What is TypeScript

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

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

59 Understanding Angular Error Messages
60 Debugging Code in the Browser Using Sourcemaps
61 Using Augury to Dive into Angular Apps

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

Course Project – Components _ Databinding
81 Introduction
82 Adding Navigation with Event Binding and ngIf
83 Passing Recipe Data with Property Binding
84 Passing Data with Event and Property Binding (Combined)
85 Allowing the User to Add Ingredients to the Shopping List

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

Course Project – Directives
98 Building and Using a Dropdown Directive

Using Services _ Dependency Injection
99 Module Introduction
100 Practicing Services
101 Services in Angular 6
102 Why would you Need Services
103 Creating a Logging Service
104 Injecting the Logging Service into Components
105 Creating a Data Service
106 Understanding the Hierarchical Injector
107 How many Instances of Service Should It Be
108 Injecting Services into Services
109 Using Services for Cross-Component Communication

Course Project – Services _ Dependency Injection
110 Introduction
111 Setting up the Services
112 Managing Recipes in a Recipe Service
113 Using a Service for Cross-Component Communication
114 Adding the Shopping List Service
115 Using Services for Push Notifications
116 Adding Ingredients to Recipes
117 Passing Ingredients from Recipes to the Shopping List (via a Service)

Changing Pages with Routing
118 Module Introduction
119 Passing Parameters to Routes
120 Fetching Route Parameters
121 Fetching Route Parameters Reactively
122 An Important Note about Route Observables
123 Passing Query Parameters and Fragments
124 Retrieving Query Parameters and Fragments
125 Practicing and some Common Gotchas
126 Setting up Child (Nested) Routes
127 Using Query Parameters – Practice
128 Configuring the Handling of Query Parameters
129 Why do we need a Router
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 the Example Project
141 Understanding Location Strategies
142 Wrap Up
143 Setting up and Loading Routes
144 Navigating with Router Links
145 Understanding Navigation Paths
146 Styling Active Router Links
147 Navigating Programmatically
148 Using Relative Paths in Programmatic Navigation

Course Project – Routing
149 Planning the General Structure
150 Styling Active Recipe Items
151 Adding Editing Routes
152 Retrieving Route Parameters
153 Programmatic Navigation to the Edit Page
154 One Note about Route Observables
155 Project Cleanup
156 Setting Up Routes
157 Adding Navigation to the App
158 Marking Active Routes
159 Fixing Page Reload Issues
160 Child Routes Challenge
161 Adding Child Routing Together
162 Configuring Route Parameters
163 Passing Dynamic Parameters to Links

Understanding Observables
164 Module Introduction
165 RxJS 6 without rxjs-compat
166 Wrap Up
167 Angular 6 _ RxJS 6
168 Analyzing a Built-in Angular Observable
169 Building _ Using a First Simple Observable
170 Building _ Using a Custom Observable from Scratch
171 Unsubscribe!
172 Where to learn more
173 Using Subjects to Pass AND Listen to Data
174 Understanding Observable Operators

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

Handling Forms in Angular Apps
176 Module Introduction
177 Built-in Validators _ Using HTML5 Validation
178 TD Using the Form State
179 TD Outputting Validation Error Messages
180 TD Set Default Values with ngModel Property Binding
181 TD Using ngModel with Two-Way-Binding
182 TD Grouping Form Controls
183 TD Handling Radio Buttons
184 TD Setting and Patching Form Values
185 TD Using Form Data
186 TD Resetting Forms
187 Why do we Need Angular_s Help
188 Practicing Template-Driven Forms
189 Introduction to the Reactive Approach
190 Reactive Setup
191 Reactive Creating a Form in Code
192 Reactive Syncing HTML and Form
193 Reactive Submitting the Form
194 Reactive Adding Validation
195 Reactive Getting Access to Controls
196 Reactive Grouping Controls
197 Reactive Arrays of Form Controls (FormArray)
198 Template-Driven (TD) vs Reactive Approach
199 Reactive Creating Custom Validators
200 Reactive Using Error Codes
201 Reactive Creating a Custom Async Validator
202 Reactive Reacting to Status or Value Changes
203 Reactive Setting and Patching Values
204 Practicing Reactive Forms
205 An Example Form
206 TD Creating the Form and Registering the Controls
207 TD Submitting and Using the Form
208 TD Understanding Form State
209 TD Accessing the Form with @ViewChild
210 TD Adding Validation to check User Input

Course Project – Forms
211 Introduction
212 Creating the Template for the (Reactive) Recipe Edit Form
213 Creating the Form For Editing Recipes
214 Syncing HTML with the Form
215 Adding Ingredient Controls to a Form Array
216 Adding new Ingredient Controls
217 Validating User Input
218 Submitting the Recipe Edit Form
219 Adding a Delete and Clear (Cancel) Functionality
220 Redirecting the User (after Deleting a Recipe)
221 Adding an Image Preview
222 TD Adding the Shopping List Form
223 Providing the Recipe Service Correctly
224 Deleting Ingredients and Some Finishing Touches
225 Adding Validation to the Form
226 Allowing the Selection of Items in the List
227 Loading the Shopping List Items into the Form
228 Updating existing Items
229 Resetting the Form
230 Allowing the the User to Clear (Cancel) the Form
231 Allowing the Deletion of Shopping List Items

Using Pipes to Transform Output
232 Introduction _ Why Pipes are Useful
233 Understanding the async Pipe
234 Practicing Pipes
235 Using Pipes
236 Parametrizing Pipes
237 Where to learn more about Pipes
238 Chaining Multiple Pipes
239 Creating a Custom Pipe
240 Parametrizing a Custom Pipe
241 Example Creating a Filter Pipe
242 Pure and Impure Pipes (or How to fix the Filter Pipe)

Making Http Requests
243 MUST READ Angular 6 and Http
244 Using the Returned Data
245 Catching Errors without rxjs-compat
246 Catching Http Errors
247 Using the async Pipe with Http Requests
248 Introduction _ How Http Requests Work in SPAs
249 Example App _ Backend Setup
250 Sending Requests (Example POST Request)
251 Adjusting Request Headers
252 Sending GET Requests
253 Sending a PUT Request
254 RxJS 6 without rxjs-compat
255 Transform Responses Easily with Observable Operators (map())

Course Project – Http
256 Introduction
257 Setting up Firebase as a Dummy Backend
258 Sending PUT Requests to Save Data
259 GETting Back the Recipes
260 Transforming Response Data to Prevent Errors

Authentication _ Route Protection in Angular Apps
261 Module Introduction
262 Checking and Using Authentication Status
263 Adding a Logout Button
264 Route Protection and Redirection Example
265 Wrap Up
266 Possible Improvements
267 How Authentication Works in Single-Page-Applications
268 More about JWT
269 Creating a Signup Page and Route
270 Setting up the Firebase SDK
271 Signing Users Up
272 Signin Users In
273 Requiring a Token (on the Backend)
274 Sending the Token

Using Angular Modules _ Optimizing Apps
275 Module Introduction
276 Loading Components via Selectors vs Routing
277 A Common Gotcha
278 Creating the Auth Feature Module
279 Understanding Lazy Loading
280 Adding Lazy Loading to the Recipes Module
281 Protecting Lazy Loaded Routes with canLoad
282 How Modules and Services Work Together
283 Understanding the Core Module
284 Creating a Basic Core Module
285 Restructuring Services to use the Child Injector
286 The Idea behind Modules
287 Using Ahead-of-Time Compilation
288 How to use AoT Compilation with the CLI
289 Preloading Lazy Loaded Routes
290 Wrap Up
291 Understanding the App Module
292 Understanding Feature Modules
293 Creating a Recipe Feature Module
294 Registering Routes in a Feature Module
295 Understanding Shared Modules
296 Creating a Shared Module
297 Creating a Shopping List Feature Module

Deploying an Angular App
298 Module Introduction
299 Deployment Preparations and Important Steps
300 Example Deploying to AWS S3

Bonus The HttpClient
301 Module Introduction
302 Modifying Requests in Interceptors
303 Modifying Requests in Interceptors
304 Wrap Up
305 Useful Resources _ Links
306 The Documentation
307 Unlocking
308 Request Configuration and Response
309 Requesting Events
310 Settings Headers
311 Http Parameters
312 Progress
313 Interceptors

Bonus Working with NgRx in our Project
314 Module Introduction
315 More Actions and Adding Ingredients
316 Dispatching Update and Deleting Shopping List Actions
317 Expanding App State
318 Editing the Shopping-List via NgRx
319 Managing all Relevant State
320 Authentication and Side Effects – Introduction
321 Setting up the Auth Store Files
322 The Reducer
323 Adding Reducer Logic _ Actions
324 Adjusting the App Module Setup
325 Important Angular 6, RxJS 6 and this section!
326 Using Authentication
327 Dispatch Actions
328 Getting State Access in Http Interceptor
329 Handling the Auth Token
330 Only React to Actions Once via take(1)
331 A Closer Look at Effects
332 Auth Effects and Actions
333 Effects – How they Work
334 Adding Auth Signup
335 Adding Auth Signin
336 State Challenges
337 Navigation as a Side Effect
338 Handling Logout via NgRx
339 Additional Fixes
340 Additional Fixes
341 Redirecting Upon Logout
342 What_s Next
343 The Router Store Package
344 Store Devtools
345 Lazy Load and Dynamic Injection
346 Adding Recipe Actions
347 Getting Started with Reducers
348 Adding Recipe Reducers
349 Dispatching and Selecting State
350 Viewing and Deleting Recipes via NgRx
351 Editing and Updating Recipes via NgRx
352 Recipes Side Effects – Fetching from Server
353 Recipes Side Effects – Storing Recipes on Server
354 Cleaning Up
355 Updating to RxJS 6+
356 Wrap Up
357 Useful Resources _ Links
358 Adding Actions
359 Finishing the First Reducer
360 Registering the Application Store
361 Selecting Data from State
362 Dispatch Actions

Bonus Angular Universal
363 Module Introduction
364 A Look at the Prequisites
365 Angular 6 _ Angular Universal
366 Creating the Server Main File (main.server.ts)
367 Working on the tsconfig Configuration
368 Handling SSR as a New App (in .angular-cli.json)
369 Creating the Server
370 Wrap Up
371 Useful Resources _ Links

Angular Animations
372 Making Animations Work with Angular 4+
373 Using Keyframes for Animations
374 Grouping Transitions
375 Using Animation Callbacks
376 Introduction
377 Setting up the Starting Project
378 Animations Triggers and State
379 Switching between States
380 Transitions
381 Advanced Transitions
382 Transition Phases
383 The void State

A Basic Introduction to Unit Testing in Angular Apps
384 About this Section
385 Isolated vs Non-Isolated Tests
386 Further Resources _ Where to Go Next
387 Introduction
388 Why Unit Tests
389 Analyzing the Testing Setup (as created by the CLI)
390 Running Tests (with the CLI)
391 Adding a Component and some fitting Tests
392 Testing Dependencies Components and Services
393 Simulating Async Tasks
394 Using fakeAsync and tick

Course Roundup
395 Course Roundup

Angular 6 Changes _ New Features
396 What changed with Angular 6
397 A First Look At Angular Elements
398 Additional Resources _ Articles

Custom Project _ Workflow Setup
399 Introduction
400 Finishing _ Using the Development Workflow
401 Setting up a Production Workflow
402 Adding Types _ Fixing Bugs
403 Finishing Touches
404 Initializing the Project
405 Setting up the Basic Project Files
406 Installing the Core Dependencies
407 Filling the Project Files with Some Life
408 index.html _ Polyfills
409 Installing Development Dependencies
410 Setting up a Development Workflow
411 Updating to Angular 6 + Webpack 4

Bonus TypeScript Introduction (for Angular 2 Usage)
412 Introduction
413 Using Types
414 Classes
415 Interfaces
416 Generics
417 Wrap up _ Modules
418 Deep dive into TypeScript

Download from Turbobit

Download from DepositFiles

Download from Rapidgator