Now that we have the basic front-end for our Flapper News coded up with Angular, we're going to start work on our backend. Because Angular is able to handle the templating and rendering, our backend server will mainly serve as a communication layer with our database. Over the next few sections, we are going to focus on modeling our data needs and creating a REST API that our Angular app can use to interact with this data.
If you haven't already done so, make sure you have
installed on your system. As a quick reminder, this tutorial assumes Node
v7.2.0 and MongoDB v3.4.0.
Creating A New Project
npm install -g express-generator
express --ejs flapper-news cd flapper-news
This will create a new folder called flapper-news and populate it with various files and folders.
We are passing the
--ejs flag because we'd like our server to use
standard HTML in its templates as opposed jade. Theoretically we are free to
use Jade if we'd like to but the front-end is already written in plain HTML.
Our first order of business is to add the relevant npm modules we're going to need. When starting a new project, a generator will include a list of packages that are required by default.
This will automatically download any packages specified in the
file and store them in the
Next, we are going to install Mongoose, which is a library that provides schemas and models on top of MongoDB.
npm install --save mongoose
--save flag passed to npm install instructs the program to also save the
package to the
packages.json file. This allows you (or your teammates) to
automatically install missing packages with the
npm install command.
If you're using any version control software such as git, now is a good time to make your initial commit.
The Anatomy of Node Project
Right now the root directory of our Node project should look something like this:
app.js bin/ node_modules/ package.json public/ routes/ views/
Let's go step by step and explain what each folder/file is:
app.js- This file is the launching point for our app. We use it to import all other server files including modules, configure routes, open database connections, and just about anything else we can think of.
bin/- This directory is used to contain useful executable scripts. By default it contains one called
www. A quick peak inside reveals that this script actually includes
app.jsand when invoked, starts our Node.js server.
node_modules- This directory is home to all external modules used in the project. As mentioned earlier, these modules are usually installed using
npm install. You will most likely not have to touch anything here.
package.json- This file defines a JSON object that contains various properties of our project including things such as name and version number. It can also defines what versions of Node are required and what modules our project depends on. A list of possible options can be found in npm's documentation.
routes/- This directory houses our Node controllers and is usually where most of the backend code will be stored.
views/- As the name says, we will put our views here. Because we specified the
--ejsflag when initializing our project, views will have the
.ejsextension as opposed to the '.jade' extension Jade views use. Although views are ultimately HTML, they are slightly different than any HTML file we might specify in the
public/directory. Views are capable of being rendered directly by Node using the
render()function and can contain logic that allows the server to dynamically change the content. Because we are using Angular to create a dynamic experience, we won't be using this feature.
In addition to the above files structure, we are going to add one more folder.
This folder will contain our Mongoose schema definitions.
Importing Our Angular Project
The final step before we begin building out the backend is to import our
Angular portion into our Node.js project. First move the
index.html file to
views/ directory. Because we're using the ejs engine, Node is looking
for files with the
.ejs extension so we're going to have to rename our
index.ejs, replacing the existing one.
Next, move the Angular
app.js file to the
avoid confusion with Node's
app.js, also rename the Angular file to
Finally let's update the
<script> tag in our
index.ejs file to reflect
Now we can start our application by running
If we point our browser to http://localhost:3000 we should be greeted with our Angular application.
Check your work
You can view the completed & working code for this tutorial here:
Now our AngularJS application is being served by our node server. Up next, we'll go over how to configure Mongoose and persist data to MongoDB.