splannes_routerjs
v1.0.5
Published
this is router for js developers ,its open source .so any one can develop through it
Downloads
31
Maintainers
silivestirReadme
# Splannes_routerjs
`Splannes_routerjs` is a JavaScript library that simplifies server-side routing with Express.js and enhances client-side content loading.
## Features
- **Server-side Routing:** Define routes using Express.js to serve HTML files based on specified paths.
- **Client-side Content Loading:** Enables seamless content loading on the client-side without page reloads.
## Installation
Install `Splannes_routerjs` via npm:
```bash
npm install splannes_routerjsUsage
Server-side Routing Example
const express = require("express");
const app = express();
const Router = require("splannes_routerjs");
const router = new Router();
const paths = [
'/',
'/about',
'/contact'
];
router.loadServer(paths, 'public');
app.listen(3000, () => {
console.log('Server is running on port 3000');
});Client-side Content Loading Example
import Router from "splannes_routerjs";
const router = new Router();
router.loadClient('.nav-link', '.content');HTML Example
Assume you have the following basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<div class="content">
<!-- Content will be dynamically loaded here -->
</div>
<!-- Include splannes_router.js -->
<script src="/path/to/splannes_router.js"></script>
</body>
</html>API Reference
loadServer(paths, directory)
- paths: An array of paths to define server routes.
- directory: (Optional) Directory where HTML files are stored.
Description: loadServer sets up server-side routing using Express.js. It listens for specified paths and serves corresponding HTML files from the provided directory.
loadClient(classToListenClick, classToLoadContent)
- classToListenClick: CSS class of elements to listen for clicks (default: '.nav-link').
- classToLoadContent: CSS class of the content area where HTML will be loaded (default: '.content').
Description: loadClient enables client-side navigation and content loading. It listens for clicks on elements with the specified class (classToListenClick), fetches corresponding HTML content from the server, and updates the content area specified by classToLoadContent.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Contact
- Author: Silvestir Assey
- Email: [email protected]