Building AngularJS and Node.js Apps with the MEAN Stack

Learn to build an end to end application with Angular, Node, Express and Mongo
Course info
Rating
(881)
Level
Intermediate
Updated
Jan 31, 2014
Duration
4h 4m
Table of contents
Course Introduction
Creating a Walking Skeleton
Deploying to Heroku
Designing the UI
Authentication
Security and Authorization
Client-side Testing
Implementing Signup - Creating Entities
Use Profile - Updating Data
Course List - Sorting, Filtering and Caching
Course Details - Selecting and Caching Single Entities
Description
Course info
Rating
(881)
Level
Intermediate
Updated
Jan 31, 2014
Duration
4h 4m
Description

The MEAN stack is becoming more and more popular. Angular has become the hottest new MVC framework, and using it with Node and Express means a high level of harmony between the client and server. Throw MongoDB on for data storage, and you have JavaScript from front to back. These applications are quick to put together, and represent the modern state of web application development. This course will help you get a full application up and running in no time, and introduce you to all the core concepts you need to build applications utilizing these technologies.

About the author
About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

More from the author
Unit Testing in Angular
Beginner
3h 20m
22 May 2018
Angular: The Big Picture
Beginner
1h 7m
13 Dec 2017
More courses by Joe Eames
Section Introduction Transcripts
Section Introduction Transcripts

Deploying to Heroku
Hello and welcome to the module on deploying your MEAN Stack applications to Heroku. In this module we are going to learn all about deploying our application to Heroku. We'll start by preparing our application for deployment by changing a few files and creating some new ones. Then we'll look at how to set up a MongoDB instance that will work when our application is running in the Cloud on Heroku. After that is done we'll actually deploy our application by pushing it to Heroku with Git. Once our application is up and running, we'll discuss how to troubleshoot application issues with Heroku. There will be two sections here, one on some general troubleshooting tips and one section devoted to troubleshooting and managing your SSH keys. As before, I'll be doing all of this on a Windows box, but following along in a Bash shell on a Linux or OSX box will be pretty straightforward and I'll make note of most of the differences between using these different operating systems. Heroku is a popular Cloud platform as a service. It supports many programming languages. Of course, for our needs we only care about Node. js. Heroku is extremely popular for Node applications since you can get some basic hosting for free and it will scale as you do. In addition, it supports many add-ons that can provide a lot of value to your application. In order to use Heroku for deployments, we'll need to do two things. First, create an account with Heroku. If you simply go to Heroku. com you will be prompted here to sign up for free. Second, you need to download and install the Heroku tool belt. That is available as a free download at toolbelt. heroku. com. Once you have downloaded and installed the toolbelt, be sure to close down and reopen your command shell and the Heroku command line interface will now be available for you to use. Now let's move on and get our application deployed to Heroku.

Designing the UI
Hello, I'm Joe Eames. In this module we're going to design our UI. This may not seem like the most critical piece in a course on writing applications with the MEAN Stack, but there will be plenty to learn about placing HTML in the various files in use and organizing our Angular code. I will be showing the CSS changes that I need to make to get the design that I want. If you are very comfortable with the CSS, you may want to skip ahead a little during these parts. Now, let's look at the agenda. In this module, we will start by creating a common header and footer for our site. This will be just a little bit of HTML and CSS work. Then we'll design the content on the main page, giving us a more typical look for the main page of our site. And, finally, we'll hook up some sample data on the main page. This will give us a good start and template for the look and feel of the rest of our site.

Authentication
Hello. I'm Joe Eames. In this module and the next one we are going to implement authentication and authorization for our MEAN application. Let's look at the agenda for the next two modules. Authentication is the means we use to make sure that a user is who they say they are, whereas, authorization is the process of restricting data and functionality to only those users who are allowed to access them. We'll begin our foray into the world of authentication and authorization by implementing login using Passport. Passport is a very common Node module for implementing authentication. Passport uses various different strategies for authentication and these involve anything from using a local username and password to using your Facebook account to log in. We will be implementing the local strategy, which uses a local username and password. Then, we'll make sure that our passwords are secure by encrypting them using a hashing algorithm. And finally, we'll implement authorization. Passport won't give us much help here, but implementing authorization on top of Passport is pretty straightforward. By the time we're done with this module, we'll be comfortable with typical authentication and authorization in a Node application.

Security and Authorization
Hello, I'm Joe Eames. In this module, we are going to continue what we started in the last module by implementing some more security measures for our authentication and then implementing an authorization scheme.

Client-side Testing
Hello, I'm Joe Eames. Welcome to the module on Clientside Testing. This module will be fairly brief and not cover the topic of clientside testing in much depth at all. We'll simply set up Karma to run our clientside tests and write a couple trivial tests of our mvUser resource to demonstrate that our tests are working. We'll use the Mocha test runner, since that's fairly popular in the node world, and it can be used to test both your clientside and server-side code. We'll also use the Chai assertion library with Mocha. You should have definitely watched the module on testing Angular in the Angular Fundamentals course before trying this. That module will give you a much better foundation on testing your Angular code. Additionally, you should watch my course on testing clientside JavaScript. That course covers Karma, Sinon Mocha, and Chai in depth.

Implementing Signup - Creating Entities
Hello. I'm Joe Eames. In this module we are going to build our signup page. Signing up a new user is just the action of creating a new user, so we're going to implement our signup as a restful service. We'll make sure that this service can be called by a different client than our Angular client if needed and thereby provide a useful API for our application. To do that we'll implement the client code for the signup page, including the design and the call to the server, then we'll create the server-side code to create the user, but we're not finished yet. We'll also refactor our user logic into a model class and then we can implement server-side validation when users are created so that regardless of the client we will know that all users created are complete. It's important to understand that you can't trust any client-side validation or logic you create. Client-side JavaScript can be easily hacked or circumvented. All important validation logic must be on the server to make sure that your data doesn't get corrupted by malicious hands.

Use Profile - Updating Data
Hello. I'm Joe Eames. In this module we are going to create a profile page to let our users edit their name, username, and password. Now we are going to use an extremely streamlined implementation. The user experience is not really optimized and there are probably more features you would want to put into a production application, like making the user put in their password twice. Just keep in mind that we will illustrate the basics of updating information, but more comprehensive and detailed features are beyond the scope of this course. This module will be very straightforward. First, we'll put together the display for the profile page, then we'll write the client-side code, and finally, we'll write the server-side code. We'll make sure that only authorized users can make changes to data and we'll make sure that our code is organized for maintenance.

Course List - Sorting, Filtering and Caching
Hello, I'm Joe Eames. In this module, we're going to create a Course List Page. This page will display the list of courses available on our site with the date that the course was published. Since we anticipate having hundreds and even thousands of courses, we want this list to be filterable and sortable so we'll add those abilities to our list. We'll also want to be efficient with this data, so we'll look at doing some caching by hand to avoid fetching the same data multiple times, unnecessarily. Let's look at the Agenda. First, we'll implement the Course List page. This page will display the list of courses from our library. Once that is in place, we'll implement Filtering and Sorting so that users can easily find the course that they are interested in. After the page is implemented, we'll switch the main page to get its data from the server as well and then we'll implement caching so that we only have retrieve the data once, for any view, and no matter how many times a page is visited.

Course Details - Selecting and Caching Single Entities
Hello, I'm Joe Eames. In this module, we will create our Course Details page. This page will display information about a single course. The design won't be anything to write home about, but we'll do our best to at least keep the display neat and orderly. We only have a few pieces of information about courses to display, so the display will also be fairly small, but we'll also look at how to select these single entities and how to cache them effectively as well. Our Agenda will be straightforward. First, we'll implement the details page. We'll start with the display and the client side code and then we'll implement the server side code including selecting the data from the MongoDB database for the single course that we're looking at. We'll also make all the places on our site where we list courses, be a link that points to the details page for a course. Once that is in place, we'll figure out how to effectively cache the data and how that works in concert with caching the entire set of courses that we are already doing over on our Main page and Course list page.