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
Related
I'm following this blog tutorial to learn nodejs backend along with mongodb, it seems a bit outdated(I've had to tweak some stuff to make it work) but also I'm not following it 100%, as I'm making my own front end instead of using a theme and I'm using my own database, which brings to the problem:
While rendering the post lists I want to render inside each post the list of it's tags, which in my database is an array of strings, but it doesnt work. When I try to access the first element of the array only, it return undefined.
This code doesnt render any <li>:
<div class="row" id="lista-posts">
#each(post in posts)
<div class="col-12">
<h4>{{post.titulo}}</h4>
<ul>
#each(tag in post.tags)
<li>{{tag}}</li>
#endeach
</ul>
<div class="post-conteudo">
{{post.conteudo}}
</div>
</div>
#endeach
</div>
This one here render one <li> (as expected) but it's written Undefined:
(...)
<h4>{{post.titulo}}</h4>
<ul>
<li>{{post.tags[0]}}</li>
</ul>
All the other elements like "titulo" and "conteudo" are rendered fine. For context, every post in my db has:
_id: IdObject
titulo: String
tags: Array of Strings
conteudo: String
Turns out it's because I didn't set up the tags array in my mongoose Schema.
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']);
I'm using a $scope.$apply to trigger the view to update based on a changed variable in the scope. However, I have another line in the html that is an ng-include,
<div data-ng-include data-ng-src="'views/partials/_menubar.html'"></div>
error message
When I remove the ng-include and replace it with a static call there is no error. Here is the template that I'm including as well:
<div class="menu" ng-controller="MenuController">
<div style="display: inline-block">
Hello!
</div>
<ul class="menu_dropdown">
<li class="menu_item">Test1</li>
<li class="menu_item">Test2</li>
<li class="menu_item">Test3</li>
</ul>
</div>
The code for menu controller is
app.controller('MenuController', function($scope) {
});
ng-src is used to allow elements that usually have a src (like anchors or images) to apply the src tag only after angular's digest, not for inclusion of templates in ng-include. See ng-include docs and ng-src docs.
A safe way to specify the src using ng-include would be like this:
<div data-ng-include="src='views/partials/_menubar.html'"></div>
or
<div data-ng-include="'views/partials/_menubar.html'"></div>
If you must have the src separately, it's data-src and not data-ng-src:
<div data-ng-include data-src="'views/partials/_menubar.html'"></div>
see plnkr.
edit: To address your error message.. you'll see that message if you've bound a function to the scope which changes every time it is called.
For example, this will cause such an error:
// controller
$scope.getQuote = function(){
return 'someViewName' + Math.ceil(Math.random() * 10) + '.html';
};
// view
<div data-ng-include="{{getQuote}}"></div>
The problem with ng-include was actually a red herring. The real problem was trying to change the window.history, as seen in the thread here. My guess is because the ng-include directive references $location when it attempts to get resources.
In my Nodejs app,my router is:
app.get('/admin/test',function(req,res){
res.render('./admin/test.jade',{html:'<h1>hello world</h1>'});
})
view test.jade is :
div=html
The result is that I just see:
<h1>hello world</h1>
Not a h1 element.
So what should I do to show the raw html?
Using !{} to give the output parses the HTML:
div
!{html}
I'm new to Orchard and have watched both the Pluralsight "Orchard Fundamentals" and "Advanced Orchard" tutorials. Its a great platform, but I'm having a hard time wrapping my head around a couple of things.
I'd like to create a blog showcase banner on the home page only that rotates blog posts on the site. I have the HTML sliced up and functioning on an HTML template. The banner looks like this:
http://arerra.com/news-slideshow.jpg
So far I have done the following:
I've created a Blog called "Articles" and have placed a single post in there for testing.
Added a Layer called "ArticleList" where I have placed a Widget for "Recent Blog Posts"
I've created a custom layout for the home page called "Layout-Url-HomePage.cshtml" in my theme.
In my Theme "Views" folder, I have created a file called "Widget.Wrapper.cshtml" with only #Display(Model.Child) in it to remove the <article><header/><footer /><article> tags globally from the widgets.
Added a file in "Views > Parts > Blogs.RecentBlogPosts.cshtml" to control the layout of my shape. The code is the following:
#using Orchard.ContentManagement;
#{
IEnumerable<object> blogPosts = Model.ContentItems.ContentItems;
}
#if (blogPosts != null) {
<div class="container news-slider">
<ul class="slide-images">
#foreach (dynamic post in blogPosts) {
string title = post.Title;
ContentItem item = post.ContentItem;
<img src="/Themes/MountainWestHoops/Content/img/placeholder-700x380.jpg" alt="#title" class="active" />
}
</ul>
#foreach (dynamic post in blogPosts) {
string title = post.Title;
string body = post.Body;
ContentItem item = post.ContentItem;
<div class="featured-story threeD active">
<h1>#title</h1>
<p>#body #Html.ItemDisplayLink("READ MORE", item)</p>
</div>
}
<aside>
<ul class="tabs">
#foreach (dynamic post in blogPosts) {
string title = post.Title;
string url = post.Url;
ContentItem item = post.ContentItem;
<li><h3>#title</h3></li>
}
</ul>
<div class="ad-three-day-trial">
<img src="/Themes/Content/img/placeholder-260x190.gif" />
</div>
</aside>
</div>
}
My HTML is rendering properly, but none of the values that I have specified are showing up.
I am using the "Shape Tracer" module to see what template is being used. What is funny, is that the #Html.ItemDisplayLink("READ MORE", item) is rendering the article's URL, and if I replace the "READ MORE" with the string title, the title renders properly.
What am I doing wrong here that is causing strings to not display? Am I missing a larger point and misunderstanding the fundamentals? The tutorials seems to say that you can simply move around parts, but in this case, I need to have very specific markup for this slider to work.
Seems like your source was http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx
That is a rather old post, and the way the title is handled has changed since then.
The DisplayLink works because the only correct property here is post.ContentItem, which is what that API takes. post.Title and post.Body on the other hand are very likely null, which is why you see nothing. To access the title, you can use post.ContentItem.TitlePart.Title and to get the body, post.ContentItem.BodyPart.Text.