Angular 2 End-to-end

Angular 2 is one of the most popular frameworks to build Web apps. This course will teach you to build a complete Angular 2 app with authentication, a blog, and a store as features.
Course info
Rating
(192)
Level
Beginner
Updated
Apr 17, 2017
Duration
2h 40m
Table of contents
Course Overview
Introduction
Setting up the Project
Setting up Authentication
Setting up Blog System
Setting up the Shopping Cart
Finishing the App
Description
Course info
Rating
(192)
Level
Beginner
Updated
Apr 17, 2017
Duration
2h 40m
Description

Building a complete Angular 2 app requires an understanding of how the components will fit together. In this course, Angular 2 End-to-end, you'll learn how to build a complete app from end to end. First, you'll start by setting up the app to use Webpack. Next, you'll discover how to configure an authentication system. Then, you'll explore how to create a blog system. Finally, you'll learn how to create a store and shopping cart. By the end of this course, you'll know how to build a complete Angular 2 app from start to finish.

About the author
About the author

After over 16 years in IT, Reggie finally decided to follow a long-term dream of learning to code. The path Reggie chose led him to pick up JavaScript, and building Web and mobile apps.

More from the author
React Native Fundamentals
Intermediate
2h 38m
Jun 18, 2018
Ionic End to End
Beginner
3h 8m
Nov 6, 2017
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, everyone. My name is Reggie Dawson and welcome to my course, Angular 2 End-to-End. I am a freelance developer who specializes in JavaScript. Angular 2 is a popular framework built by Google. It allows developers to build complex apps with minimal code. In this course we are going to build a complete app from end to end. We will start by scaffolding the app and finish with a project ready for deployment. Some of the major topics that we will cover include: Setting up the app to use Webpack, configuring an authentication system, creating a blog system, and creating a store and a shopping cart. By the end of this course you'll know how to build a complete Angular 2 app from start to finish. Before beginning this course you should be familiar with JavaScript. I hope you'll join me on this journey to learn Angular 2 with the Angular 2 End-to-End course at Pluralsight.

Setting up the Project
Hello everyone. I am Reggie Dawson. Welcome back to Pluralsight's Angular 2 End-to-End course. When setting up an Angular 2 app, getting off on the right foot is essential. There are many moving parts of the project that you have to consider. This module will get us started in building our app for the GigaByte Gaming Company. First we will set up our project and learn how Webpack and TypeScript work with our app. Then we will move on and build out our initial components. These initial components will be very basic, but they should help you get comfortable with the syntax of Angular 2. Then we will set up routing that will control the navigation of our app. After this module is finished, you will only have a very basic app, but a great start to the finished product that we will have at the end of the course.

Setting up Authentication
Hello, everyone. I am Reggie Dawson. Welcome back to the Angular 2 End-to-End course. In the last module we got up to speed with the syntax and structure of an Angular 2 app. I know it was a lot to digest, but now you should have a solid foundation to build on. The things you learned in the last module will be used throughout this course. In this module we will build out our authentication system. The app we are building will have backend services that authorized users can access. We don't want to just allow anyone access so we will need to create some sort of authentication system to allow users to log in. Now under normal circumstances we would have to build our authentication system from scratch. Although this isn't necessarily difficult, we will instead leverage a service called Firebase. Now Firebase was originally a separate entity, but has since been acquired by Google. We will use Firebase to host the backend data of our app, but Firebase also comes with its own authentication system built in. This turn-key solution allows Google, Twitter, and Facebook in addition to standard username and password logins. Now once we have Firebase installed into our app, we will then set up a feature area. The admin area will exist as its own subsection of the app. As a result, we are going to configure the admin area with its own routes. Also in this module we will configure our first service, which will handle the authentication using Firebase.

Setting up Blog System
Hello, everyone. I am Reggie Dawson. Welcome back to the Angular 2 End-to-End course. Now that we finally have our authentication set up, we can now add the blog system that will provide the content for our site. Although we have leveraged Firebase for authentication. This is the real reason we chose Firebase. In this module we will build another service using Firebase, but this time it will be for managing blog posts. The beauty of this is that we will not have to write a lot of code to configure the database. It will be as simple as using the web base API to interface with Firebase. After that we will configure our admin area to allow us to manage blog posts. Now with the authentication system we can just create accounts and nothing more. If we want to delete a user at this point we will have to go into the Firebase console. The blog will be different in that we will be able to create, edit, and delete blog posts. Once we have the blog set up, we will then need to configure the customer-facing portion of our app to host the blog. We will add a listing of the individual posts to the start page. Then we will create a component that will be used when we select an individual blog post. Once this module is finished you will have a working content management system.

Setting up the Shopping Cart
Hello, everyone. I am Reggie Dawson. Welcome back to the Angular 2 End-to-End course. The next part we will add to our app is the shopping cart system. In our app we will have a shopping cart that will allow users to purchase our products from our site. We will stop short of processing payments as that is outside the scope of this course. You will, however, have a sum of the cart after we are done so it will be no problem using the payment processor of your choice. In order to save a lot of duplicate work, we will base the cart off the blog system. The products will work a lot like the blog and the only difference will be the information that we save with the products. After viewing this module you should understand not only how to build a shopping cart, but how to repurpose existing code for other uses.

Finishing the App
Hello, everyone. Welcome back to the Angular End-to-End course. We have come a long way with this project. We have added authentication, a blog, and a shopping cart, all built from scratch. You should now be comfortable with the syntax of Angular 2. Now that our app is built, it's time for us to finish it up. First we will talk about testing. Now although everything is working, some developers like to use testing frameworks. The Angular team understands this and includes support to allow you to use a few different testing tools with your app. After that we will build our app for deployment. So far Webpack has just compiled our project on the fly. We haven't actually generated the files that we will use to deploy the project. Now that we are done, we will compile our project and generate the necessary files. We will also talk about what it will take to host this app on the web. You have learned a lot and built a full app. Let's finish it up and learn how to build our app for deployment.