by Brice Ayres | Publisher: Packt Publishing | Release Date: April 2018 | ISBN: 9781788834483

Build, launch and deploy your very own realtime chat application with authentication, using Angular, Bootstrap 4 and a Firebase backend.About This VideoWorking with RxJS and Observables to create realtime chat functionality in your applicationImplement supporting services with Angular to show modals, load spinners and authenticate your usersIntegrate Firebase into your Angular project and enable your Angular services to communicate with FirebaseIn DetailAngularJS is a structural framework for building dynamic web applications. If you're facing a challenge in building robust and efficient web applications with Angular, then look no further as this video course will enable you to get to grips with Angular by enabling you to build a realtime chat application using Angular, Angular CLI, Bootstrap 4 and Firebase. Initially, you will quickly scaffold a new Angular application using Angular CLI and then, you'll add Bootstrap 4 and a few other dependencies to build your application rapidly. On your journey, you will create new pages, implement routing, authentication and more. Next, you'll work on setting up a new Firebase account and integrating the Firebase backend into your Angular application.As you progress further, you will make use of a Reactive pattern and implement Observables to add realtime capabilities to your chat application. In addition to building a realtime chat room, you will also build user profile pages; implement a search engine for users and the sending of direct messages to users. Towards the end of this course, you will be able to build a fully featured realtime chat application using Angular and Firebase and deploy it to AWS so that the world can see it. We will help you to get started with Angular, understand how to apply it, and build some of the most robust, efficient and dynamic applications with Angular. After completing this course, you will likely find creative ways to apply it to your work.

1. Chapter 1 : Starting Your Angular Application
   • The Course Overview 00:02:17
   • Setting Up Your Environment 00:03:47
   • Setting Up the Project Directory 00:03:31
   • Installing Bootstrap 00:04:37
2. Chapter 2 : Building the Initial Pages
   • Creating the Login Form 00:06:50
   • Creating the Login View 00:07:39
   • Creating the Sign Up Page 00:05:13
   • Adding the Navbar Component 00:08:37
   • Generating Chatroom Page Components 00:10:31
   • Creating Chatroom Page Layout 00:10:40
   • Using a Template Driven Form for New Message Input 00:07:09
   • Finalize Styling of Chatroom Page 00:04:04
3. Chapter 3 : Creating Alert, Loading, and Authentication Services
   • Creating an Alert Notification 00:08:40
   • Implementing Alert Notifications on the Login Page 00:04:38
   • Creating an Application Loading Indicator 00:07:41
   • Setting Up the Authentication Service 00:05:27
   • Connecting the Login and Signup Pages to the Authentication Service 00:07:15
   • Protecting Routes with an Authentication Guard 00:06:02
4. Chapter 4 : Setting Up and Connecting to Firebase
   • Setting Up Firebase 00:09:00
   • Connect Sign Up Page to Firebase 00:07:55
   • Connect Login Page to Firebase 00:03:37
   • Toggling Navbar Links Based on Authentication Status 00:03:26
5. Chapter 5 : Building the Chatroom Functionality
   • Seeding Our Firestore Database with Chatroom Data 00:06:40
   • Fetching List of Chatrooms from Firestore 00:05:37
   • Routing to Select a Chatroom 00:05:31
   • Fetching Chatroom Title Based on Route 00:04:38
   • Rendering Chatroom Messages from Our Firestore 00:03:05
   • Posting New Chat Messages 00:08:27
6. Chapter 6 : Creating User Profiles
   • Seeding Our Firestore Database with User Data 00:02:22
   • Creating User Profile Pages 00:12:48
   • Implementing the Edit Profile Page Logic 00:12:02
   • Edit Profile Page HTML and SCSS 00:09:56
   • Creating Guard to Prevent Editing of Other Users’ Profiles 00:06:44
7. Chapter 7 : Clean Up, Security, and Deploying to Amazon AWS S3
   • Backend Security in Firebase’s Firestore 00:04:03
   • Last Minute Clean Up and Styling Modifications 00:06:49
   • Build and Deploy to Amazon AWS S3 00:08:11