** Please note: this is not a 'beginner' course. You should already have some basic knowledge of both Node.js and AngularJS 1.x.
In this course, you will learn to build a full stack web application using Node.js, AngularJS, Express.js and MongoDB. We will start with a sophisticated authorization template and work from there.
This is a hands-on project based course. The name of our app will be Best Dressed and will show off many interesting features utilized in real-world web applications.
By utilizing popular NPM modules and angular components we will build out our application to include the following functionality: upload capability, web scraping, infinite scrolling, single look detail pages, an admin area, a comment section, CRUD capabilities, and more.
What You Will Learn
Section overview. This includes installing MongoDB, how to use NPM and bower, and an overview of our starter files.
How to install mongoDB. My system is Windows 8.1 and will cover specifics for this system. We'll also see how to start 'mongod' and access the shell.
We'll be using NPM and Bower as our package mangement in this course. NPM will handle our server side dependencies and bower will handle our client side dependencies.
Learn how to install dependencies using 'npm install' and 'bower install'.
We'll introduce the Daftmonk Angular full stack generator and what parts we're using in our application. And then we discuss the dependencies that will be included in this project.
An explanation of the app.js file and contents of the config folder.
An explanation of the routes.js file, auth folder and api folder.
In this video we'll cover how the code works in the angular part of our app.
We'll look how to start the app using node and nodemon. Then we will run our application for the first time and create a new account.
Edit our User model to include a String option to display a gravatar image.
Include node-gravatar module and add this to our create user method. Replace user name
with gravatar image in right navbar menu area.
In this section we'll be building our scraping functionality. The app we're building allows users to add Looks with an image, title and description. They'll be able to do so either by adding a Link from Pinterest or by Uploading an image from a local file.
Pinterest now disables the viewing of pins if your not logged in. This section is still valuable because you can easily add in a different site. A new video will be added so we can scrape from Imgur instead.
In this lecture, we'll create our Look model. Our Look is going to define the item that users will be adding to our site.
Create our image scraping API files and folders.
In this lecture we'll build our Pinterest scraper. We'll be using the Request and Cheerio node modules.
In this lecture, we add frontend files to to create an input field for the user to submit a Pinterest URL. We'll be using Angular Strap and Angular Motion.
We'll add the $watch listener function to check on changes being made to our view. Then pass the URL to our server controller to perform the scraping operation.
Then we'll display the scraped data within our modal.
Pinterest isn't working anymore, but we can easily add a new file to scrape a different website. So lets add imgur.com.
Add backend logic to download and save a scraped Pinterest image to our Look model.
Create the randomizer() and downloadURI() methods.
Create the angular function to save and POST a new Look.
Create an apiFactory folder that will contain 2 factories. We'll use these to communicate with our API endpoints and remove $http from our controller
Add a panel to our main.html to display Looks as they are added. Include alerts to show success and fail messages.
Add a new route that will display all Looks added on the main page.
Add CSS and HTML files. Take a first look at ng-file-upload and Multer. Use NPM to install multer version 0.1.8.
Create a new route for uploading files. Include Multer configuration in express.js file. Add a new controller method for handling file uploads.
Create frontend upload functionality. Create a new method called fileUpload in main.Ctrl.js for uploading files. Test to make sure uploading is working.
Set up our routing for use with future pages and API calls.
Show off all the looks a logged in user has added. Create functionality to edit and delete the Look.
Add the moment package to show a timestamp when Looks have been added. We'll also use this with our Comments area.
Add a new section in our app to display individual looks.
Display a comment area. Users can post a comment which will display their name, gravatar and timestamp.
Add the ability to upvote looks. Also, add a counter that increments views every time one of our Looks is clicked.
A look back at what we've covered so far. And a look ahead to what needs to be done.
Add transitional animations. Edit the CSS files to add styling for our ui-view element.
Incorporate infinite scrolling into our app. Every time the user scrolls down, 3 new items will get loaded into the page.
Start creating our admin area.
Finish creating our admin area by editing our admin.Ctrl.js file.
Finishing up by creating our user profile area.