I'm using node.js and flatiron plates for templating, and having trouble with scrambled output when using an array for data.
I would like to bind an array to list items with the ID "list"
JS:
var express = require('express');
var app = express.createServer();
var fs = require('fs');
var plates = require('plates');
var html = fs.readFileSync('plates.html', 'utf-8');
app.get('/', function(req, res) {
var data = {
list: [
"Alpha",
"Bravo",
"Charlie",
"Delta",
]
}
res.send(plates.bind(html, data))
})
app.listen(8080)
HTML:
<html>
<body>
<ul>
<li id="list">REPLACE</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
</body>
</html>
I would expect the output to look like this, where only the list items are repeated:
<body>
<ul>
<li id="list">Alpha</li>
<li id="list">Bravo</li>
<li id="list">Charlie</li>
<li id="list">Delta</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
</body>
</html>
However, I get this weird output and can't understand what the cause might be:
<html>
<body>
<ul>
<li id="list">Alpha</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li id="list">Bravo</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li id="list">Charlie</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li id="list">Delta</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
</body>
</html>
Any ideas?
(P.S. I know HTML doesn't allow for repeated IDs, it's just an example and not the issue)
Updated Information
I ran the tests that pksankara pointed out successfully, but if I modify the tests to use my markup, I get failures:
Modified test-16.html:
<ul>
<li class="components"></li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
Output:
<ul>
<li class="components">Union</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Director</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Broadway</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Plates</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Resourceful</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
The following is an example on how to do this from the plates repository
Plates Bind: https://github.com/flatiron/plates/blob/master/test/api-test.js#L172
JSON: https://github.com/flatiron/plates/blob/master/test/fixtures/test-16.json
HTML: https://github.com/flatiron/plates/blob/master/test/fixtures/test-16.html
OUTPUT: https://github.com/flatiron/plates/blob/master/test/fixtures/test-16.out
I expect that you can imitate it.
(EDIT: The only bug is https://github.com/flatiron/plates/issues/47)
Related
I just need the focus to stay once the element is clicked. I can't get it to work. This code below is from my masterpage. The hover works ok, but after clicking one of the menu options, it does not stay focused and goes right back to the home button. Can someone possibly shed some light on why this isn't working?
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
<form id="form1" runat="server">
<br />
<br />
<center>
<!-- start header -->
<header>
<div class="container">
<div class="navbar navbar-static-top">
<div class="navigation">
<nav>
<ul class="nav topnav bold" >
<li class="dropdown active">
<a id="nav1" href="../default.aspx" runat="server">HOME </a>
</li>
<li class="dropdown">
<a id="nav2" href="../reverse_mortgages.aspx" runat="server" onclick="setNavagation();">REVERSE MORTGAGE FAQ</a>
</li>
<li class="dropdown">
<a id="nav3" href="../loan_process.aspx" runat="server">OUR PROCESS</a>
</li>
<li id="nav4" class="dropdown">
GET QUOTE
</li>
<li id="nav5" class="dropdown">
ABOUT
</li>
<li id="nav6" class="dropdown">
CONTACT
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</header>
</center>
<script type="text/javascript">
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
if (path.substring(1, path.length) === "") { // this was the home page loading already active
return;
}
$("li.active").removeClass("active"); // remove class 'active' all list items
$(".navigation a").each(function () {
var href = $(this).attr('href');
if (path.substring(1, path.length) === href) {
$(this).parent('li').addClass('active');
return;
}
});
}
</script>
<!-- end header -->
I am creating a website using MVC5 (we do for all our websites here) and I am trying to integrate the FlexSlider (found here: https://woocommerce.com/flexslider/) into one of my pages.
I can't seem to get it working, the page just displays nothing, yet it appears in the 'Inspect Element' with each image as being 0x0 px.
HTML:
<div class="flexslider" data-controlnav="thumbnails">
<ul class="slides">
#if (Model.CDSContent != null)
{
foreach (var item in Model.CDSContent)
{
<li>
<a href="#">
<img src="#Html.Raw(item["newsimage"])" alt="Slide 2">
<div class="flex-caption">newstitle</div>
</a>
</li>
}
}
</ul>
</div>
I also have the JS and CSS linked:
<link rel="stylesheet" type="text/css" href="http://flexslider.woothemes.com/css/flexslider.css">
<link rel="stylesheet" type="text/css" href="http://lab.mattvarone.com/projects/jquery/totop/css/ui.totop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>
<script type='text/javascript' src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js"></script>
Of course its a little bit difficult to say why your code is not working.
Have you checked what #Html.Raw(item["newsimage"]) returns ?
But...
You could use a carousel that runs on bootstrap.
The code below i made is to scan a folder for images and then i send them to the view with a viewbag.
--Controller code Start--
var GetSliderImaged = Directory.EnumerateFiles(Server.MapPath("~/Content/SlideShowIndexPage")).Select(fn => Path.GetFileName(fn));
ViewBag.Sliderimages = GetSliderImaged;
--Controller code End--
--View code Start--
<div id="myCarousel" class="carousel slide MTop10 BRadius10 unselectable" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators" style="margin-bottom: 0px;">
#{
var ii = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (ii == 0)
{
<li data-target="#myCarousel" data-slide-to="#ii" class="active"></li>
}
else
{
<li data-target="#myCarousel" data-slide-to="#ii"></li>
}
ii++;
}
}
</ol>
<div class="carousel-inner " role="listbox">
#{
var i = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (i == 0)
{
<div class="item active">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
i++;
}
else
{
<div class="item">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
}
}
}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
--View code End--
Just so you know .. the code is not complete but its works for sure if there are images "It does not check if there are no images in the viewbag etc"
But for sure that will be easy to make it yourself.
I have a express handlebar application with main.hbs as the layout file.
//main.hbs
<html>
<head></head>
<body>
{{> header}}
{{{body}}}
<script src='/js/jquery-2.2.4.min.js'></script>
<script src='/js/bootstrap.min.js'></script>
</body>
</html>
When i click a link let's say "settings" in dashboard page then it redirects to settings page where i have sidebar and main content page.
This page also uses main.hbs as layout.
//settings.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li>Views</li>
<li>Users</li>
<li>Sites</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<div id="settingsContainer">
//Content should be rendered here just like the {{{body}}}
</div>
</div>
</div>
So how can i able to render the desired content inside the "settingsContainer".
As per my understanding in layout file {{{body}}} is used as a placeholder for where the main content should be rendered.
But this is a different page. Is there a way i can render the content based on the link clicked from sidebar.
Any help and pointer will be much appreciated!
i don't know much about handlebars but you can achieve the same with bootstrap tabs.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tabbable">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li class="">Views</li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<hr>
<div id="settingsContainer">
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="account">
//render partial for account
</div>
<div class="tab-pane" id="views">
//render partial for views
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps
we have created a e-commerce project in that while clicking on categories in UI it will renders to category page in that page it has show one product of each subcategory
i have written the code in which the entire products with the specific category name is displaying how i can remove the extra products as of now i required only one product of each sub category of the particular category
the routing code is
router.get("/shop/:category_name", function(req, res){
//querystring
var url = require('url');
var url_parts = url.parse(req.url, true);
var query = url_parts.query;
var viewModel = {
breadCrumb: [],
categories : [],
featuredProducts :[],
products : [],
};
viewModel.breadCrumb.push({
name : 'Home',
class : 'breadcrumb-ordinary'
});
viewModel.breadCrumb.push({
name : req.params.category_name,
class : 'breadcrumb-active'
});
async.parallel({
categories: function(cb){
Category.find({}, cb);
},
categories1:function(cb){
Category.find({category_name:req.params.category_name}, cb);
}
}, function(err, results) {
if (err) throw err;
viewModel.categories1=results.categories1;
viewModel.categories=results.categories;
res.render('shop/prod_grid',viewModel);
});
});
the view UI code is
<!doctype html>
<html lang="en-US"> <!--<![endif]-->
<head>
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../../shop-plugins/css/jplist-pagination.css">
<link rel="stylesheet" href="../../../shop-plugins/css/breadcrumb.css">
<body>
{{> shop/header}}
<!-- BAR -->
<div class="shipping-wrap">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li>
{{#each breadCrumb}}
{{#if #first}}
<a href="/" class="{{class}}">{{name}}
{{else}}
<a class="{{class}}">{{name}}
{{/if}}
{{#if #last}}
{{else}}
<i class="fa fa-angle-double-right"></i></a>
{{/if}}
{{/each}}
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- BAR -->
<!-- PRODUCT-OFFER -->
<div class="product_wrap">
<div class="container">
<div class="row">
<div id="span9" class="span9 product-grid">
<div id="products" class="box jplist jplist-grid-view">
<div class="jplist-panel box jplist-panel-top">
<div
class="jplist-drop-down"
data-control-type="items-per-page-drop-down"
data-control-name="paging"
data-control-action="paging">
<ul id="per-pages">
<li><span data-number="3">3 per page</span></li>
<li><span data-number="6" data-default="true">6 per page</span></li>
<li><span data-number="9">9 per page</span></li>
<li><span data-number="12">12 per page</span></li>
</ul>
</div>
<div
class="jplist-drop-down"
data-control-type="sort-drop-down"
data-control-name="sort"
data-control-action="sort">
<ul id="sorting">
<li><span data-path="default">Sort By</span></li>
<li><span data-path=".brand" data-order="asc" data-type="text">Brand A-Z</span></li>
<li><span data-path=".brand" data-order="desc" data-type="text">Brand Z-A</span></li>
<li><span data-path=".cost" data-order="asc" data-type="number">Cost Low-High</span></li>
<li><span data-path=".cost" data-order="desc" data-type="number">Cost High-Low</span></li>
</ul>
</div>
<div
class="jplist-label"
data-type="Page {current} of {pages}"
data-control-type="pagination-info"
data-control-name="paging"
data-control-action="paging">
</div>
<div
class="jplist-views"
data-control-type="views"
data-control-name="views"
data-control-action="views"
data-default="jplist-grid-view">
</div>
</div>
{{#each subcategoryprod}}
<div>
<ul>
<li>{{subcategory}}</li>
</ul>
</div>
{{/each}}
<!--category wise products-->
<div id="jp-panel" class="list box text_shadow">
{{#each subcategoryprod}}
<div id="jp-panel-item" class="list-item box">
<div class="span3 product">
<div>
<figure>
{{#each image}}
{{#if #first}}
<img src="../../../uploads/products/{{../_id}}/{{img}}" alt="" onerror="this.src='../../../shop-images/coming-soon.png'">
<div class="overlay">
</div>
{{/if}}
{{else}}
<img src="../../../shop-images/coming-soon.png" alt="">
<div class="overlay">
</div>
{{/each}}
</figure>
<div class="detail">
<span name="retailprice" class="cost">₹{{RetailPrice}}</span>
<span>{{colour}}</span>
<h4 class="brand">{{brand}}</h4>
<span>{{Description}}</span>
<div class="icon">
</div>
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div class="box jplist-no-results text-shadow align-center">
<p> No results Found</p>
</div>
<div class="jplist-panel box panel-bottom">
<div
class="jplist-label"
data-type="{start} - {end} of {all}"
data-control-type="pagination-info"
data-control-name="paging"
data-control-action="paging">
</div>
<div
class="jplist-pagination back-top"
data-control-animate-to-top="true"
data-control-type="pagination"
data-control-name="paging"
data-control-action="paging">
</div>
</div>
</div>
</div>
<div class="span3">
<div class="row">
</div>
<div id="sidebar">
<div class="widget">
<h4>Price Filter</h4>
<div class="price-range">
<div id="slider-range"></div>
<p class="clearfix">
<input type="text" id="amount" readonly />
<input type="text" id="amount2" readonly />
</p>
</div>
</div>
<div class="widget">
<h4>BRANDS</h4>
<div id="">
<div class="brands">
<input type='text' id='txtList' onkeyup="searchBrand(this)" placeholder="search brands here....." />
<!-- <ul id="fromList" class="myid"> -->
{{#each products}}
<ul id="fromList" class="myid">
<li> <input type="checkbox" id="{{brand}}" class="brandFilterCheckBox pull-right" align="center"/> <label for="{{brand}}">{{brand}}<label></li>
</ul>
{{/each}}
<!-- </ul> -->
</div>
</div>
</div>
</div>
<div class="widget">
<h4>CATEGORIES</h4>
<div id="accordion">
{{#each categories}}
<h5>{{category_name }}</h5>
<div>
<ul>
{{#each subcategories1}}
<li>{{subcategory_name}}</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featured Products -->
<div class="container" style="margin-top:10px">
<div class="row heading-wrap">
<div class="span12 heading">
<h2>Featured Products <span></span></h2>
</div>
</div>
<div class="row similar_products">
<div id="feat_prod">
{{#each featuredProducts}}
<div class="span3 product">
<figure>
{{#each image}}
{{#if #first}}
<img src="../../../uploads/products/{{../_id}}/{{img}}" alt="">
<div class="overlay">
</div>
{{/if}}
{{/each}}
</figure>
<div class="detail">
<span>₹{{RetailPrice}}</span>
<h4>{{product_name}}</h4>
<span>{{Description}}</span>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<!-- PRODUCT-OFFER -->
<!-- FOOTER -->
{{> shop/footer}}
<script type="text/javascript" src="../../../shop-plugins/js/jplist-pagination.js"></script>
<script src="../../../bootstrap/js/star.min.js"></script>
<script src="../../../shop-plugins/js/jquery.paginate.js"> </script>
<script>
$(function(){
$('#feat_prod').paginate();
});
</script>
<script>
$(document).ready(function(){
$('#products').jplist({
itemsBox: '.list'
,itemPath: '.list-item'
,panelPath: '.jplist-panel'
});
});
</script>
<script>
$('document').ready(function(){
$("#slider-range").slider({change : function(event,ui){
var lowerLimit=$("#amount").val();
var numberLowerLimit=Number(lowerLimit.substring(1,lowerLimit.length));
var upperLimit=$("#amount2").val();
upperLimit=upperLimit.substring(1,upperLimit.length);
var numberUpperLimit=Number(upperLimit.replace("₹",""));
console.log("LOWER LIMIT :"+lowerLimit+" UPPER LIMIT :"+upperLimit);
$(".cost").each(function(){
var rowUnitCost=$(this).text();
var unitCost=Number(rowUnitCost.substring(1,rowUnitCost.length));
if(unitCost<numberLowerLimit || unitCost>numberUpperLimit){
var hiddingBox=$(this).parents(".list-item");
/*hiddingBox.removeClass("list-item").addClass("rafsal-test");*/
hiddingBox.hide();
console.log("Values IN:"+unitCost);
}
else{
var hiddingBox=$(this).parents(".list-item");
if(hiddingBox.attr('id')==undefined || hiddingBox.attr('id')=="undefined"){
hiddingBox=$(this).parents(".rafsal-test");
hiddingBox.addClass("list-item").removeClass("rafsal-test");
}
hiddingBox.show();
console.log("Values OUT:"+unitCost);
}
$('#products').jplist({
itemsBox: '.list' ,
itemPath: '.list-item' ,
panelPath: '.jplist-panel'
});
});
}
});
// Brand Filter
$(".brandFilterCheckBox").on('click',function(){
$(".brand").each(function(){
var hiddingBox=$(this).parents(".list-item");
hiddingBox.removeClass("list-item").addClass("rafsal-test");
hiddingBox.hide();
});
$(".brandFilterCheckBox").each(function(){
if($(this).prop("checked")){
var filterBrand=$(this).attr("id");
$(".brand").each(function(){
var unitBrandName=$(this).text().trim();
if(unitBrandName== filterBrand){
console.log(unitBrandName);
var hiddingBox=$(this).parents(".list-item");
if(hiddingBox.attr('id')==undefined || hiddingBox.attr('id')=="undefined"){
hiddingBox=$(this).parents(".rafsal-test");
hiddingBox.addClass("list-item").removeClass("rafsal-test");
}
hiddingBox.show();
}
});
$('#products').jplist({
itemsBox: '.list' ,
itemPath: '.list-item' ,
panelPath: '.jplist-panel'
});
}
});
})
var textCheck="##";
removeDuplicateBrands()
});
function removeDuplicateBrands(){
var textCheck="##";
$(".brandFilterCheckBox").each(function(){
$(this).attr('id');
if(textCheck.indexOf("##"+$(this).attr('id')+"##")==(-1)){
textCheck=textCheck+$(this).attr('id')+"##";
}
else{
$(this).parent("li").hide();
}
});
}
</script>
<script>
function searchBrand(element) {
var value = $(element).val();
$("#fromList li").each(function () {
if ($(this).text().search(value) > -1) {
$(this).show();
$(this).prevAll('.header').first().show();
} else {
$(this).hide();
}
});
removeDuplicateBrands();
}
</script>
</body>
so i am posting a photo in which my output is there it contains all products of a specified category i need only one product from each sub category of the specified category and the image contains four products of protection category and two sub categories air freshners and Head unit , air freshners contains three products i need to display only one from airfreshner and one from head unit in which we need
In Your Router Code, Edit this section
categories1:function(cb){
Category.find({category_name:req.params.category_name}, cb);
}
Change the above to this
categories1:function(cb){
Category.findOne({category_name:req.params.category_name}, cb);
}
That should solve it for you.
Just like in the question: how can I use Passport without redirecting user to the /signin or /home when he fails his authentication?
To login user has to click on "login" button, a modal will pop up, he fills the data. If he succeeds he is redirected to the homepage. But if he isn't I want to show him the flash message in the same modal without redirecting. It kinda works because if you fail to login and click "login" again the error message will be shown. But I don't want to force users to constantly click it to check what went wrong.
They should fail, see the error, fill in new data and click submit again.
home.server.route.js:
var user = require(__dirroot + '/app/controllers/user.server.controller.js')
var passport = require('passport')
module.exports = function(app) {
var home = require(__dirroot + '/app/controllers/home.server.controller.js')
app.get('/', home.render)
app.route('/home/signin')
.get(user.renderSignin)
.post(passport.authenticate('local', {
successRedirect: '/',
failureRedirect: '/',
failureFlash: true
}))
}
home.server.controller.js:
exports.render = function(req, res) {
res.render('home', {
title: 'erpeg',
messages: req.flash('error') || req.flash('info'),
srvuser: req.user ? req.user : null,
cltuser: JSON.stringify(req.user)
})
}
home.ejs:
<!doctype>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lib/foundation/css/normalize.css">
<link rel="stylesheet" href="lib/foundation/css/foundation.css">
<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="lib/jquery/dist/jquery.min.js"></script>
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>
<a href="/">
<%= title %>
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span>Menu</span>
</a>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<% if (srvuser) { %>
<% if(srvuser.rank == "administrator") { %>
<li>
</li>
<% } %>
<li>
<a href="/profile">
<%= srvuser.fullName %>
</a>
</li>
<li>
wyloguj
</li>
<% } else { %>
<li>
rejestruj
</li>
<li class="active">
zaloguj
</li>
<% } %>
</ul>
</section>
</nav>
<div id="signinModal" class="reveal-modal" data-reveal aria-labelledby="signinTitle" aria-hidden="true" role="dialog">
<% for (var i in messages) { %>
<div data-alert class="alert-box warning">
<p>
<%= messages[i] %>
</p>
×
</div>
<% } %>
<h1 id="signinTitle">logowanie</h1>
<form action="/home/signin", method="post">
<div class="row">
<div class="large-12 columns">
<input type="text" name="username" id="username" placeholder="nazwa użytkownia">
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="password" name="password" id="password" placeholder="password">
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input class="button expand" type="submit" value="zaloguj">
</div>
</div>
</form>
</div>
<script src="lib/modernizr/modernizr.js"></script>
<script src="./lib/foundation/js/foundation.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="/user/user.client.module.js"></script>
<script src="/user/services/authentication.client.service.js"></script>
<script src="/game/game.client.module.js"></script>
<script src="/game/controllers/game.client.controller.js"></script>
<script src="/game/services/game.client.service.js"></script>
<script src="/game/config/game.client.route.js"></script>
<script src="application.js"></script>
</body>
</html>
PS: I had it working with separate pages but since I am changing my template engine from Jade to EJS I thought I will do it more elegantly (inside a modal). Any help?