This is my navbar.html
<ul class="white">
<li>Signup</li>
<li>Create Challange</li>
<li>News Feed</li>
</ul>
This is my app.component.html
<app-navbar></app-navbar>
<router-outlet></router-outlet>
Click on an each menu link its feel as loading an entire page even i run this code in localhost. But, I seen many angular project page is not loading entirely just change that url only.
My question, this problem is arrive from href?
shall I use roouterLink to overcome this issue?
routerLink:
It is a directive in angular2+
Navigates to New Url and the component is rendered in place of routeroutlet without reloading the page
href:
Its an attribute of a tag
html anchor tag attribute to navigate to another page and reload the entire app
In angular you can define different states and then route to/render those states (using ui-sref as compared to href in simple html) without reloading page. Only url gets changes. Read more about ui-router here and here
Check this fiddle for demo code
Related
I have two webpages, one is index.html and the other is shop.html.
I am trying to link from shop.html to a section with the Id of #contact in index.html. They both share the same navbar. They are both in the same folder called "Mobile".
This is the code that I am using.
This is the code for the contact link that is on the navbar shared by both pages, but I am trying to accesss it from the shop.html.
<li>CONTACT</li>
I have managed to get it to work once, but that was only by right clicking and opening the tab in a new window.
I'm not sure if this works, but you can try:
Contact
This will force it upon opening it in a new tab. However, it should be working only doing
Contact
Try this:
<li>CONTACT</li>
By default, your browser should have target="_blank" as shown in the Firefox documentation. It may just be an issue with having your list tags wrapped around the anchor tag. If you post the CSS and HTML you are linking to in index.html, I can make sure this works.
Thanks for the help, turns out it was a jquery smooth scrool animation messing with it.
I have two websites page1 and page2. On every page there is a download form which I can access through the anchor id #DownloadForm.
On page1 I'd like to create a link to the download form on page2. I thought this would work:
But when clicking on this link (in Chrome) it takes me to the download form on page1. As if the anchor expression was evaluated first and then the rest of the href is ignored.
Btw: I'm using Wordpress but I guess that's not relevant here.
If anyone has a hint for me, I'd highly appreciate!
Have you tried the full page uri? I tried this and it worked for me in chrome and firefox.
I have an angular app
<html ng-app='sampApp'>
</html>
I have an anchor link inside the app.
<a href='/user/profile'>Redirect here</a>
But the page is not getting reloaded on clicking the anchor tag. It just makes an ajax call to render the page.
Standard url used in angular start with #, unless you are using html5 model, so the anchor should be
<a href='#/user/profile'>Redirect here</a>
If you want to do full page refresh or page redirect, then you need to stop Angular from intercepting the route. Here is what location developer guide state regarding html link rewriting
Links that contain target element Example: link
Absolute links that go to a different domain.Example: link
Links starting with '/' that lead to a different base path when base is defined Example:link
In my page, I have a site menu using the anchor:
<ul>
<li>Map</li>
<li>Document</li>
</ul>
And in the default.aspx I will check the hash of the current location to load the right value.
However I found that it does not work as expected.
For example, the current page url is http://server/default.aspx
Then I click the doc link, it does not redirect.
But if I change the url to http://server/default.aspx#doc and hit the refresh button, I will be redirected to the document page.
What is the problem?
BTW, this menu is not only used in the page of default.asxp but also other pages. So I can not use the <li>Map</li>.
So I am not using the simple anchor links, I use javascript to determine what content to be loaded by the hash of the location.
the # means that you're linking to somewhere in the page, so the link will never refresh the page at the place the browser will try to find an <a name="what_is_after_the_hash"></a> and take you to it. if you want to refresh the page you'll have to use ? at the place of # and then get your variables as query strings.
I have 3 pages:
By clicking the "filter" button on page1, it takes you to page2. Clicking the "grey buttons" on page2 takes you to page3. Clicking the "red buttons" on page2 take you back to page1.
But during all these transitions, the pages lose their styles.
I tried adding this code on page1, but it didn't seem to work very well:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active :jqmData(role=content)').trigger('create');
});
It seems that When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load).
This means that any scripts and styles referenced the head of a page won't have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP.
So I tried to consolidate the styles, as well referenced the same set of stylesheets and scripts in the head of every page. This fixed the issue.
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
If you r using windows 8 navigation, when you navigate to one page to another, the new page css is loaded, if any css selector have the same name, the new css will be valid. When you back you can lose this styles.
Try to use css namespaces for each page and subpage:
https://www.google.com.br/search?q=css+namespace
I m not sure what logic you have are using to navigate to page2 or page3
you can try changePage function to navigate to different page..
$.mobile.changePage("page2.html", { allowSamePageTransition: true,
transition: "slide", reloadPage: true });
When you use pageChange an Ajax request will be made to that url and it will be loaded only the content inside the div with data-role="page". So everything you have out of this element will be ignored (JS and CSS).