This article will help you to get started with Angular 4 and Node.js. After finishing this tutorial you will have the basic knowledge that you need to create your own Angular application. In this tutorial I will assume that you already have experience in programming, but haven’t tried the angular 4.
In this tutorial we will build a simple tour posting app where user can register/login on the site and post their tour. This tutorial will help you understand how to post and get data from the back-end and display it to front-end using angular.
Requirements
For this tutorial you will need node.js installed in your machine. You can get node.js in node.js website. I’ll be using visual studio code editor in this tutorial, so you need to have it installed in your machine. You can get visual studio code on this website.
Setting up the backend
To start the project you need to create a folder in your computer. We will place all our backend code on this folder, so let’s call it “backend” then open the folder using visual studio code.
Now we need to generate a node.js package json file. To do that open the integrated terminal by clicking view -> integrated terminal. Then in integrated terminal type
npm init
then leave all the default option. A package.json file should be added in your file explorer.
We also need to install express.js. In integrated terminal type
npm install express --save
We also want to support the Cross-Origin Resource Sharing (CORS) in our server, to do that we need to install a library called cors. To install cors execute this command in integrated terminal
npm install cors
you should now have these files in your file explorer.
Now let’s setup our server. Create server.js file, then copy paste this code.
var express = require('express')
var cors = require('cors')
var app = express()
var events = [
{title: 'My first tour', destination: 'Baguio'},
{title: 'My second tour', destination: 'Zambales'}
]
app.use(cors())
app.get('/events', (req, res) => {
res.send(events)
})
app.listen(3000)
In the code above, we load the express js using the require function. Then we create an object of express called app. After that we create a variable call events which is a list of objects. Then we add a route for events which can be access using get method that will return posts. Then we assign the port 3000 as port where express js will listen.
To see if everything is working. In integrated terminal type
node server.js
then in your web browser go to http://localhost:3000/events you should get the events.
Setting up the frontend
Open a command prompt and type
npm install -g @angular/cli
to install angular cli globally. After the installation, navigate to a folder where you want to put the new angular project using the command prompt. Then execute the command
ng new myApp
where the myApp is the name of your project.
Let’s test if your angular installation is working properly. Go to the myApp folder using the command prompt then execute the command
ng serve --open
If everything goes well, you should have the angular welcome page.
Related Articles
- MEAN app with Angular 4 (Part 2) Getting the data using Angular
- MEAN app with Angular 4 (Part 3) Displaying the data using Angular Material
- MEAN app with Angular 4 (Part 4) Angular Form and Routing
- MEAN app with Angular 4 (Part 5) Saving data to MongoDb
Source Code
