In this tutorial, we will be discussing how to use Express Handlebars and Angular JS in a NodeJS application. Express Handlebars is a templating engine that allows you to create dynamic HTML pages by combining static HTML with JavaScript code. Angular JS is a front-end framework that allows you to create dynamic web applications by extending HTML attributes with JavaScript code.
Step 1: Setting up your NodeJS environment
First, you need to make sure you have NodeJS installed on your machine. You can download and install NodeJS from the official website (https://nodejs.org/). Once you have NodeJS installed, create a new directory for your project and navigate to it in your terminal.
Step 2: Installing Express and Express Handlebars
To start your NodeJS project, you will need to install Express, a web application framework for NodeJS, and Express Handlebars, the templating engine we will be using. You can install both of these modules using npm by running the following commands in your terminal:
npm install express --save
npm install express-handlebars --saveStep 3: Creating a basic Express server
Now that you have Express installed, you can create a basic Express server in a file called app.js. In this file, you will import Express and set up your server to listen on a specified port. Here is an example of how you can create your server:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});To run your server, you can use the node command followed by the name of your file (app.js in this case).
Step 4: Setting up Express Handlebars
To use Express Handlebars in your project, you will need to configure it as the templating engine for Express. You can do this by setting the view engine property of your Express app to 'hbs' and specifying the directory where your views will be stored. Here is an example of how you can configure Express Handlebars in your project:
const exphbs = require('express-handlebars');
app.engine('hbs', exphbs());
app.set('view engine', 'hbs');
// Set the directory where your views will be stored
app.set('views', path.join(__dirname, 'views'));Step 5: Creating a basic view with Express Handlebars
Now that you have set up Express Handlebars, you can create a basic view in the views directory of your project. Create a new file called index.hbs and add some HTML code with a variable expression, like so:
<!DOCTYPE html>
<html>
<head>
<title>Express Handlebars Example</title>
</head>
<body>
<h1>Hello, {{name}}!</h1>
</body>
</html>Step 6: Rendering views with Express Handlebars
In your Express app, you can render views using Express Handlebars by passing data to the res.render method. You can pass an object with key-value pairs that will be available in your view. Here is an example of how you can render the index.hbs view with a variable name:
app.get('/', (req, res) => {
res.render('index', { name: 'John' });
});When you visit http://localhost:3000 in your browser, you should see the text "Hello, John!" displayed on the page.
Step 7: Adding Angular JS to your project
To use Angular JS in your project, you will need to include the Angular JS script in your HTML file. You can do this by adding the following script tag to your index.hbs file:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>Step 8: Creating a basic Angular JS controller
In your index.hbs file, you can create a new Angular JS controller by adding a script tag with some JavaScript code that defines the controller. Here is an example of how you can create a basic controller that displays a message:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = 'Hello from Angular JS!';
});
</script>Step 9: Using Angular JS in your view
Now that you have set up an Angular JS controller, you can use Angular JS directives in your HTML to interact with the data in your controller. For example, you can display the message from your controller using the ng-app and ng-controller directives. Here is an example of how you can display the message in your view:
<!DOCTYPE html>
<html>
<head>
<title>Express Handlebars Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1>{{ message }}</h1>
</body>
</html>When you visit http://localhost:3000 in your browser, you should see the text "Hello from Angular JS!" displayed on the page.
Congratulations! You have now successfully set up a NodeJS application using Express Handlebars and Angular JS. You can further expand on this project by adding more routes, views, and controllers to create a dynamic web application.
