Build a simple email application and learn core AngularJS concepts. By the end of this tutorial, you’ll be able to see (fake) emails, search by subject line, and read/delete emails.
Prerequisites:
- Understand how to build a basic Javascript application with jQuery
- Know how to launch a basic HTTP server (e.g., python -m SimpleHTTPServer)
- Be able to clone a GitHub repo
We are going to create an email application using Angular JS. First, we’re going to build the front-end using AngularJS and HTML, at the end we’re going to add in the server portion.
We’re going to learn angular by diving right in and explaining concepts as we go as we have to. Since we’re not doing the server portion until the end, we will need to mock that data right in the code. I think this is not only a good way to learn, it’s a good way to go about building an application.
To start with, we need our boilerplate HTML. This HTML will include all the necessary libraries. We are going to use Bootstrap for our look and feel and of course Angular for our guts.
starts with we are going to focus on functionality related to managing emails, this means we are not going to address things like user sign in, at least not right now.
The first thing we are going to tackle is the email list. From this screen, we should be able to see who the email is from, what the subject of the email is, and when we received it.
First, we are going to write the HTML for this table, then we are going to use angular to generate it dynamically. Here is the HTML for the static version:
