I facing a problem that my Angularjs is not rendering or load in my Jade layout. Somehow the stylus is working perfectly with. I counldn't find out the reason why. I'm still the beginner in learing jade, stylus and angularjs
Below are my codes:
index.jade
!!! 5
html(ng-app='ng-app')
head
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js')
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js')
script(src='https://cdn.firebase.com/v0/firebase.js')
script(src='http://firebase.github.io/angularFire/angularFire.js')
script(type='text/javascript', src='angular.js')
link(rel='stylesheet', href='style.css')
body
.addressBook(ng-controller='addressBook')
h1 Address Book
table(width='710px', border='0', cellspacing='0', cellpadding='0')
tr.title(height='35px', align='left')
td(width='130') Name
td(width='180') Email
td(width='210') Address
td(width='80') Mobile
tr.details(ng-repeat='contact in contacts')
td {{contact.name}}
td {{contact.email}}
td(style='padding-bottom: 30px;') {{contact.address}}
td {{contact.mobile}}
angular.js
function addressBook($scope)
{
$scope.contacts =
[
{name:'Peter', email:'john_peter#asd.co', address:'No.123, Road 12/20, Street Army, 58200 KL, Malaysia', mobile:'601231231234' },
{name:'Lim', email:'Amy#asd.co', address:'54, 13/15, Happy Garden, 58200 KL, Malaysia', mobile:'60123473534' }
];
}
app.js
var jade = require('jade')
, express = require('express')
, http = require('http')
, app = express();
var stylus = require('stylus');
require('./angular.js');
app.configure(function(){
console.log('Configuring views....');
app.set('port', 1234);
app.set('views', './');
app.use(express.bodyParser());
app.use(express.static( __dirname + '/'));
app.set('view engine', 'jade');
});
app.get('/test', function(req,res){
res.render('index.jade');
});
server = http.createServer(app);
server.listen(app.get('port'), function(){
}).on('error', function(err) {
throw err;
});
thank you in advanced for everyone who helps
I suspect the issue you are having is that the path to your views that you have specified is wrong and you are serving them up statically.
For example, if you have your views in a sub-directory of the base directory, and you have set the base directory to be served up as static content, it will serve up the jade as static content.
What you should do is put your views in a different folder to the static content so that is a sibling not a child and this should work. If you want to post your directory structure I can have a look.
Related
Im building my first node.js app with express and pug as view/template eingine. A problem I am experiencing atm is the following:
Issue: Same CSS file loads on other routes & template.pugs but won't load on one specific route/template. Get a 404 error.
my server.js:
var express = require('express');
var path = require('path');
var app = express();
var bodyParser = require("body-parser");
app.set('views', './templates');
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, './public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
require('./router')(app);
var listener = app.listen(process.env.PORT, function() {
console.log('Server is live on PORT : ' + listener.address().port);
});
my router.js (css loads for "/" & "/events", not for /events/new"):
var controller = require ('./controller');
module.exports = function (app) {
//start
app.get('/', controller.index);
// All Events View
app.get('/events', controller.show_events);
app.get('/events/new', controller.new_event_form);
};
my controller.js (css loads for "index" & "show_events", not for "new_event_form" )
module.exports = {
index: index,
show_events: show_events,
new_event_form: new_event_form
};
function index (req, res) {
res.render('index');
}
function show_events(req, res) {
res.render('show_events');
};
function new_event_form(req, res) {
res.render('new_event_form');
};
Now comes the odd part. For this template "show_events.pug" it loads the css file. route: /events
doctype
html
head
title Database
link(rel='stylesheet', href='./css/main.css')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
body
div#wrapper
header
h1 Database: Events
menu
a(href='/')
h2 Back
a(href='/events/new')
h2 Create New Event
But for this template "new_event_form.pug" it won't load the css file. Route: /events/new
doctype
html
head
title Database
link(rel='stylesheet', href='./css/main.css')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
body
div#wrapper
header
h1 Event: New
menu
a(href='/events')
h2 Cancel
Css perfectly loads as well for the index "/" route.
Folder/file structure so far
controller.js
router.js
server.js
public
- - css
- - - - main.css
templates
- - index.pug
- - show_events.pug
- - new_event_form.pug
Kind find any mistake so far, don't get why it loads on the index route and the show_events route, but not on the new_event_form route.
Thanks for any hints or solution !
Update
when comparing the routes i noticed some differencies:
- for https://terminal.glitch.me/events the request adress for the css file is https://terminal.glitch.me/css/main.css
- for https://terminal.glitch.me/events/new the request adress for the css
file is https://terminal.glitch.me/events/css/main.css
So simple:
In the pug file for the events/new route the link ref should contain
2 dots before /css/main.css, not 1
So I changed this
link(rel='stylesheet', href='./css/main.css')
to this
link(rel='stylesheet', href='../css/main.css')
now it's working
It was just not clear for me how to use ../ this type of things for absolute paths ...
Using express and sockets to create a chat client. However I get a 404 when trying to connect to static files.
Server.js
var jade = require('jade');
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
io.on('connection', function() {
'use strict';
socket.on('setPseudo', function(data) {
socket.set('pseudo', data);
});
socket.on('message', function(message) {
socket.get('pseudo', function(error, name) {
var data = {
'message': message,
pseudo: name
};
socket.broadcast.emit('message', data);
console.log("user " + name + " send this : " + message);
});
});
});
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.set("view options", {
layout: false
});
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
'use strict';
res.render('home.jade');
});
server.listen(4000);
In order for my application to work I need to connect to a script.js file in my /public folder. However the server seem to be unable to find it.
Update with jade file:
doctype html
html
head
title le Chat
script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js')
script(src="/socket.io/socket.io.js")
script(src="public/script.js")
body
div.container
header
h1 le Chat Meow
input(type='text')#pseudoInput
button#pseudoSet Set Pseudo
div#chatEntries
div#chatControls
input(type='text')#messageInput
button#submit Send
and also the folder structure:
-public > script.js
-views > home.jade
-server.js
Change script(src="public/script.js") to script(src="script.js") because your public folder is the root of static files so you dont need to put it in the paths in the html files
Since somebody marked your other newest question about the console.readLine as a dublicate eventhough it obviously wasnt i'l answer to it here instead.
Apparently console.readLine does not work inside an IDE, eclipse for example.
You will have to run the program inside the actual console for that code to work.
A suggestion would be to use a buffered reader instead.
Is it possible to serve static content and views from the same directory?
I found a partial solution below:
//Enable Express static content serving:
app.use(express.static(__dirname + '/html')); //Static path is folder called html
//Also enable EJS template engine:
app.engine('.html', require('ejs').__express);
app.set('views', __dirname + '/html'); //Set views path to that same html folder
app.set('view engine', 'html'); //Instead of .ejs, look for .html extension
//Start server
app.listen(8000);
//Express routes:
app.get('/', function(req,res) {
res.render('index', { message: 'hello world'});
//this only serves static index.html :(
});
app.get('/home', function(req,res) {
res.render('index', { message: 'hello world'}); //<-- this serves EJS
//whoo-hoo! serves index.html with rendered EJS 'hello world' message
});
This is working perfectly, except for the first route '/' which does not render EJS. All other routes (/home, /about, etc) will conveniently serve the dynamic EJS along with static content. Is there anyway to trick that first '/' to work in the same way?
For Express 3.x try putting router before static:
app.use(app.router);
app.use(express.static(path.join(__dirname, 'html')));
For Express 4.x the router has been deprecated but the concept is the same as routes are like middleware so you should be able to call them before the static middleware.
As my username implies, I'm new to node.js. I'm trying to learn it. As part of this process, I'm working to setup a basic web site. This web site will show a couple of basic web pages and expose a single REST endpoint. The structure of my project is:
config.js
home.html
start.js
routes.js
server.js
resources
css
style.css
images
up.png
down.png
javascript
home.html.js
start.js has my main server code. That file gets executed via command line using 'node start.js'. Once started, my server begins listening on port 3000. The code in start.js looks like this:
var express = require('express');
var app = express();
var UserProfileHandler = require('./app/handlers/UserProfileHandler');
app.configure(function () {
app.engine('html', require('ejs').renderFile);
app.set('views', __dirname + '/');
app.use(express.logger({ stream: expressLogFile }));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
var routes = {
userProfiles: new UserProfileHandler()
};
function start() {
routeConfig.setup(app, routes);
var port = process.env.PORT || 3000;
app.listen(port);
console.log("SUCCESS: Server listening on port %d in %s mode", port, app.settings.env);
}
exports.start = start;
exports.app = app;
My routes.js file has the following:
function setup(app, routes) {
viewSetup(app);
apiSetup(app, routes);
}
function viewSetup(app) {
app.get('/', function (req, res) {
res.render("/home.html");
});
app.get('/home.html', function (req, res) {
res.render("/home.html");
});
}
function apiSetup(app, routes) {
app.get('/api/userProfiles/:username', routes.userProfiles.getUserProfiles);
}
I am trying to load home.html in a browser window. I attempt this by visiting http://localhost:3000 and http://localhost:3000/ and http://localhost:3000/home.html. Unfortunately, none of these work. In fact, I receive an error that says:
Express 500 Error: Failed to lookup view "/home.html"
I know that I'm close. If I visit http://localhost:3000/api/userProfiles/me I receive a JSON response back like I'm expecting. For some reason, i can't seem to return HTML though. My home.html file looks like the following.
<html>
<head>
<script type='text/javascript' src='/resources/javascript/home.html.js'></script>
</head>
<body>
We're up and running! <img src='/resources/images/up.png' />
</body>
</html>
Its a pretty basic HTML file. Even if the HTML comes back though, I'm concerned the JavaScript file and Image it references won't be accessible. I'm concerned of this because I'm not really sure how paths and such work in Node.
How do I get home.html to work in my Node setup?
Thank you!
as your view file is in same folder as your main file, below changes should make it work
1.change the view folder configuration line
from
app.set('views', __dirname + '/');//wont work
to
app.set('views', __dirname);//will work
2.change view render lines
from
res.render("/home.html");//wont work
to
res.render("home.html");//will work
with both the changes, the view should be working fine
update to below comments.
the issue you mentioned regarding the images,css and js is due to the static folder configuration which should be changed from
app.use(express.static(__dirname + '/public'));
to
app.use(express.static(__dirname + '/resources'));
as your static folder is named resources.
but make sure in your view you are refering the css/js/image files like
eg:
/css/style.css
/images/up.png
/images/down.png
/javascript/home.html.js
from your view file
Also if the above dint work, check if you have given the path correctly and also you can try by taking the
app.use(express.static(__dirname + '/resources'));
before the
app.use(express.methodOverride());
app.use(app.router);
lines like
app.configure(function () {
app.engine('html', require('ejs').renderFile);
app.set('views', __dirname + '/');
app.use(express.static(__dirname + '/public'));
//try changing the position of above line in app.configure and resatrt node app
app.use(express.logger({ stream: expressLogFile }));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
});
had similar problem in my case is
app.set('./views');
look for the dot, dont know why but the dot will mess it up.
I had it like this
app.set('/views') and no matter what i did couldt find the folder until added the dot.
I am new to node and server-side development in general and started having a look at it today so mind my question. I have looked for suiting answers in previous post, yet somehow every suggested solution was criticized by many users.
I can't serve static scripts/styles due to the following error:
Failed to load resource: the server responded with a status of 404 (Not Found)
I am using express 3.1.0.
Here is my code:
app.js
var express = require('express');
var app = express();
var routes = require('./routes');
app.configure(function () {
app.set('view engine', 'jade');
app.use(express.static(__dirname + '/public'));
});
app.get('/', routes.home);
app.get('/about', routes.about);
app.get('/blog', routes.blog);
app.get('/faq', routes.faq);
app.get('/terms', routes.terms);
app.get('/privacy', routes.privacy);
app.get('/jobs', routes.jobs);
app.get('/press', routes.press);
app.listen(8080);
index.js (routes)
exports.home = function(req, res){
res.render('home', { title: "Home"});
};
exports.about = function(req, res){
res.render('about', { title: "About" });
};
etc...
layout.jade
doctype 5
html
head
title= title
link(rel='stylesheet', href='public/styles/bootstrap.css')
body
block content
br
a(href='../') Home
br
a(href='../about') About
br
etc...
home.jade
extends layout
block content
p Home
When you setup server middlewere it looks for requests at the root unless specified otherwise if you are looking for a stylesheet in "public/styles" you request it at just "/styles"
to make the middlewere answer to requests to /public change it to
app.use('/public', express.static(__dirname + '/public'));
I tried using
app.use('/public', express.static(__dirname + '/public'));
instead of
app.use(express.static(__dirname + '/public'));
and it worked.
However according to the first answer in this post: express.js not serving my image it is not considered good. I can't understand why? And what else would be a better solution?