How to include scripts with node/express/jade? - node.js

I am building a MEAN stack application using Jade but I can't get any of my script tag links to work. The link tags work fine. I have tried absolute and relative links and about 5 other solutions that were posted on questions (most of them are a few years old) here on stack overflow but none of them have worked.
Here is the relevant code in my project:
(header.jade)
link(href='libraries/normalize-css/normalize.css', rel='stylesheet')
link(href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css', rel='stylesheet')
link(href='custom.css', rel='stylesheet')
script(src='https://code.angularjs.org/1.4.7/angular.min.js')
script(src='/js/app.js')
(an example of where I want to use angular)
extends userBase
block vars
- var title = 'Login'
block body
h1.love love love
div(ng-controller='ChoiceCtrl')
form(method="post", role="form", style="width:90%; margin: 5px auto;", class="form-horizontal")
input(type='hidden', name='_csrf', value=csrfToken)
div.form-group
label(for="question") Ask your question:
input(type="text", name="question", required=true, class="form-control", id="question", placeholder='Which team will win the super bowl this year...?')
br
ul.list-group
li.list-group-item(ng-repeat="choice in choices")
span {{ 2+2 }}
div.form-group
label(for="responses") Choose Response Options:
.input-group
input(type="text", name="response", class="form-control", id="responses", ng-model='choiceBody')
span.input-group-btn
input(type="submit", class='btn btn-primary', value='Add', ng-click='addChoice()')
input(type="submit", class='btn btn-primary', value='Create Poll')
Also, in the server.js file the routing for static files works fine so I am not sure where the problem is.
The rest of the code is here on github: https://github.com/gwenf/votenow

I figured it out! I was forgetting to include a script tag for angular's ui-router. I put the script tag after the one for angular:
link(href='libraries/normalize-css/normalize.css', rel='stylesheet')
link(href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css', rel='stylesheet')
link(href='custom.css', rel='stylesheet')
script(src='libraries/angular/angular.js')
script(src='libraries/angular-ui-router/angular-ui-router.js')
script(src='/js/app.js')
and then I included it in my app.js:
var myApp = angular.module('myApp', ['ui.router']);

Related

Resource was blocked due to MIME type mismatch using pug and node

I'm trying to render a view with an id in the url:
router.get('/employee', authController.protect, viewsController.getOverviewEmployee);
router.get('/employee/:id', authController.protect, viewsController.getOneEmployee);
The /employee works fine, but when I get to the /employee/:id page the css and scripts won't load and the console shows me this error:
The resource from
“http://127.0.0.1:3000/employee/lib/bootstrap/css/bootstrapmin.css”
was blocked due to MIME type (“application/json”) mismatch
(X-Content-Type-Options: nosniff).
this is my index.pug header:
doctype html
head
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
meta(name='description' content='')
meta(name='author' content='Dashboard')
meta(name='keyword' content='Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina')
title Admin
// Favicons
link(href='img/favicon.png' rel='icon')
link(href='img/apple-touch-icon.png' rel='apple-touch-icon')
// Bootstrap core CSS
link(href='lib/bootstrap/css/bootstrap.min.css' rel='stylesheet')
link(rel='stylesheet', type='text/css', href='lib/bootstrap-fileupload/bootstrap-fileupload.css')
// external css
link(href='lib/font-awesome/css/font-awesome.css' rel='stylesheet')
// Custom styles for this template
link(href='dashcss/style.css' rel='stylesheet')
link(href='dashcss/style-responsive.css' rel='stylesheet')
getOneEmployee:
exports.getOneEmployee = catchAsync(async (req, res, next) => {
const employee = await Employees.findById(req.params.id);
if (!employee) {
return next(new AppError('No document found with that ID', 404));
}
res.status(200).render('admin/employeeManager',{
title: 'Employee',
employee
});
});
and the employeeManager.pug
extends index
block content
section#container
MAIN CONTENT
// main content start
section#main-content
section.wrapper
h3
i.fa.fa-angle-right
| Editar Colaborador
.row.mt
.col-lg-12
h4
.form-panel
.form
form.cmxform.form-horizontal.style-form#commentForm(method='get' action)
.form-group
label.control-label.col-lg-2(for='cname') Nome*
.col-lg-10
input.form-control#cname(name='name' minlength='2' type='text' required)
.form-group
label.control-label.col-lg-2(for='cphone') Telefone*
.col-lg-10
input.form-control#cemail(type='cphone' name='phone' required)
.form-group
label.control-label.col-lg-2(for='cdescription') Descrição*
.col-lg-10
input.form-control#curl(type='description' name='description' required)
.form-group
label.control-label.col-lg-2(for='ccomment') Your Comment (required)
.col-lg-10
textarea.form-control#ccomment(name='comment' required)
.form-group
label.control-label.col-md-3 Image Upload
.col-md-9
.fileupload.fileupload-new(data-provides='fileupload')
.fileupload-new.thumbnail(style='width: 200px; height: 150px;')
img(src='http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image', alt='')
.fileupload-preview.fileupload-exists.thumbnail(style='max-width: 200px; max-height: 150px; line-height: 20px;')
div
span.btn.btn-theme02.btn-file
span.fileupload-new
i.fa.fa-paperclip
| Select image
span.fileupload-exists
i.fa.fa-undo
| Change
input.default(type='file')
a.btn.btn-theme04.fileupload-exists(href='', data-dismiss='fileupload')
i.fa.fa-trash-o
| Remove
span.label.label-info NOTE!
span
| Attached image thumbnail is
| supported in Latest Firefox, Chrome, Opera,
| Safari and Internet Explorer 10 only
.form-group
.col-lg-offset-2.col-lg-10
button.btn.btn-theme(type='submit') Salvar
|
button.btn.btn-theme04(type='button') Cancelar
This is because you are using relative url's in your attributes.
Replace this:
link(href='img/favicon.png' rel='icon')
With this:
link(href='/img/favicon.png' rel='icon')
To explain this further, when you are viewing /employee then the relative link at img/123.jpg is correctly resolved as /img/123.jpg. However, as soon as you go to the url /employee/joeblow then the relative link is looking for /employee/img/123.jpg. You'll be able to confirm this by opening Developer Tools in your browser then looking at the requests made in the Network tab.
Adding the slash at the front of all img elements will ensure that they look for the images in the correct folder, the one off the root (/).
The bootstrap mime-type error must be coming from one of the libraries that is loading correctly but not finding a dependency due to the issue described above.

Display paragraph in Jade template

I have started working on a sample NodeJS / Express web application ,
and I am using Jade template engine.
Below is the partial .jade code for one of the screens.
html
head
script(src='/js/bootstrap.min.js')
script(src='/angular/angular.min.js')
link(href='/css/bootstrap.css' , rel='stylesheet')
body
div(class='container')
p= error
My intention is to have "p" element within the div
<div class='container'>
<p>Error message comes here.. </p>
</div>
But what is happing is "p" element is after div
<div class='container'>
</div>
<p>Error message comes here.. </p>
Please let me know what needs to be modified so that "p" is within div.
Your code may be indented in the wrong way. Try this:
html
head
script(src='/js/bootstrap.min.js')
script(src='/angular/angular.min.js')
link(href='/css/bootstrap.css',rel='stylesheet')
body
.container
p=error
Copied the jade code and seems you indented unevenly. Try this :
html
head
script(src='/js/bootstrap.min.js')
script(src='/angular/angular.min.js')
link(href='/css/bootstrap.css' , rel='stylesheet')
body
.container
p error
This worked for me
div.container
p= error

Issue getting information to jade template with angular

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 }}

Express, jade layout file rendering body but not rendering head

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).

Jade - Unexpected Identifier

I use the following NodeJS route:
server.get('/', function(req, res) {
res.render('index');
});
it seems that I have an error in my index.jade file, since it tells me:
SyntaxError: Unexpected identifier
at Object.Function (unknown source)
at Object.compile (/media/Data/development/private/PicoBudget/node_modules/jade/lib/jade.js:160:8)
at Function.compile (/media/Data/development/private/PicoBudget/node_modules/express/lib/view.js:68:33)
at ServerResponse._render (/media/Data/development/private/PicoBudget/node_modules/express/lib/view.js:417:18)
at ServerResponse.render (/media/Data/development/private/PicoBudget/node_modules/express/lib/view.js:318:17)
at /media/Data/development/private/PicoBudget/app.js:51:7
at callbacks (/media/Data/development/private/PicoBudget/node_modules/express/lib/router/index.js:272:11)
at param (/media/Data/development/private/PicoBudget/node_modules/express/lib/router/index.js:246:11)
at pass (/media/Data/development/private/PicoBudget/node_modules/express/lib/router/index.js:253:5)
at Router._dispatch (/media/Data/development/private/PicoBudget/node_modules/express/lib/router/index.js:280:5)
Here's my index.jade:
doctype 5
html(lang="en")
head
title= PicoBudget - Expense tracking tool
link(href='bootstrap/css/bootstrap.css', rel='stylesheet')
style(type='text/css')
body {
padding-top: 100px;
padding-bottom: 40px;
}
link(href='bootstrap/css/bootstrap-responsive.css', rel='stylesheet')
link(href='css/main.css', rel='stylesheet')
script(type='text/javascript')
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
body
header
nav
div(class='navbar navbar-fixed-top')
div(class='navbar-inner')
div(class='container')
a(class='btn btn-navbar', data-toggle='collapse', data-target='.nav-collapse')
span(class='icon-bar')
span(class='icon-bar')
span(class='icon-bar')
a(class='brand', href='http://localhost:1337) PicoBudget
div(class='nav-collapse')
ul(class='nav')
li(class='active')
a(href='http://localhost:1337) Home
li
a(href='http://localhost:1337/login) Register
li
a(href='http://localhost:1337/faq) FAQ
li
a(href='http://localhost:1337/about) About
li
a(href='http://localhost:1337/dashboard) Dashboard
form(class='form-inline pull-right, action='http://localhost:1337/authenticated', method='POST')
input(type='text', class='input-small', placeholder='Email' name='emailInput'
input(type='password', class='input-small', placeholder='Password', name='passwordInput')
label(class='checkbox')
input(type='checkbox')
Remember me
button(type='submit', class='btn')
Sign in
div(class='container')
section#content
div(class='hero-unit')
h1 Easily manage your money
p
Ever wondered where your money goes? What do you spend the most money on? PicoBudget is a simple tool which features transactions, budgeting and reporting. Using Basic PicoBudget is absolutely free. If you enjoy it, though, you can get even more features with PicoBudget Premium!
p
Currently PicoBudget is under construction. Feel free to come back to check it out when it launched!
div(class='row')
div(class='span4')
h2 Introduction
p
What is PicoBudget? Who is it for? Why should you use it?
p
a(class='btn', href='http://localhost:1337/introduction')
Read more »
div(class='span4')
h2 FAQ
p
We listed the frequently asked questions. It should cover most of your questions.
p
a(class='btn', href='http://localhost:1337/faq')
View FAQ »
div(class='span4')
h2 Premium
p
With a premium account you get even more features. It already starts from 0.00!
p
a(class='btn', href='http://localhost:1337/premium')
Read more »
hr
footer
p
© PicoBudget.com 2012
script(src='bootstrap/js/bootstrap.js')
script(src='js/libs/jquery-1.7.2.js')
I fixed it:
Fixed all of the missing '
Removed the = after title (line 4)

Resources