I am working on a single page web app, and I wanted to load in jade views with my angular template but I am struggling to wrap my head exactly how to do so.
Here is my angular template:
index.html
<!doctype html>
<html ng-app="test">
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="/javascripts/app2.js"></script>
</head>
<body>
<p> Hello </p>
<div>
<div ng-view></div>
</div>
</body>
</html>
I made a controller for my angular template: navigation.js
angular.module('test', [])
.config(viewRouter);
function viewRouter ($routeProvider){
$routeProvider
.when('/', {templateURL: 'views/index.jade'});
}
Here I am trying to use a jade template to render onto the page, but it does not seem to be working.
I have a view jade templates,
index.jade
extends layout
block content
h1= title
include partials/menu
.views-wrapper
include partials/login
layout.jade:
doctype
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
script(src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
script(src='/javascripts/navigation.js')
menu.jade:
ul
li.a VIEW A
li.b VIEW B
li.c VIEW C
li.l VIEW LOGIN2
I also have a view simple templates (named a.jade, b.jade, and c.jade) which just have simple headers displaying a name as a test to see if the routing works. I am struggling to get these templates to connect, I can't seem to wrap my head around, nor find an answer as to how I can display my jade views through my angular template. Before I was not using an angular template, but decided to use one in order to deal with URL more easily.
this is my app.js on my server side:
/**
* Module dependencies.
*/
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.cookieParser('cookies monster')); // Cookie secret
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.set('public', path.join(__dirname, 'public'));
/*
* Views
*/
//app.get('/', routes.index);
app.get('/', function(req, res, next){
return res.sendfile(app.get('public') + '/index.html');
});
app.get('/users', user.list);
app.get('/a', routes.a);
app.get('/b', routes.b);
app.get('/c', routes.c);
app.get('/login2', routes.login2);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
and this is a routes controller that I had to render the views before I decided to use angular
index.js:
exports.index = function(req, res){
res.render('index', { title: 'New Test' });
};
// View A
exports.a = function(req, res) {
res.render('partials/a', { layout: false, test: 'a' });
};
// View B
exports.b = function(req, res) {
res.render('partials/b', { layout: false, test: 'b' });
};
exports.c = function(req, res) {
res.render('partials/c', { layout: false, test: 'c' });
};
exports.login2 = function(req, res) {
res.render('partials/login2', { layout: false, test: 'login2' });
};
I know this is a lot of code to look at, but I would really appreciate any help.
Check my answer on stackoverflow about using AngularJS seed for working with Jade, it can help you with your question.
Related
I am trying to render ejs file from nodejs express.
But it shows html codes with thes character � everywhere.
let express = require('express');
let app = express();
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
res.render('index', { title: 'The index page!' })
});
And index.ejs is
<html>
<head>
<title><%= title %></title>
</head>
<body>
welcome <%= title %>;
</body>
</html>
What did do I do wrong?
The server needs to be started
var express = require('express');
var app = express();
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
res.render('index', { title: 'The index page!' })
});
app.listen(3000);
The below code working fine but routes / and /signup will show same thing (except title) because the first argument in the res.render doesn't do anything and because in the layout I have {{< index}} which render the view with the name index. What I want is to dynamically pass the partial that I want to render (basically I want the first argument of res.render to have effect).
app.js
/* Variable declarations */
var express = require('express'),
hbs = require('hbs'),
app = express();
/* Setttings */
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');
app.set('view options', { layout: 'layout' });
/* Register Partials */
hbs.registerPartials(__dirname + '/views');
/* Routes */
app.get('/signup', function (req, res) {
res.render('index', {title: 'Welcome'});
});
app.get('/signup', function (req, res) {
res.render('signup', {title: 'Sign Up'});
});
/* Listeners */
app.listen(80, function () {
console.log('App started...');
});
Layout.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
{{> index}}
</body>
</html>
As part of Handlerbars 3.0 dynamic partials are included. You can find the reference here. With this new syntax the name of the partial is evaluated and dynamically replaced. I'm using "express-handlebars": "2.0.1",.
Layout.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
{{> (whichPartial) }}
</body>
</html>
App.js
/* Routes */
app.get('/', function (req, res) {
res.render('index', {title: 'Welcome'
whichPartial: function() {
return "thePartialNameForIndex";
}
});
});
app.get('/signup', function (req, res) {
res.render('signup', {title: 'Sign Up'
whichPartial: function() {
return "thePartialNameForSignup";
}
});
});
Where thePartialNameForIndex and thePartialNameForSignup are the name of the partials allocated in /views.
I've scoured the internet for somebody with a similar problem, but still no solutions. In comparing my app to Angular-Express-seed, Angular-Express-Master, and any of the other popular examples out there, nothing appears to be broken, yet it just doesn't work. Does anybody have a ideas of why this may be?
I'll try to spare detail without removing what may be the problematic bit of code:
/app.js
// All environments
app.set('views', __dirname + '/views');
app.set('port', process.env.PORT || 3000);
app.engine('.html', require('ejs').renderFile);
app.set('view engine', 'html');
app.set("view options", { layout: false });
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.session(
{ secret: 'spunkydelicious',
cookie : {
maxAge: (3600000*24*7) // 1 week
}
}
));
app.use(passport.initialize());
app.use(passport.session());
app.use(require('express-jquery')('/jquery.js'));
app.use(express.static(path.join(__dirname, '/public')));
app.use(app.router);
...
app.get('/', index.index);
app.get('/partials/:name', index.partials);
app.get('*', index.index);
where the 'index' of index.index, index.partials, etc. corresponds to this:
/app/controllers/index.js
exports.index = function(req, res){
res.render('index');
};
exports.partials = function(req, res) {
var name = req.params.name;
console.log('Hurah!');
res.render('partials/' + name);
};
/public/javascripts/app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('emit', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when( '/', {
templateURL:'partials/test',
controller: AppCtrl
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
/public/javascripts/controllers.js
'use strict';
/* Controllers */
function AppCtrl($scope) {
console.log('123');
}
/views/index.html
<!DOCTYPE html>
<html ng-app="emit">
<head>
<base href="/">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div ng-view></div>
<!-- Plugins -->
<script src="/javascripts/vendor/angular/angular.js"></script>
<!-- Angular -->
<script src="/javascripts/app.js"></script>
<script src="/javascripts/controllers.js"></script>
<!-- Other scripts -->
**strong text** <script src="/javascripts/script.js"></script>
</body>
</html>
/views/partials/test.html
<div class="">Yay!</div>
Pardon the length of the code, I just can't crack what I'm doing wrong. No errors are logged by the server of the client console. Any debugging steps I could take?
After very long and confusing debug session I've figured this out... Surprisingly, the error is in templateURL - it should be templateUrl.
I am using the book "Smashing Node.js" by Guillermo Rauch. Chap. 12 sets up some views/routes before an authentication example. I have followed the tutorial to the best of my ability and searched (and searched) for my error.
//package.json
{
"name": "login"
,"version":"0.0.1"
,"main":"./index"
,"dependencies": {
"express": "3.0.0"
,"uglify-js" : "2.4.0"
,"mongodb":"1.3.19"
,"mongoose":"3.6.20"
,"bcrypt":"0.7.7"
,"jade":"0.35.0"
}
}
here is my index.js
/**module dependenies**/
var express = require('express')
, mongodb = require('mongodb');
//set up app
app = express();
//middleware
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.session({secret: 'my secret'}));
//view options
app.set('view engine', 'jade');
//app.set('views', __dirname + '/views');
//app.set('view options', {layout: false});
//routes
//default route
app.get('/', function (req, res){
console.log('default');
res.render('index', {authenticated: false});
});
//login route
app.get('/login', function (req, res){
console.log('login');
res.render('login');
});
//signup route
app.get('/signup', function(req, res){
console.log('signup');
res.render('signup');
});
//listen
app.listen(3000);
in the same directory I have a folder of views/layout.jade, index.jade, signup.jade, login.jade I will show two.
'layout.jade'
doctype 5
html
head
title BN Login
body
.wrapper
block body
and index.jade
extends layout
block body
if (authenticated)
p Welcome back, #{me.first}
a(href="/logout") Logout
else
p Welcome visitor!
ul
li: a(href='/login') Login
li: a(href="/signup") Signup
the lines I have commented out did not help or are old.
The layout.jade renders. The console shows that the code is being read. No other view is rendered.
Thanks.
I think you have not used indentation correctly. In your index this :
extends layout
block body
if (authenticated)
...
else
should be :
extends layout
block body
if (authenticated)
...
else
So I'm having an problem loading my stylesheets in my express project. When I was using express 2.5.8 my styles were being loaded correctly, but when I updated to 3.x the styles started failing to load. The views get rendered but without any styles.
I'm using node, express 3.x, jade, and bootstrap. My styles are in public/stylesheets/*.
UPDATE: It seems that for some reason layout.jade isn't being rendered.
Here' my server.js
require('coffee-script');
/**
* Module dependencies.
*/
var express = require('express'),
flash = require('connect-flash');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.set('port', 3000);
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(flash());
app.use(require('connect-assets')());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler({
dumpExceptions: true,
showStack: true
}));
});
app.configure('test', function () {
app.set('port', 3001);
});
app.configure('production', function(){
app.use(express.errorHandler());
});
// Routes
require('./apps/landing-page/routes')(app);
require('./apps/authentication/routes')(app);
require('./apps/home/routes')(app);
require('./apps/register/routes')(app);
app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.settings.port, app.settings.env);
Here's my main layout.jade view:
!!!
html
head
title= title
script(src='http://code.jquery.com/jquery-latest.js')
link(rel='stylesheet', href='/stylesheets/bootstrap.css')
link(rel='stylesheet', media='screen', href='/stylesheets/bootstrap-responsive.css')
link(rel='stylesheet', href='/stylesheets/app.css')
script(src='javascripts/bootstrap.js')
| <!--[if lt IE 9]>
| <link rel="stylesheet" href="stylesheets/ie.css">
| <![endif]-->
| <!-- IE Fix for HTML5 Tags -->
| <!--[if lt IE 9]>
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
| <![endif]-->
body
!=body
script(src='javascripts/app.js')
And here's one of my routes:
routes = (app) ->
app.get '/home', (req, res) ->
res.render "#{__dirname}/views/home",
title: 'Home | SiteName'
stylesheet: 'home'
module.exports = routes
I believe that layout rendering was set to false per default in Express 3, so try and add following to your configuration:
app.set('view options', { layout: true });
Update: The migration guide state that the concept of layouts and partials have been removed altogether. Instead, use Jade's template inheritance.
/views/layout
!!! 5
head
// all your header elements
body
block content
/views/home
Add the following at the top:
extends layout
block content
// the stuff you want to have in your content block
For more info, take a look at this guide.
app.use(express.static(__dirname + '/public'));
must be before
app.use(app.router);