This tutorial is out of date and no longer maintained.
One of the most common stacks that accompany Angular as a web framework is the MEAN stack. MEAN simply stands for MongoDB, Express, Angular, and Node.js, and is a concept that came about a few years ago with the growing popularity of all those technologies, and the fact that you only needed to know one language, JavaScript, to get started.
To explain the different parts:
We’ve previously written about setting ap a mean single application page. Since then, we’ve seen Angular release a newer version, Angular 2, and with it the Angular CLI, that enables quick scaffolding of Angular 2 apps.
This article will focus on setting up a MEAN app with Angular 2, while still using the Angular CLI.
We’ll of course need the Angular CLI
You also need to know a little about Creating Angular apps with the Angular CLI, as well as Creating an Express app.
Next, we’ll create an angular app with the CLI. If you’d like to use yarn please check below after the command.
Note: If you have yarn installed, simply skip npm then run yarn later. Otherwise, the above command should be fine.
Both of the above approaches will scaffold an Angular 2 app and install all the dependencies. To serve the app, simply run
And open http://localhost:4200
in your browser.
Angular CLI comes with a command ng build
, which bundles your Angular app into a dist
folder, or a folder that you may specify in the angular-cli.json
file. This is what our Express app will point to.
Install express
and body-parser
as dependencies.
Or if using yarn
Then create a file server.js
and a folder server
in the root of our angular project. The server.js
file will have the server code, that will point to the server
folder, where the rest of the server implementation is.
The above code sets up a simple express app, with an /api
route and all other routes are directed towards the dist/index.html
page. This catch-all route, denoted with *
, MUST come last after all other API routes have been defined.
The /api
route points to a file ./server/routes/api.js
. Let’s create this file.
One last thing before we run this. Since the catch-all route is pointing to dist/index.html
, we need to do a build of the Angular app.
This creates the dist folder
with the Angular 2 app built files. Now we can serve the app with express.
Going to http://localhost:3000
should load the app, and http://localhost:3000/api
should show as below.
angular app (http://localhost:3000
)
express API (http://localhost:3000/api
)
Now that we have the API set up. Let’s quickly mock up some data for three route endpoints. We’ll call the jsonplaceholder mock API to respond with some data.
In a real MEAN app, however, this data should be retrieved from Mongo DB. To read more on this, you can go through connecting a node app to MongoDB.
First add axios for making HTTP requests.
Or, if using yarn
Then, update the api.js
file to have the following content.
If we now stop the server and run it again, node server.js
, we should see JSON data when we go to http://localhost:3000/api/posts
I’m using a json-viewer chrome plugin. You may see a not so pretty JSON response.
We’ll add an angular component, then add a route that displays this component’s template.
Add an Angular component with the Angular CLI
This adds a new folder in the src/app
directory, called posts
. If you’ve done a little getting started with Angular 2, the generated content of the component should be clear. We’ll edit them when the time comes.
The above command also imports the generated PostComponent
in the src/app/app.module.ts
file and adds it to the declarations
property of the @NgModule
decorator.
Next, we’ll add a posts route. There are a couple of recommended ways to add routes to your Angular 2 apps, and that is out of scope for this guide. We’ll use the simplest and most straightforward.
We are simply telling our router that whenever the root route /
is visited, redirect to /posts
. We then declare the /posts
route.
One final thing to complete our routing is to first make sure that we have a <base href="/">
in the src/index.html
head
tag. And then add a router-outlet
where the route should be rendered. We’ll add this in the src/app/app.component.html
We need to do a build and serve the app, we could do
Or just create an npm script within the package.json
.
Then simply run.
Going to http://localhost:3000
should redirect you to http://locahost:3000/posts
, based on the instructions we gave to our router.
.
Angular 2’s best practices recommend defining a provider or service to handle the HTTP calls. So, we’ll generate one with the Angular CLI.
This creates a posts.service.ts
in the src/app
directory. We then need to add it in the providers
’ section of our module declaration.
Then make the HTTP call within the service to our Express server.
Then import our service in the Post component.
And finally, we’ll just display the posts in the view.
This is just a Bootstrap 4 card, looping through our posts and binding the title
and the body
properties. I also added the Bootstrap CDN to the src/index.html
page in the head
tag.
Run the app.
Going to localhost:3000
should produce this.
There is some sort of server-client separation in the approach we took. Both the Angular app and the Express server can be built independently.
You can now just continuously use the Angular CLI to build out your Angular app while developing the Express server just as you would any Node.js Express App.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!