I'm trying to implement a basic node-express angular app which includes an ng-include directive.
This is the structure of my app:
App:
server.js
package.json
public:
js
css
index.html
partials:
header.html
partial-about.html
partial-homt.html
The content of my server.js is the following:
var express = require("express");
var app = express();
var port = process.env.PORT || 8080;
app.configure(function () {
app.use(express.static(__dirname + "/public"));
app.use(express.logger("dev"));
});
app.listen(port);
console.log("App listening on port: " + port);
This is the content of my index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS UIRouter demo</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
</head>
<body ng-app="MyApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
DD test Angular-UI Router
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div ui-view></div>
</body>
</html>
However when I try to simplify index.html to this:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS UIRouter demo</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
</head>
<body ng-app="MyApp">
<div ng-include="'./partials/header.html'" ></div>
<div ui-view></div>
</body>
</html>
With header.html obviously including:
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
DD test Angular-UI Router
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</nav>
It doesn't work, any ideas?
In order for Angular to take over (and on order for the directives to become effective), you need to initialize the module:
<head>
...
<script type="text/javascript">
angular.module('MyApp', ['ui.router']);
</script>
</head>
Related
i want to encorporate my head and my body on handlebars, but i dont know how,
i will give an example on how im using it '''
<link rel="stylesheet" href="/css/index.css">
<h1> test</h1>
'''
the handlebars'''
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/nome.css">
<title>Documen</title>
</head>
<body>
{{{body}}}
</body>
</html>
'''
with this code im passing that every element go to this {{{body}}} right?
and i want to pass a head too, how do i do that?
really sorry if the question is confuse, i really dont know how to explain better
Firstly You need install npm install express express-handlebars.
Here you have folder and file project structure:
app.js
const express = require("express");
const exphbs = require("express-handlebars");
const app = express();
const PORT = process.env.PORT || 3000;
// view engine setup
app.engine(
"hbs",
exphbs.engine({
defaultLayout: "main",
extname: ".hbs",
})
);
app.set("view engine", "hbs");
app.get("/", (req, res) => {
res.render("home");
});
app.get("/about", (req, res) => {
res.render("about");
});
app.listen(PORT, () => {
console.log(`Node Server running on port: http://localhost:${PORT}`);
});
main.hbs
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
{{>header}}
<div class="container d-flex justify-content-center align-items-center flex-column" style="height: 800px;">
{{{body}}}
{{>mainContent}}
</div>
{{>footer}}
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
header.hbs
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">about</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
mainContent.hbs
<h2>Hello World from Handlebars</h2>
<h3>Express</h3>
<h4>Bootstrap 5</h4>
footer.hbs
<footer>
<p class="text-center text-muted">© Copyright 2021 The Awesome Stuff</p>
</footer>
home.hbs
<h1>Home Page</h1>
about.hbs
<h1>About Page</h1>
Output:
"express": "^4.17.1","express-handlebars": "^6.0.2"
i have this node server with express which directs data to different files like .ejs files and it worked before but I dont know what I did and so that it doesnt work, it marks every ejs's "<" in red.
im using VS CODE.
var app = express();
app.set('view engine', 'ejs');
app.get('/', function(req, res){
res.send("Hello wassup");
});
app.get('/homepage/:name', function(req,res){
res.render('home', {fullname : req.params.name});
});
app.get('/profile/:name', function(req, res){
var data = {Dummytext: "hey yo wassup and all that yea imma be right here tho",
hobbies : ['baskeall','computing','drawing', 'Learning', 'Driving'] };
res.render('profile', {fullname: req.params.name, data:data});
});
app.listen(4000);
and i have for example this ejs file that doesnt work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bla</title>
<link rel="stylesheet" type="text/css" href="partials/nav.css">
</head>
<body>
<% include partials/nav.ejs %>
<div class="user-info">
<div class="user-about">
<div class="user-name"><span><%= fullname %></span></div>
<div class="user-info_">
<div class="userimg">
<img src="/YDSign.png" alt="User profile" draggable="false" />
</div>
<div class="user-speech"><p><%= data.Dummytext%></p></div>
</div>
</div>
<div class="user-button">
<button type="button" class="friendAdd">Add Friend</button>
<button type="button" class="friendBell">Bell</button>
</div>
<div class="user-hobbies">
<div class="hobbies-list">
<h1>Hobbies</h1>
<div class="Upscroll"><img src="/iconList/ArrowUp.png" draggable="false"/></div>
<ul>
<% data.hobbies.forEach(function(item){ %>
<li><a><%= item %></a><img src="iconList/Hobbies.png" class="ident" /></li>
<% }); %>
</ul>
<div class="Downscroll"><img src="/iconList/ArrowDown.png" draggable="false" /></div>
</div>
</div>
</div>
Everything is fine.
You just should install plugin EJS language support in VSCode.
Just click CTRL+SHIFT+X and then write ejs in the search bar after that install the first one.
That works for me.
I have a Bootstrap 4 navbar here in a project of mine. There are a couple of links. Clicking them all leads to their corresponding page. The hover effects work as well. The only problem is that The "Home" tab stays active and the other tabs do not become active when clicked and taken to the corresponding page.
Code:
bsnavbar.handlebars(partial)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/scry">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/scry/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="scry/report">Report an issue</a>
</li>
</ul>
</div>
</nav>
head.handlebars(partial)
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
main.handlebars(layout)
<!DOCTYPE html>
<html lang="en">
<head>
{{>head}}
<title>{{title}}</title>
</head>
<body>
<div class="container">
{{>bsnavbar}}
<hr>
</div>
<div class="container">
{{{body}}}
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
router.js (incase it matters)
const express = require("express");
const router = express.Router();
router.get("/", function(req, res){
res.status(200);
res.header("Content-Type", "text/html");
res.render("index");
});
router.get("/about", function(req, res){
res.status(200);
res.header("Content-Type", "text/html");
res.render("about")
});
router.get("/report", function(req, res){
res.status(200);
res.header("Content-Type", "text/html");
res.render("report");
});
router.use(function(req, res){
res.status(404);
res.header("Content-Type", "text/html");
res.render("404");
});
module.exports = router;
I am using express with hoganjs templating instead of jade.
When I try to access one of my routes, it wont work though...
In app.js, I have the following (relevant to the route):
var awesome = require('./routes/awesome.js');
app.use('/awesome', awesome);
In the routes/awesome.js file, I have the following:
var express = require('express');
var router = express.Router();
/* GET awesome page. */
router.get('/awesome', function(req, res, next) {
res.render('awesome', { title: "awesome", message: "awesome"});
});
module.exports = router;
And lastly, here is my awesome template (located in ./views/awesome.hjs).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<meta name="Author" content="{{author}}"/>
<link rel="shortcut icon" href="" />
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron">
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}, here is your message: {{message}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
I have basically the same code for the index route so why wont this one work too?
In awesome.js change the router path location to /
router.get('/', function(req, res, next) {
res.render('awesome', { title: "awesome", message: "awesome"});
});
Now localhost:3000/awesome should be available.
app.use('/awesome', ...) matches all the routes starting with awesome. Paths specified in router.get('/awesome', ...) acts as sub-paths. The path URL will be localhost:3000/awesome/awesome.
My slider wont come up on first time navigation of the page. However when I hard refresh the page then it comes up and also if I replace the <div ng-view></div> code with the front.html page content then also the slider starts working. Let me know what I am doing wrong in angular as I believe it is something basic that I am missing.
Following is my layout code -
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>WEBSITE</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.flexslider.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="controllers/mainController.js"></script>
<script>
jQuery(document).ready(function($) {
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide"
});
});
});
</script>
</head>
<body ng-controller="mainController">
<header ng-include="'includes/header.html'"></header>
<nav ng-include="'includes/navmenu.html'"></nav>
<div ng-view></div>
<footer ng-include="'includes/footer.html'"></footer>
</body>
</html>
Following is my main controller code -
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/pages/front.html',
controller: 'frontCtrl'
})
});
In front.html I have slider code -
<div class="flexslider">
<ul class="slides">
<li>
<img src="assets/images/banner1.jpg">
</li>
<li>
<img src="assets/images/banner2.jpg">
</li>
<li>
<img src="assets/images/banner3.jpg">
</li>
<li>
<img src="assets/images/banner4.jpg">
</li>
</ul>
</div>
EDIT -
If I also write this code in the Firebug console then also slider starts working but not on page load -
jQuery('.flexslider').flexslider();
The event handler attached with jQuery(window).load will run when the page is fully loaded. However, ng-view hasn't loaded your view yet, which means <div class="flexslider"> doesn't exist.
Move the initialization into a directive:
myApp.directive('flexslider', function () {
return {
link: function (scope, element, attrs) {
element.flexslider({
animation: "slide"
});
}
}
});
And use like this:
<div class="flexslider" flexslider>
Demo: http://plnkr.co/edit/aVC9fnRhMkKw3xfpm4No?p=preview