Steps to Configure the Express

Install the required dependency for this approach. Use the below command to install the dependency:

npm install express

Project Structure:

Create the following files in the newly created folder, in these files we will have our all logic. Follow the below directory structure:

Example: This example illustrates enabling the HTML5 mode in Angular 1.x using Hashbang Mode.

Javascript

//public/app.js 
var app = angular.module('myApp', ['ngRoute']); 
  
app.config(['$routeProvider', function ($routeProvider) { 
  $routeProvider 
    .when('/', { 
      templateUrl: 'views/home.html', 
      controller: 'HomeController'
    }) 
    .when('/about', { 
      templateUrl: 'views/about.html', 
      controller: 'AboutController'
    }) 
    .otherwise({ redirectTo: '/' }); 
}]);

Javascript

//public/controllers.js 
app.controller('HomeController', ['$scope', function ($scope) { 
  $scope.message = 'Welcome to the Home Page!'; 
}]); 
  
app.controller('AboutController', ['$scope', function ($scope) { 
  $scope.message = 'This is the About Page.'; 
}]);

Javascript

//server.js 
const express = require('express'); 
const path = require('path'); 
const app = express(); 
app.use(express.static(path.join(__dirname, 'public'))); 
app.get('*', (req, res) => { 
  res.sendFile(path.join(__dirname, 'public', 'index.html')); 
}); 
const PORT = process.env.PORT || 8000; 
app.listen(PORT, () => { 
  console.log(`Server is running on port ${PORT}`); 
});

HTML

<!--public/index.html-->
<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <title>AngularJS Hashbang Mode</title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
            background-color: #f0f0f0; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            height: 100vh; 
        } 
  
        nav { 
            background-color: #333; 
            color: #fff; 
            padding: 10px; 
            text-align: center; 
            width: 100%; 
            position: fixed; 
            top: 0; 
        } 
  
        nav a { 
            color: #fff; 
            text-decoration: none; 
            margin: 0 10px; 
        } 
  
        .container { 
            width: 80%; 
            margin-top: 50px; 
            text-align: center; 
            padding: 20px; 
            background-color: #fff; 
            border-radius: 8px; 
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        } 
  
        .title { 
            color: #008000; 
            font-size: 36px; 
            margin-bottom: 10px; 
        } 
  
        .subtitle { 
            font-size: 24px; 
            color: #333; 
            margin-bottom: 20px; 
        } 
  
        .message-container { 
            background-color: #f5f5f5; 
            border: 1px solid #ddd; 
            padding: 20px; 
            border-radius: 4px; 
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        } 
  
        .message { 
            font-size: 20px; 
            color: #444; 
            line-height: 1.6; 
        } 
  
        .message-container .message { 
            opacity: 0; 
            animation: fadeIn 1s ease-in-out forwards; 
        } 
  
        @keyframes fadeIn { 
            from { 
                opacity: 0; 
                transform: translateY(10px); 
            } 
  
            to { 
                opacity: 1; 
                transform: translateY(0); 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <nav> 
        <a href="#!/">Home</a> | <a href="#!/about">About</a> 
    </nav> 
    <div ng-view class="container"></div> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> 
      </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"> 
      </script> 
    <script src="app.js"></script> 
    <script src="controllers.js"></script> 
</body> 
  
</html>

HTML

<!--public/views/home.html-->
<div> 
    <h1 class="title">w3wiki</h1> 
    <h3 class="subtitle"> 
          Enabling HTML5 mode in Angular 1.x using Hashbang Mode 
      </h3> 
    <div class="message-container"> 
        <p class="message">{{ message }}</p> 
    </div> 
</div>

HTML

<!--public/views/about.html-->
<div> 
    <h1 class="title">w3wiki</h1> 
    <h3 class="subtitle"> 
          Enabling HTML5 mode in Angular 1.x using Hashbang Mode 
      </h3> 
    <div class="message-container"> 
        <p class="message">{{ message }}</p> 
    </div> 
</div>

package.json: Below is the package.json file content for reference:

{
    "name": "angular1-html5-mode-example1",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "angular": "^1.8.3",
      "express": "^4.18.2",
      "http-server": "^14.1.1"
    }
 }

Run the application using the below command:

node server.js

Output:

How to Enable HTML 5 Mode in Angular 1.x ?

HTML5 mode in Angular1.x is the configuration that replaces the default hash-based URLs and provides more user-friendly URLs using the HTML5 History API. This feature mainly enhances our one-page application and also provides a better experience to the users. We need to configure our server with proper routes and URL paths. Then, we can inject the “$locationProvider” and invoke the ‘html5Mode(true)’ function. We will also explore one more approach or enable the HTML5 mode in Angular1.x.

Steps to Configure the Express

Project Structure:

Javascript

Javascript

Javascript

HTML

HTML

HTML

How to Enable HTML 5 Mode in Angular 1.x ?

Categories

Contact US

Steps to Configure the Express

Project Structure:

Javascript

Javascript

Javascript

HTML

HTML

HTML

How to Enable HTML 5 Mode in Angular 1.x ?

Similar Reads

Categories

Contact US