Development
Web Development
MEAN Stack
Angular, Ionic & Node: Build A Real Web & Mobile Chat App
4.3 (167 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.
962 students enrolled

Angular, Ionic & Node: Build A Real Web & Mobile Chat App

Learn to connect your Angular and Ionic Frontend to a NodeJS & MongoDB backend by building a real web & mobile chat app
4.3 (167 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.
962 students enrolled
Created by Uzochukwu Eddie Odozi
Last updated 12/2018
English
English [Auto-generated], Italian [Auto-generated]
Preview this course
Angular, Ionic & Node: Build A Real Web & Mobile Chat App
Current price: $64.99 Original price: $99.99 Discount: 35% off
7 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 37 hours on-demand video
  • 6 articles
  • 34 downloadable resources
  • 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
  • Build real Angular app with NodeJS backend
  • Build real Ionic app with NodeJS backend
  • Understand RESTful API Design
  • Connect Angular Frontend with a NodeJS Backend
  • Connect Ionic app with a NodeJS Backend
  • Use MongoDB with Mongoose to interact with Data on the Backend
  • Image upload from Angular and Ionic apps
  • Use Cloudinary cloud storage for images
  • SocketIO for real-time interaction
  • Use materialize css framework
  • Add authentication using JSON Web Tokens (JWT)
  • Private chat functionality
  • Add emojis to Angular and Ionic apps
  • Update Angular apps to Angular 7
  • Angular Lazy Loading
Course content
Expand all 416 lectures 36:53:19
+ – Tools Installation
5 lectures 18:52
Install NodeJS
03:45
Install Latest Angular Version
03:57
Install MongoDB
04:37
Install Robo3T
05:44
VS Code
00:49
+ – Create Angular Project
9 lectures 29:48
Section Introduction
01:12
Angular Frontend & NodeJS Backend Github Links
00:01
Create Angular Project
03:32
Angular CLI
03:26
Angular Folders
04:04
Prettier
07:21
Materialize CSS
01:51
Add Materialize CSS
02:29
Install Materialize
05:52

Answer all questions

Questions
3 questions
+ – Authentication Components
12 lectures 58:40
Section Introduction
00:32
Auth Component
04:47
Auth Routing Module
09:20
Display Auth Component
03:22
Auth Component Tabs
07:29
Change Auth Tabs
05:56
Add Login and Sign Up Components
05:05
Sign Up Form
07:22
Sign Up Form Styles
05:20
Reinstall Materialize CSS
03:39
Change Tabs Color
03:47
Set Tabs Content Height
02:01

Answer all questions

Questions
2 questions
+ – Login and Sign Up Authentication
30 lectures 02:37:47
Section Introduction
00:57
Create NodeJS Folder
02:42
Install Express
08:15
Install Nodemon
01:24
Create Project Folders
01:56
Config Secret
02:25
Install Cookie Parser
02:26
User Schema
03:09
Auth Routes
06:12
Add Express Body Parser Middleware
05:58
Validate Sign Up Data
10:43
Http Status Codes Module
02:34
Check If Email Exist
06:57
Check If Username Exist
03:29
Save Data to DB
08:16
Use Postman
03:11
Add JWT
10:06
Save JWT in Cookie
02:08
Auth Sign Up Service
09:02
Sign Up Reactive Form
09:46
Add Cross Origin Resource Sharing (CORS) Module
06:05
Display Sign Up Form Errors
07:04
Add Error Div
03:59
Display Error Messages
05:58
Create Streams Component
07:00
Add Materialize Spinner
05:41
Login Route
09:10
Test Login with Postman
01:14
Login Form
06:04
Auth Login Service
03:56

Answer all questions

Questions
5 questions
+ – Posts Section
63 lectures 04:41:50
Section Introduction
01:36
Change Token Expiration Time
00:40
NGX Cookie Service
04:27
Token Service Methods
02:58
Set Token Method
04:50
Auth Guard
07:41
Test Auth Guard
04:12
Automatic Login
04:06
Toolbar Component
05:48
Toolbar CSS
01:35
Toolbar Nav Content
02:44
Streams Child Component
03:41
Side Component
02:01
Side Component Collection
03:34
Side Collection Items
04:13
Side Component Top
03:24
Posts Form Component
02:20
Post Form
05:46
Post Form Styles
01:46
Posts Schema
06:08
Posts Route
03:27
Posts Service - Part 1
07:23
Posts Service - Part 2
01:57
Verify JWT Token
09:35
Test Verify Token
06:17
Http Interceptor - Part 1
08:29
Http Interceptor - Part 2
02:43
Authorization Token
03:27
Send Post To DB
07:26
Add Post To User Model
02:25
Update User Post Array
06:13
Token Payload
07:04
Display Username On Toolbar
02:52
Add Post Component HTML - Part 1
05:05
Add Post Component HTML - Part 2
01:44
Post Component Style
02:14
Get All Posts
07:55
Display Posts
05:08
Install Moment Module
04:21
Install Socket.io
06:42
Connection Event
03:00
Install Socket.io Client
06:10
Emit Socket.io Event
08:37
Test Socket.io Event
02:51
Like Post Method
01:50
Add Like Post Route
06:08
Like Post Service Method
03:07
Allow Users To Like Post Once
02:23
Check If Post is Liked By User
08:11
Resize Post Component Column
00:57
Comments Component
05:21
Hide Nav Content On Comments Component
03:12
Comments Component HTML
03:07
Comments Service Method
07:14
Save Comment in DB
06:27
Disable Comments Button
01:40
Get SIngle Post Method
04:21
Display Comments
07:27
Refresh Comments
05:41
Display Post on Comments Component
04:50
Check If User Commented on a Post
02:18
Style Side Component
07:22
Auto Logout
03:39
+ – Users Section
48 lectures 04:03:52
Section Introduction
02:27
Create People Component
04:59
People Component HTML
04:42
People Component Styles
02:22
Get All Users Route
04:33
Get All Users Method
03:45
Users Service
05:32
Display All Users
02:50
Remove Logged in user
03:30
Follow User Route
05:08
Follow User Method
07:05
Follow User Button
05:30
Get Single User
04:18
Single User Service Method
03:27
Check if User Is Followed
08:41
Refresh Follow User Button
05:08
Following Component
04:41
Display Followed User
06:38
Unfollow User Service Method
03:19
Unfollow User Route
06:35
Followers Component
08:33
Followers Component Refresh
04:48
Notifications Component
04:28
Notifications Array
03:05
Add Notifications
03:46
Notifications Component HTML
06:13
Get Notifications
05:40
Fix Get User Route Error
03:21
Display Notifications
05:16
Change Notifications Time
01:37
Mark Notification Button
03:34
Mark Notification Route
05:53
Mark Notification
06:51
Notifications NG Class Directive
06:03
Delete Notification
05:18
Notifications Dropdown
08:14
Display Notifications in Dropdown
04:23
Dropdown NG Class Directive
02:27
Notifications Dropdown Time Format
01:21
Mark All Notifications Button
05:12
Mark All Notifications Method
10:33
Unread Notifications Count
05:54
Reload If Token Expired
03:32
Streams Component Tabs
07:16
Top Streams Component
05:53
Display Top Streams
08:22
Side Component User Data
07:58
Side Component Top Links
03:11
+ – Private Chat Section
63 lectures 05:42:20
Section Introduction
01:54
Chat Message Component
06:16
Hide Nav Content on Chat Component
03:07
Add HTML To Chat Component
03:33
Message Header
04:28
Message Content
04:50
Message Footer
05:50
Send Message Route
03:08
Message Schema
08:40
Add Chat List Array To User Schema
02:18
Message Service
07:06
Route Params
06:32
Send Chat Message Method
05:59
Prevent Empty Message
01:10
Conversation Find Method
08:34
Add New Conversation - Part 1
07:21
Add New Conversation - Part 2
03:55
Update Chat List Array
05:51
New Message Error
00:31
Test New Message
02:24
Update Message Array
07:08
Get All Messages Route
07:47
Get All Messages Service Method
06:24
Display Chat Messages
07:20
Refresh Chat Component
04:04
Auto Scroll Module
04:47
Join Chat Event
05:49
Emit Start Typing Event
09:04
Display User is Typing
03:20
Emit Stop Typing Event
06:14
Message Dropdown
06:40
Display Messages in Dropdown
07:44
Moment Calendar Method
04:48
Align Message Dropdown
02:38
Check If Message is Read - Part 1
09:25
Check If Message is Read - Part 2
05:06
Hide Icon
02:04
Message Dropdown Link
02:39
Update Chat List Method
09:20
Test Update Chat List Method
02:10
Edit Server File
02:20
NG2 Emoji Picker
05:32
Add Emoji Content
08:26
Display Emojis
05:00
Hide Message Unread Icon
03:33
Navigate to Chat Page
02:58
Mark Receiver's Message Route
06:03
Message Aggregate Method - Part 1
08:56
Message Aggregate Method - Part 2
04:42
Mark All Messages As Read
09:28
Clear Message Count
02:04
Add User Class - Part 1
07:39
Add User Class - Part 2
06:33
Emit Online Event
08:26
Listen For Users Online Event
03:54
Disconnect Event
08:16
Angular Output Decorator
06:54
Angular Input Property
07:53
NG Changes Method
05:37
Test If User is Online
05:05
Add Margin To Element
07:15
Show If User Is Online On People Component
05:45
Style Scrollbar
02:03
+ – Images Section
44 lectures 04:24:20
Section Introduction
02:12
Images Component
05:50
Images Component HTML
06:51
Change Upload Button
03:11
NG2 File Upload Module
07:15
Add Read Image File Method
06:34
Use Read Image File Method
04:58
Upload Image Route
08:08
Cloudinary
06:17
Cloudinary Upload Method
07:18
Upload Images To Cloudinary
02:37
Add Default Profile Image For Users
06:19
Display User Images
06:56
Set Default Image Method
05:31
Change Default Image
05:01
Display Profile Image
09:50
Display User Image in Chat
06:17
Fix Chat Image Issue
05:05
View User Component
04:05
View User Tabs
06:26
Add Tabs Div
04:22
Hide and Show Tabs Content
06:41
Get User Data By Name
05:14
Display Tab Posts
07:15
Display Tab Followers
05:56
Post Tab Image
01:54
Logged in User Post Tabs
02:34
Profile View Method
07:53
Profile View Route - Part 1
09:12
Profile View Route - Part 2
06:15
Fix View User Link
01:43
Change Password Component
04:26
Change Password Component HTML
01:35
Password Field Validation
07:47
Custom Password Match Validation
07:20
Change Password Route
04:24
Change Password Controller - Part 1
09:33
Change Password Controller - Part 2
05:01
Send Image With Post - Part 1
07:33
Send Image With Post - Part 2
08:27
Test Post Image Send
02:01
Display Post Images
06:10
Remove Old Posts
07:53
Display Location
16:30
+ – Ionic Section 1
49 lectures 04:37:44
Section Introduction
01:46
Ionic Project Github Link
00:01
Install Ionic and Cordova
03:29
Create Ionic Project
07:10
Create Home Page
09:27
Login and Register Pages
03:29
Test Nav Controller Push Method
05:14
App and Variables Scss
04:19
Login Page HTML
09:33
Login Page Styles
04:23
Register Page Styles
05:27
Replace Placeholder With Text
02:18
Register User NG Model
06:04
Register Auth Provider
07:41
Register User
03:24
Display Error Alert
08:20
Ionic Storage
08:04
Get Token Payload
03:54
Add Loader
03:31
Create Tabs Page
04:49
Automatic Login
07:32
Login
06:46
Ionic Token Http Interceptor - Part 1
07:15
Ionic Token Http Interceptor - Part 2
07:46
Add All Provider Methods
06:27
Add Tabs
06:18
Streams Segment
05:23
Add Segment Contents
05:41
Display All Posts
08:53
Display Post Images
05:33
Like Post Method
04:09
Add Comments Page
05:50
Hide Tabs On Comments Page
05:32
Comments Page HTML
06:56
Display Comments
07:08
Add Comments
07:17
Install Socket.io Client
06:44
Check If Post is Liked By User
06:08
Add Fab Button
07:54
Post Modal Back Button
03:51
Add Post Input
06:36
Send Post
06:23
Ionic Native Camera Module
06:48
Add Camera Options
06:36
Add Cordova Browser Plugin
05:25
Test Post Image Upload
04:52
Display Top Posts
03:16
Check If Token is Expired
03:13
Hide Tabs On Login Page
03:09
Requirements
  • Basic HTML and CSS knowledge helps, but isn't a must-have
  • Basic JavaScript knowledge is required
Description

Have you tried to build your own web and mobile application with real time functionalities using NodeJS backend? Perhaps, you have tried to build an application either for web or mobile with chat functionalities and you need to do more with it, then this course is for you.

Angular is one of the most popular frameworks for building client apps with HTML, CSS and TypeScript. If you want to establish yourself as a front-end or full-stack developer, you need to learn Angular.

Ionic is an open source framework used for developing mobile applications. It provides tools and services for building Mobile UI with native look and feel. 

This course follows a hands-on approach, which means that the whole course is structured around one big application and the different concepts will be explained detailedly as they are introduced in this application. The backend built using NodeJS will be used for both the Angular web app and Ionic mobile app.

So two apps with one backend

During this course, you will learn to:

  • Set up a NodeJS + Express + MongoDB + Angular + Ionic Application with the help of the Angular CLI, Ionic CLI and Node Command Line Tool

  • Use NodeJS and Express framework

  • Use JWT for authentication

  • Add authorization to Angular apps

  • Understand RESTful API Design

  • Image upload from Angular and Ionic apps

  • Use Cloudinary cloud storage for images

  • Connect your NodeJS backend with your Angular App through Angular’s HttpClient service

  • Connect your NodeJS  backend with your Ionic App through Ionic's providers

  • Add private chat functionality

  • Add emojis to Angular and Ionic apps

  • SocketIO for real-time interaction

  • Use materialize css framework

  • Handle Errors

  • Forms with validations

  • Learn concepts like Angular's http interceptors

  • Update Angular apps to Angular 7

  • Angular Lazy Loading techniques

  • And much more

At the end of this course, you will be able to build a complete and functioning real-time application both for web and mobile platforms.

Who this course is for:
  • This course is for everyone interested in putting existing Angular, Ionic and NodeJS knowledge into action
  • This course is for anyone interested in building web and mobile application using same backend
  • Everyone interested in building a modern, full-stack application