MEAN app with Angular 4 (Part 1) Setting up a development environment

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.

install express js

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.

get 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.

angular 4 welcome page

Related Articles

Source Code

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s