Is there any way to switch page, using ons-navigator without ons-template tag?
For example, i have project like this:
--app.js
--index.html
--page1.html
When i describe page1.html into index.html, using ons-template (like this http://codepen.io/onsen/pen/yrhtv) everything is going OK. But if i'am trying to set path into
myNavigator.pushPage('page1.html', { animation : 'slide' } )
without using ons-template my app doesn't work.
You can use <ons-template> without <ons-navigator> but not the other way around. Navigator object is something like Angular routing system and it needs templates in order to send data between pages.
Related
I'm building a site with HTML, CSS, JS (And of course Jquery), VueJS and Bootstrap. I'm wondering if there is a way to make some sort of 'layout' file that can be reused over and over? I don't want to copy paste all the HTML for my top bar every time I make a new page or have to go through every page and update that code. I've tried using the tag with javascript to put different HTML files (Content) inside of a 'layout' file but I've had trouble with formatting. Should I continue down that route? Is there another easier way?
It would be nice if there was a way to do it similar to blazor where you can just write some HTML and then do an #Body.
I ended up making a SPA through the use of Jquery. The index.html file contains my navbar and then the content is put into a "content" div which is populated by separate page.html files. All you have to do is make a page.html file and then go to site.com/#page and the router handles everything else. This code also needs to be run on page load..
$(window).on("hashchange", function ()
{
var page = window.location.hash;
console.log(page.substring(1));
$.get(page.substring(1) + ".html", function (pageContent) {
$("#content").html(pageContent);
});
});
Using NodeJS to build an web app, I am using React and Pug together. I know that Pug is for rendering static content, and React is responsible for rendering dynamic content. I have a page that needs both.
Think about the Instagram web page, it has some static content, but when user scroll down to the bottom, it will load more pictures.
I have a Pug template, which in the end, I included the React script like this:
block scripts
script(src="/component/design-grid.js" type="module")
And I want to trigger my react code by doing(This won't work):
script ReactDOM.render(<DesignGrid mainPage={true} category={"daily"} verified={false}/>, document.getElementById("grid-container"));
What's the standard way to accomplish something like this?
I'm currently having the problem that the javascript related features in my component files breaks when switching to another route in VueJS.
In my Home.vue file, there is a revolution slider system and typed text that were included in the template I purchased. I am trying to implement Vue Router into the template. The template file has all the scripts that require to be included and the is in the content area of the template.
When I switch to some other route and switch back to the Home.vue route, all the javascript related features are broken. The revolution slider doesnt show and the typed text doesnt change anymore. Im assuming that this is because the Home.vue doesnt use the scripts anymore. What's the most optimal way to fix this? Is there some way to like reload the scripts when switching routes?
Im also using Laravel as backend framework.
I opened this template and I found that when I navigate from page to another that a progress bar appear and start to load inside the page itself then disappear and the page appear without the page itself reload like normal using of href tag. The URL become like this
http://localhost/devoops/index.php#ajax/charts_xcharts.html
I want to know only how to load a page like this, what scripts I should use ?. If you gave me just an example or a link to an article that would be enough.
Here is the template please test it to know what I mean as I dont know how to describe that.
devoops template
The magic in this template are made by LoadAjaxContent function on line 1136 on js/devoops.js file.
This function was used to: start on line 3361, menu on line 3400, top menu on line 3466 and search field on the line 3475, all in the same file.
I hope you at least know some knowledge of JQuery which in fact was what was used here.
BTW the link does the rest and all templates are in the ajax folder.
I think what you referred to is so called the partial load or refresh partial views.
There's a lot of frameworks out there can achieve things like this.
Check out AngularJS and a module called ui-router
Basically, say you have a page like this:
http://levi-lu.net/#/about
If I'm using ui-router, http://levi-lu.net is the main view, and the part after hashtag (/about) is a route under this view, switch between routes will only affects part of the page (partial refresh).
I have an application I am trying to set up as a SPA with AngularJS that hooks into a REST API off of our internal SharePoint site. I am having issues with ng-view and getting any of the views to actually load. Both views are setup as ng-template and whenever it tries to find one, it kicks back a 404 Not Found like it's still looking for a separate page.
Here is the plnkr.
I know that none of the data will load because of this coming from an internal SharePoint list, but the views should at least load something to give us an idea of what is going on.
Edit: I cannot actually answer this since my account is too new, but I needed to move the ng-template script blocks inside of the ng-app div so that they would be recognized.
Just so that this doesn't stay as unanswered:
I needed to move the ng-template script blocks inside of the ng-app div so that they would be recognized by Angular and not loaded in the wrong order compared to the DOM.