I have html json data load on the view, and I want to make it like a book which has single page to be a reasonable amount of text for the screen size then the user will turn the page and see more. How do I make it happen.
controller.js
.controller('bookCtrl',function($scope,$sce){
$scope.book = bookinfo;
//convert html function
$scope.to_trusted = function(html_code) {
return $sce.trustAsHtml(html_code);
}
})
var bookinfo = [
{"content": "<body>\n<div class=\"pgmonospaced pgheader\" xml:space=\"preserve\"><br/>The Project Gutenberg EBook of A Study In Scarlet, by Arthur Conan Doyle<br/><br/>This eBook is for the use of anyone anywhere at no cost and with<br/>almost no restrictions whatsoever.\u00a0 You may copy it, give it away or<br/>re-use it under the terms of the Project Gutenberg License included<br/>with this eBook or online at www.gutenberg.org<br/><br/><br/>Title: A Study In Scarlet<br/><br/>Author: Arthur Conan Doyle<br/><br/>Release Date: July 12, 2008 [EBook #244]<br/>[Last updated: February 17, 2013]<br/><br/>Language: English<br/><br/><br/>*** START OF THIS PROJECT GUTENBERG EBOOK A STUDY IN SCARLET ***<br/><br/><br/><br/><br/>}
]
index.html
<div class="list card">
<ul>
<li ng-repeat="item in book" >
<h6 ng-bind-html="to_trusted(item.content)"></h6>
</li>
</ul>
</div>
You can divide your page content in number of pages. Iterate over that pages and show only one at a time and on click of next/previous button show next/previous page using ng-if/ng-show directives.
Also you can use angular-ui for pagination
Related
So I recently switched to a new distro and moved my page over which uses Hugo. Before on my main page Hugo would render the main page in a list showing the title + date:
Title1 / Date
Title2 / Date
Now it renders as:
Title1 / description
Title2 / description
I've never had to edit the index.html or .xml before Hugo would do all that once I told it to build the page, but below is example of what the source looks like now. So instead of post-stub-title / post-stub-description. I want it to be back to post-stub-title / post-date. If that makes sense. I would rather not edit this by hand every single time.
I also don't remember the previous version of Hugo I was using sadly but now I'm using 4.2.
</li>
<li class="post-stub">
<a href="https://foobar.com/2018/04/16/foo1/">
<h4 class="post-stub-title">Foo1 + Blah</h4>
<p class="post-stub-description">Attempted hugo page</p>
</a>
If any of those Hugo gurus out there knows a way to fix that I would be much obliged.
So I spun up a Debian box which uses 0.18.1 and that fixed the issue. Which I don’t really understand but it works now.
NOTE: My question is identical to the unanswered question: Angular schema SEO.
My question is more of a search engine question than an angular question.
Basically this question asks: do search engine bots hang around your webpage for a second or two while some client-side js library (such as angular) re-constructs the dom and then read the completed dom, as angular does during the compile phases when handling ng-repeat directives.
<div itemscope
itemtype = "http://schema.org/Movie"
>
<span ng-repeat = "movie in movies"
itemprop = "name"
>
{{movie}}
</span>
</div>
So will google bot ever read every itemprop=name for every movie generated by this ng-repeat?
I have found schema validator which, for my site (which is unrelated to the example html above), actually still shows the angular expressions:
...
datePublished {{lvl_project['year']}}
name "{{lvl_project['title']}}"
keywords {{lvl_project['tools'].join(',')}}
...
Furthermore, it did not show the ng-repeat-generated elements.
This seems to me like a strong indicator that the google-bot did not see the angular-generated elements and their values, but there could be more to the issue that I don't know.
I have one search page with some search criteria. From that page I going to some other page and clicking browser back button means the page was refreshing. Actually I page should not be refresh instead on refreshing the page should display with some result with out refreshing.
Kindly give me suggestions.
From you question i understand that you need navigate to some other page without refreshing the page as like google.
But its not done using cache. There are function called pushState() and onpopstate() to make this.
How it will work?
With the function pushState(), we can able to change the url of a page without refreshing the page. And the previous url will automatically added to the history. So we need implement a single page to load the content of the page using ajax based on the url.
The function onpopstate() will be triggered when a url is changed using pushState().
Example:
http://html5.gingerhost.com/
The above page uses the above function. That page consist of 4 links (Home, Seattle, New York, London). When we click on those link a new url will be loaded without refreshing the page.
<title></title>
<ul id="menu" class="clearfix">
<li class="current">Home</li>
<li>Seattle</li>
<li>New York</li>
<li>London</li>
</ul>
<article>
<h1></h1>
<div id="image"></div>
<div id="articletext"></div>
<div class="clear"></div>
</article>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
//Capture the click on the links
$('#menu a').click(function(e) {
href = $(this).attr("href");
// Call a function to load the content based on the url
loadContent(href);
// HISTORY.PUSHSTATE add the url to the history
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
console.log("pathname: "+location.pathname);
// Load the content on clicking back or forward using its url
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT PROVIDED BY content.php
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// output provider by content.php like {"title":"Seattle - Part of a demo for #ProSEO","h1":"Seattle","article #articletext":"<p>Seattle is the northernmost major city in the contiguous United States, and the largest city in the Pacific Northwest and the state of Washington. It is a major seaport situated on a narrow isthmus between Puget Sound (an arm of the Pacific Ocean) and Lake Washington, about 114 miles (183 km) south of the Canada - United States border, and it is named after Chief Sealth \"Seattle\", of the Duwamish and Suquamish native tribes. Seattle is the center of the Seattle-Tacoma-Bellevue metropolitan statistical area--the 15th largest metropolitan area in the United States, and the largest in the northwestern United States.<\/p><p>Seattle is the county seat of King County and is the major economic, cultural and educational center in the region. The 2010 census found that Seattle is home to 608,660 residents within a metropolitan area of some 3.4 million inhabitants. The Port of Seattle, which also operates Seattle-Tacoma International Airport, is a major gateway for trade with Asia and cruises to Alaska, and is the 8th largest port in the United States in terms of container capacity.<\/p>","#image":"<img class=\"thumbnail\" alt=\"\" src=\"seattle.jpg\">"}
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES(values will be set)
$.each(json, function(key, value){
$(key).html(value);
});
});
}
</script>
As like above you can able to render the content and provide a json response and pass it to the jquery and you can able to achieve that.
Some suggestions:
Use session to store search parameters, when user back to search page check if session exist. If exist use that parameters to find data again or load cached query results.
Better options, change form request type from POST to GET method. So when you submit search form, your url looks like:
http://myhost.com/search?q=my+term¶m1=zzz¶m2=¶m3=
Use this url parameters to find data again. This option allow you to share search criteria with other users.
Create the search values to create a unique key e.g. with md5. Then store the result with this key to your caching system ( file, memcached whatever).
So if a user should run the same search again fetch the result directly from cache without bothering the db.
It could look like this:
$sCacheKey = md5(json_encode($this->data));
$result = Cache::read($sCacheKey, 'short');
if ($result === false) {
$result = $this->YourModel->find(conditions etc....);
Cache::write($sCacheKey, $li, 'short');
}
Or do you want to cache your complete rendered page?
I have an app that requires HTML to be pieced together from different APIs. Rather than getting into specifics there, let me just say that we have tried getting away from that many times but in the end the best answer always end up being what we currently have. Hopefully that changes someday but for now it's working great.
Currently, the HTML is parsed together as a string server-side using NodeJS and sent across the wire as complete HTML to be rendered. I'm in the process of adopting AngularJS, and while I'm loving it I am stuck on this issue-- how can I use Angular templating to insert invalid HTML at times?
The server will return three JSON fields: leadingHTML, trailingHTML, and copy. The copy field is always valid HTML, but leadingHTML and trailingHTML can sometimes return invalid HTML. When all three are added together, valid HTML results.
Let me illustrate:
leadingHTML='<figure>';
copy = '<img src="img1.jpg"/><img src="im2.jpg"/><figcaption>I love AngularJS</figcaption>';
trailingHTML='</figure>';
As you can see, if you add those together you will get the valid HTML that is required to be displayed. It's pretty easy to make the fields trustworthy HTML in Angular:
for (i in data.results){
data.results[i].copy=$sce.trustAsHtml(data.results[i].copy);
data.results[i].leadingHTML =$sce.trustAsHtml(data.results[i].leadingHTML );
data.results[i].trailingHTML =$sce.trustAsHtml(data.results[i].trailingHTML );
}
And then render the copy in my view:
<div ng-repeat='i in data.result'>
<p ng-bind-html='i.copy'></p>
</div>
But I need a way that does what this looks like it would do, but the leadingHTML and trailingHTML scope variables get render as strings:
<div ng-repeat='i in data.result'>
{{ i.leadingHTML }}
<p ng-bind-html='i.copy'></p>
{{ i.trailingHTML }}
</div>
Is the best answer here to build the template via javascript? Would that even work?
Are you able to pre-process your data so that you do have valid HTML?
var item;
for (i in data.results){
item = data.results[i];
item.content = $sce.trustAsHtml(item.leadingHTML + item.copy + item.trailingHTML);
}
Then you can just bind to the combined content in the view:
<div ng-repeat='i in data.results'>
<div ng-bind-html='i.content'></div>
</div>
Edit:
Yes, this will allow you to embed expressions in your HTML content.
In fact, you will need to be careful that you aren't opening yourself up to security exploits in the trusted HTML content (see the example at the bottom of the page for the $sce service).
Using $sce.trustAsHtml in this way is roughly equivalent to loading a directive's templateUrl from your site, so the security considerations around that are probably the same. See the "How does it work?" and
"Impact on loading templates".
I'm new to Foundation. I setup a site previously using Foundation 4 and didn't have a problem with the top bar. But now, with Foundation 5, I'm not getting the post-breakpoint (I guess that's how I should describe it) dropdown functionality.
http://www.imdustindavis.com/test/foundation-5-topbar/
Am I missing something?
Thanks!
Modify the code in the title-area to
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- This line needed to display a touch icon on navbar for small screens -->
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
You don't need to do anything else to make it work. The javascript in the Foundation.topbar.js file will automatically create and populate the touch menu for small screens.
Looks to me like you need
<li class="toggle-topbar menu-icon">
<a href="">
<span>Menu</span>
</a>
</li>
Which isn't mentioned in the docs.
However I found your question trying to figure out how to get that to actually do anything. No luck yet.