In this tutorial, we will learn how to create a web application using Node.js as the backend server and Angular.js as the frontend framework.
Node.js is a server-side runtime environment built on Chrome’s V8 JavaScript engine. It allows you to run JavaScript code on the server, which makes it perfect for building web applications. Angular.js, on the other hand, is a popular frontend framework for building dynamic web applications.
To get started, make sure you have Node.js installed on your system. You can download it from the official website (https://nodejs.org). Once you have Node.js installed, you can create a new project folder and open it in your favorite code editor.
Step 1: Set up a Node.js web server
First, let’s create a simple Node.js web server that will serve our Angular.js application. Create a new file named server.js in the project folder and add the following code:
const http = require('http');
const fs = require('fs');
const path = require('path');
const port = process.env.PORT || 3000;
http.createServer((req, res) => {
const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
const contentType = getContentType(filePath);
fs.readFile(filePath, (err, content) => {
if (err) {
res.writeHead(404);
res.end('Page not found');
} else {
res.writeHead(200, { 'Content-Type': contentType });
res.end(content, 'utf-8');
}
});
}).listen(port, () => {
console.log(`Server running on port ${port}`);
});
function getContentType(filePath) {
const extname = path.extname(filePath);
switch (extname) {
case '.html':
return 'text/html';
case '.css':
return 'text/css';
case '.js':
return 'text/javascript';
default:
return 'text/plain';
}
}This code sets up a basic Node.js web server that serves static files from the project folder. It listens on port 3000 by default, but you can change it by setting the PORT environment variable.
Step 2: Create an Angular.js application
Next, let’s create a simple Angular.js application that we will serve using the Node.js web server. Create a new folder named public in the project folder and add the following files to it:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular.js Node.js Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1>{{ message }}</h1>
</body>
</html>app.js:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.message = 'Hello, Angular.js!';
});Step 3: Start the Node.js web server
Now that we have our Node.js web server and Angular.js application set up, we can start the server by running the following command in the terminal:
node server.jsThis will start the server and output Server running on port 3000 to the console. You can then open your browser and navigate to http://localhost:3000 to see your Angular.js application in action.
That’s it! You have successfully created a web application using Node.js as the backend server and Angular.js as the frontend framework. This tutorial covers the basics of setting up a simple web server and serving static files, but you can expand on this project by adding more features and functionality to both the backend and frontend parts.
