My problem is with my jade layout file not rendering correctly. The body is rendered but the head tags in the produced html are empty. I have tried to render the layout.jade file separately and it works perfectly.
Here is my layout.jade file
!!!
html
head
title= title
link(rel='stylesheet', href='stylesheets/style.css')
script(type='text/javascript', src='javascripts/jquery-1.7.2.js')
link(rel='stylesheet', href='stylesheets/pictogram-button.css')
body
header(style='padding-bottom:50px;')
include partials/header
section(style='min-height:600px;')
div!= body
footer.footer
include partials/footer
And here is my index.jade file
.line_h100t
.column_wrap800
.round_box1_w800
.list_fl10
ul.line_h40
li(style='margin-left:20px;')
ul
li
img(src='/images/icon/whiteWithoutCircle/check.png')
img(src='/images/login/loginTxt.png')
ul.line_h40t
li(style='margin-left:50px;')
p 로그인이 필요하신 분은
p Oopa Roopa 관리팀으로 문의해 주세요!
li(style='border-left:1px solid #999; padding:0 0 0 20px;')
ul
li
span.text_yellow ID
ul
li
input.login_input(type='text')
ul.line_h35t
li
span.text_yellow PASSWORD
ul
li
input.login_input(type='password')
li
ul.line_h10t
a.button-bevel.transparency(href='#')
.line_h35
span.lock
p(style='width:100px;') LOGIN
And here is the function in my express app that renders the index file.
adminLogin : function (req,res) {
res.render( 'index', {
title: 'Admin Login',
pageCategory: 'Admin Login',
pageName : 'index'
});
},
Thank you in advance for any help you an give me.
In express 3, layouts were removed in favor of template inheritance as explained here. The jade readme describes how this works, and an additional example is here.
You will need to replace div!= body with block body (or similar). Then at the top of index.jade, you'll want to add extends layout. Finally put the contents of index.jade under a block body (or whatever name you used in layout.jade).
Related
I'm broadly following this tutorial on Express, Mongo and Jade, and although I've successfully fetched back some data from mongo, but jade isn't rendering my page.
http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
Snippets are:
app.js:
app.get('/', function(req, res) {
employeeProvider.findAll(function(error, emps) {
// adding logging here shows that 'title' and 'emps' are correctly populated
res.render('index', { title:'Employees', employees:emps });
});
});
layout.jade:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
index.jade:
extends layout
block content
h1= title
div
each employee in employees
div.employee
div.created_at= employee.created_at
div.title= employee.title
div.name= employee.name
When I extract the source from the page displayed in the browser, it just shows this:
<!DOCTYPE html><html><head><title>Employees</title><link rel="stylesheet" href="/stylesheets/style.css"></head><body></body></html>
In fact, nothing I put in jade.index to simplify it seems to get rendered. eg this also renders a blank page:
index.jade:
extends layout
block content
h1= title
Check again the tutorial and follow it (realy), since your code is diferent...
http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
The index.jade should be:
extends layout
block content
h1= title
#employees
- each employee in employees
div.employee
div.created_at= employee.created_at
div.title= employee.title
div.name= employee.name
a(href="/employee/new")!= "Add New Employee"
There are some needed css over #employees and
the each loop needs a - before itself.
I am working on a simple web app (new to it) and I am using jade/angular. I am trying to get a list to display some information, this is what I have:
layout.jade:
doctype
html(ng-app)
head
title= title
script(type='text/javascript', src='javascripts/lib/angular.min.js')
script(type='text/javascript', src='javascripts/lib/angular-resource.min.js')
script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
script(type='text/javascript', src='public/javascripts/app2.js')
link(rel='stylesheet',type='text/css', href='/stylesheets/boostrap.css')
body
block content
index.jade:
extends layout
block content
h1= title
div(class="container" ng-controller="AppCtrl")
h1 Angulair
ul(ng-repeat="airport in airports")
li {{airport.code}}
li {{airport.name}}
li {{airport.destination}}
and finally app2.js:
function AppCtrl ($scope){
$scope.airports = {
"PDX": {
"code": "PDX",
"name": "Portland",
"city": "Toronto"
}
};
}
EDIT: Everything below here is an edit...
I am working with node as well, this is what my project looks like
node_modules/
public/
img/
javascripts/
app2.js
stylesheets/(bootstrap files in here)
routes/
index.js
views/
partials/
index.jade
layout.jade
app.js
package.json
Also, I am using node for this project, In app.js I make a call to:
app.get('/', routes.index);
index.js:
exports.index = function(req, res){
res.render('index', { title: 'Angular Basic' });
};
As you can see, very simple stuff, but I cannot seem to get the list to display that airport information. Am I wrapping the jade template with angular correctly?
I CHANGED THE SCRIPTS IN layout.jade to include the angular resources. Now Nothing appears. I also added the brackets around the elements in the list tags, as suggested below. Still nothing appears.
tire0011 + Daiwei are both correct.
It's not your jade that is the problem. Here's a working sample incorporating tire0011 + Daiwei's suggestions:
http://plnkr.co/edit/q2DMGO0P50nWdf1PGlNJ?p=preview
you need to add a app module name
doctype
html(ng-app="appName")
then in your script first create your module and then the controller
var myModule = angular.module('appName', []);
myModule.controller("AppCtrl", function ($scope) {
// do your stuff
}
The problem is in your li tag, use {{ XXX }} to wrap your properties
li {{ airport.code }}
li {{ airport.city }}
li {{ airport.name }}
This is my file structure:
http://i.imgur.com/XleRVbc.png
Inside views, I have layout.jade that has the following code:
doctype 5
html
head
title= title
link(rel='stylesheet', href='../bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='../bootstrap/css/bootstrap-responsive.min.css')
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
script(src='../bootstrap/js/bootstrap.min.js')
body
block content
This is index.jade:
extends layout
block content
div.top
form.form-horizontal(method="post", id="loginForm")
label Username
input.span3(id="username", type="text", name="User", placeholder="Enter your username")
label Password
input.span3(id="password", type="password", name="Password")
input.btn(type="submit", value="Log In")
div.container
div.content
table.table.table-striped
thead
tr
th Table
th Heading
tbody
tr
td Blah
td Test
tr
td Hello
td World
div.footer
But it seems like the CSS doesn't get applied because the page looks like:
http://i.imgur.com/8CjRlKC.png
The css is in the folder called bootstrap/css
Are you using express? If so, it seems that you are missing a public folder in your file structure. Usually you have something like:
package.json
app.js
node_modules/
|- ...
public/
|-img/
|-css/
|-js/
routes/
views/
..and you let express know about these file via:
var app = module.exports = express();
...
app.use(express.static(__dirname + '/public'));
Try adding that line of code to app.js if it isnt already there, creating the public folder, moving the bootstrap folder there, and referencing it via just link(rel='stylesheet', href='bootstrap/css/bootstrap.min.css') in the jade
Try using an absolute path instead of a relative one. Relative paths can be confusing because they are relative to app.js instead of the view.
Change
link(rel='stylesheet', href='../bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='../bootstrap/css/bootstrap-responsive.min.css')
To
link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')
Also make sure you are properly serving static files with a line like the following in your app.js:
app.use(express.static(path.join(__dirname, 'bootstrap')));
How would I set an active tag to a class depending on the URL?
In the example below '/' (Home) is set to active.
.nav-collapse.collapse
ul.nav.top-2
li.active
a(href='/') Home
li
li
a(href='/about') About
li
li
a(href='/contact') Contact
li
Would it be better to inject something into the page to identify it as the active page?
Here's what I do, like hexacyanide's example,
res.render('/path', {
path: req.path
});
..and in layout.jade:
.nav-collapse.collapse
ul.nav.top-2
li(class=path=='/'?'active':undefined)
a(href='/') Home
li(class=path=='/about'?'active':undefined)
a(href='/about') About
li(class=path=='/contact'?'active':undefined)
a(href='/contact') Contact
You can also consider adding id to body tag, with will be telling you on what page you are. And then you can specify simple CSS rules dependent of that id. It's very popular scheme, for example provided by Wordpress.
For this id you can use Jade variable provided by render method.
In your express code:
res.render('/', { id : 'home' });
In template:
body##{id}
and later in ul.nav
li.home
a(href='/') Home
li
li.about
a(href='/about') About
li
li.contact
a(href='/contact') Contact
In CSS:
#home ul.nav li.home {
background: red;
}
#about ul.nav li.about {
background: red;
}
Take a look at Jade's conditionals, documented on GitHub. You would want to pass the path to the render in Express like so:
res.render('/path', {
path: req.path
});
Then in Jade, you would use a conditional like so:
if path == 'home'
//active styling
else
//not active
I'm trying to understand how Express and Jade works.
First of all, am I doing it right when I'm using layout.jade as a template file (header, body, footer) and using different files to show information in the body (see examples below)?
The code works fine, but i'm unsure if this is the right way to do stuff in Express. If I should keep going with this structure, how can I link to other files (eg.About.jade) internally from for example index.jade, to show that file instead of index.jade?
Thanks in advance!
layout.jade:
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js')
script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js')
script(type='text/javascript', src='/javascripts/external.js')
// Header
header#header
// Navigation
nav#nav
// Navigation code (ul, li etc)...
// Sidebar
aside#sidebar
// Sidebar code...
// Body
body!= body
index.jade:
!!! 5
html
head
title= title
section#wrapper
img.imageStyle(src = '/images/test1.png')
// And so on...
About.jade:
// You get it...
I think what you're looking for are view rendering routes in express:
http://expressjs.com/en/guide/using-template-engines.html
So you can set up something like this:
app.get('/', function(req, res){
res.render('index.jade', { title: 'index' });
});
app.get('/about', function(req, res){
res.render('about.jade', { title: 'about' });
});
To link from one to the other, once you have the proper routes configured, you can just do something like:
a(href='/') index
a(href='/about') about
Update Also, you don't need this repeated again in index.
!!! 5
html
head
title= title
additionally to what Wes Freeman wrote you can also include other jade templates in your jade file.
that way you could have your header.jade, footer.jade and include them in your about.jade file. here's the include documentation from jade:
https://github.com/visionmedia/jade#a13
that way you only have to change the header.jade file if you add for example script or stylesheet tags that should be on every page.