Angular for beginners - modern TypeScript and RxJS
5.0 (2 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
20 students enrolled

Angular for beginners - modern TypeScript and RxJS

Learn programming with the Angular framework by building real-life image serving application
5.0 (2 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
20 students enrolled
Created by Nevyan Neykov
Last updated 5/2020
English [Auto]
Current price: $77.99 Original price: $129.99 Discount: 40% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 1 article
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • How to create a simple Angular application with ability to do photo uploads
  • How the Angular framework functions, and how it can be helpful in web projects
  • How to create a simple NodeJS server
  • How to work with microservices and JSON data
  • How to properly work with Observables
  • Work efficiently with Visual Studio Code
  • Work with web forms in Angular
Course content
Expand 19 lectures 01:43:01
+ Introduction
19 lectures 01:43:00

In this lecture you will learn how to setup the environment for your project. We will use visual studio code, we will be adding extensions to the editor, install Nodejs and Npm. Later we will install the Angular CLI in order to create a new angular project.

Preview 04:19

This is an optional lecture if you would like to know more on the internals of the project structure. You will understand what are the components, how a project bootstraps, how to run the application with the integrated web server, what packages are installed by default and where the preloaded assets, styles and selectors could be found.

Inside of an Angular application

In this lecture you will be creating a REST API with the free JSON server using npm. Then we will set up JSON file structure which the server will read and output to the users. In the meantime we will be creating a static image service using NodeJS and Express.

Preview 07:49

Initially you will be creating your first service using the Angular CLI. In order to use the service into our component, we will use dependency injection. We will explore the OnInit hook, and will set up the service to be accessible from multiple components. Later we will expand the service to use http requests via the HttpClient module. When everything is ready we will subscribe to the service in order to get data from the JSON server.

Introduction to Angular services

You will understand the power of templates in order to display data. We will see how to get data from service, and how to render JSON data using pipes. You will also learn how to display aggregate data structures with ngFor.

Angular Templates

You will learn the usefulness of interfaces, types and generics, while programming in TypeScript.

Interfaces, types and generics in Angular

You will learn how to improve the application logic using asynchronous (async) subscriptions inside the template. Next you will create your first observable and pass data to it. The goal this time is to fetch combined data and images.

Introducing RxJS to improve the code logic

We will create a new component, transferring all the previous logic from app component. Then we will use simple routing in order to load the component based on the provided url address.

Creating new component and adding routes via Router

You will learn how to get parameters from the url by subscribing to the the Router observable.

Router parameters

We will be creating service to load up individual item data, then we will display the data within the newly created component.

New service for the single item

We will be styling the template, and create internal linking between the product and main components.

Inner linking and styling the application

You will learn how to use the RxJS Subject and Observables together in order to propagate data along the components. We will be discussing what are the benefits of doing so. Then you will learn an example of why the RxJS SwitchMap operator is useful.

Refactoring services using RxJs

You will learn how to instantiate objects that follow an interface. Then you will create your first form and bind the form field to an object, this way creating data-model. The lecture will then reveal how to fetch data from the form.

Angular forms and bindings

We will add methods to our service, which will serve as microservices. Then we will send post request to the JSON-server in order to add new item.

Post requests with custom headers

You will learn how to create an preview of the uploaded image inside the Template using FileReader.

Image upload preview within the template

We will warm up by updating our presentation using component CSS. Then we will create a component upload functionality, using Map and Pipe RxJS operators. We will also accompany this functionality with an upload service on the Angular side.

Add upload functionality to the Angular side

In this lecture you will learn how to use proxy to be able to send requests to the image server. Then we will code the image upload server using NodeJS and Multer.

Image upload on the NodeJS side & proxying CORS requests

Using RxJS SwitchMap operator you will learn how to connect ( load up in synchronous manner) two server requests. Then we will use caching, RxJS subject and Observables to show instant changes to the user interface.

Finalizing the project

Here are discount coupons to my other courses

BONUS: Discounts to my other courses
  • Basics of JavaScript
  • Windows 10 or Ubuntu linux

"Angular for beginners - modern programming" is a follow up of my first Angular for Beginners course, now updated and improved based on users feedback. It is for people with beginners to intermediate JavaScript knowledge, who want to learn the essentials of Angular web projects.

The main goal this course is trying to accomplish is to save you time, because learning the basics of any framework, takes lots of time and persistence, and at certain point most of the people naturally give up. In order to circumvent this, in the course you can see most of the usual errors you might encounter and how easily you can figure them out. The lectures are based on Angular version 7, this way you can start learning based on the latest platform changes. The code is full of explanations on each and every step, leaving you not wondering on how and why the things happen.

Expect to learn how to :

  • structure an Angular application using best practices

  • create, use and style components, services and work with templates

  • build image upload service with the help of NodeJS and express

  • use the Visual Studio code

  • effectively use RxJS observables and operators

The course will also give you pretty good estimate if you are wondering whether you would like to continue working with the Angular or switch to another web-dev framework. In case you want to stay with Angular, you might browse for other courses in my profile such as working with Angular Material, in order to expand your knowledge further.

The course starts with installation of the Angular platform using NodeJS, setting up environment with Visual Studio Code and its TypeScript specific plugins.  During the course we will be using Angular command line interface (CLI) to easily create components and services.

The initial lectures are just for warm up, and to get you comfortable using Angular and TypeScript. We will go deep into good usage patterns of RxJS observables and how they can be convenient when dealing with asynchronous data. Then with the help of node package manager(NPM) we will install a JSON server for storing user text data, and an Express server for image upload data. You will then learn how to configure them both.We will also take a look on how to use routing to load up specific components and make server queries based on route parameters. Later we will reveal a way to pass through the cross-origin browser CORS restrictions to be able to run an Angular application and two servers on same development machine.

Wishing you a happy learning !

Who this course is for:
  • Beginners and intermediate web development students
  • Students who want to upgrade their JavaScript skills and learn a new modern framework
  • Students, who want to explore the Angular framework.