When clicking a tab on Twitter Bootstrap, the page jumps down to the tab anchor. I'd like to disable this using the code as shown here:
Twitter Bootstrap Tabs href="#" anchor tag jumping
However I'm using Angular - where would I place this code so that it runs for every bootstrap tab as & when it gets loaded with a new page?
From what I understand, the issue is that ui-router is pushing the anchor into the url, as it thinks it's a change in state, and this is causing the page to jump to the anchor. So I guess I'm asking how to exclude these tabs from ui-router?
Currently I'm using the double-hash solution in the above link, but I'd prefer a cleaner solution which just excludes the tabs from ui-router. Another solution would be to override the action using stateChangeSuccess, but that's also not ideal.
Take a look at UI Router State Change Hooks
Maybe you can tap into the $stateChangeSuccess event and execute the code here. I'm assuming that each tab is a unique state similar to this website AngularJS website with tabs and UI Router. If not you may want to consider designing it in this manner. The code is here Code for AngularJS Tutor website
Related
I'm currently working through the next.js tutorial, but I'm struggling to understand the following:
The tutorial is telling me here, that clicking a <Link> element won't trigger a server request, and instead do "Client-side navigation", i.e. adjusting the page content with js:
The Link component enables client-side navigation between two pages in the same Next.js app. Client-side navigation means that the page transition happens using JavaScript
Three questions right away:
This sounds like regular SPA react routing without next.js etc. to me. But it isn't, right?
The <Link> still works if I disable javascript in Chrome dev tools. This shows that the transition is actually not happening with js. Is this a contradiction to their statement?
When I right click the page and click "view source" (in Chrome) I get different HTML before and after clicking the <Link>. (Contratry to the "regular" react behavior). How can this be considered "Client-side navigation"?
Going further in the tutorial, they tell me here:
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript
This statement sound like a contradiction to the other one quoted above. Can you help me to clarify this? When I click the <Link> what exactly is happening? Is a new html file loaded? If so, how can this happen "client side". Thank you!
Here is how I understand it:
The approach Next.js takes for client-side navigation is a mixture of SPA-style navigation and traditional navigation
In SPA-style navigation, a "link" is a component with some JS logic. It does not have a <a> element. When you click on it, some JS will run to render the new page. If you disable JS then you can't navigate to a new page;
In traditional navigation, a link is really a <a> element. If you click on it, then the browser will discard the current page and load the new page entirely. If you disable JS then you can still navigate to the new page;
In Next.js navigation, a "link" is a component with some JS logic, but it also has this <a> element under the hood. When you click on it, some JS will run to render the new page and prevent the default <a> navigation. So even if you disable JS, you'll still be able to navigate in a traditional fashion through the <a> element. The pre-rendered page will be fetched and loaded. This is really useful in terms of SEO (as crawlers typically don't have JS enabled), and is the main problem Next.js wants to solve.
In short, when JS is enabled, Next.js navigation behaves just like in SPAs; when JS is disabled, it behaves just like in traditional websites.
Update:
I made a video to further demonstrate the concept: https://www.youtube.com/watch?v=D3wVDE9GGVE
There!
I think the main concept that you should be getting familiar with Next.js framework is Server Side Rendering, which basically means that all contents of a page are pre-processed in the server, that ships to the browser the files already rendered, saving resources from the client-side of an application.
By default, all of your Next.js pages are pre-rendered when you use the build command.
Next.js also has its own <Link /> component which uses the next-router module to navigate between the pages.
By default, every <Link /> component in a page tells Next.js to pre-fetch that page and it's resources ( which will also be rendered by the server on the initial request from the browser ) and be "instantly available" when you click it.
I think the main basic difference than a regular SPA is that in those, when you change pages, it takes longer because they won't be already available to you.
AFAIK:
This sounds like regular SPA react routing without next.js etc. to me. But it isn't, right?
Yes. It's like a regular SPA react routing. When user clicks on Link, it will do it in JS just like CRA.
The still works if I disable javascript in Chrome dev tools. This shows that the transition is actually not happening with js. Is this a contradiction to their statement?
This is happening because, if you disable JS, what you get is a simple <a href="..." />. ie, browser will still count it as a anchor element, click events will work as expected because it's just our old HTML.
When I right click the page and click "view source" (in Chrome) I get different HTML before and after clicking the . (Contratry to the "regular" react behavior). How can this be considered "Client-side navigation"?
Your answer lies in the next statement where:
By default, Next.js pre-renders every page. This means that Next.js
generates HTML for each page in advance, instead of having
it all done by client-side JavaScript
ie, when you "View source" browser will hit the server and show you the HTML. Since Next prerenders, it will be different for different pages. This has nothing to do with client navigation. This behaviour of showing browser response in view source can vary from browser to browser though.
If we are using "ui.router" of angular JS module, will that module take control of all the URL navigation in the entire page?
I am using the $stateProvider.state method to register the mappings of URLs and States but as I am using it, I am observing that the state provider is taking control of routing all URL patters. For example, if I am having a jquery tabs pane in the same page somewhere, it is not working. The reason being, the jquery tabs are based on the HREF of the Anchors and this ui-router is taking charge of mapping them as well, to some states.
Can someone please confirm if it really is supposed to work like this?
No, as per I know, it should work fine with HREF,for example
link
In your case, for tabs you are specifying #(hash) in href and thats why its going through ui-router, I would suggest you to use <uib-tab> instead of simple jQuery tabs and thing will work as you needed.
If you are using # in anchor tag then it will always try to match it with url and if not found then it will redirect to defualt one but you can actually intercept url change request in run function and use preventDefault function for specific request which will stop url change request
I've used UI router in the past in single page applications and found it prefect for loading new views and syncing them with the URL. However, I now have a normal multi-page ecommerce site which uses Angular a lot on various pages. Including te search results page.
I need to use ui-router only on this page to do ajax paging. Basically the content is already loaded onto the page and I have an ng-repeat for the results. It's a very simple set up.
What I want to do is change the state/url when the user hits the next/previous buttons and watch the stateParams to look for the new page number, then manually reload the new results and re-bind the ng-repeat to show the new results. Obviously I could load new search results without using ui-router at all but I want the back button to work so that you can go back through the pages.
Now, as far as I can see none of this requires any ui-view tags, or templates or controllers. I simply want to update the URL when a button is clicked and watch for changes. Is this possible with UI-router and if it is then what routes (if any) do I put into $stateProvider config?
Any help would be greatly appreciated.
I'm making a wizard which will help user in creating an item. It's a form with input boxes and dropdowns and a Next button. I'm not sure if it's proper to use ui-router to display next page when Next button is clicked. For now, I'm planning to use ui-router to display succeeding next pages.
How are you going to display the next page if you don't want to use ui-router?
you can use ui-router or normal route provided by angular,ui-router comes with extra and powerful functionality like states and nested viees and all.
Go through this link for more info
What is the difference between angular-route and angular-ui-router?
I have an angular web page in which I also have a twitter bootstrap carousel.
The carousel have arrow buttons to jump to the next/previous image with the following url: http://localhost:8080/#myCarousel
Whenever I click on it, it takes me to http://localhost:8080/#/
I tried removing every angular reference and just building an html static version of the page and it works ok, so I guess that the angular router is handling the url with the #myCarousel fragment.
How can I prevent this from happening?
On clicking the arrows the url changes in the address bar and the router handles the change which is the required behaviour. Use carousel directive from ui-bootstrap to implement the carousel or you can write ur custom function on click of those links
Angular uses # as the prefix for any route handled by it by default. This allows angular routes to be handled as if they are page anchors, and allows the page to update without a new browser request going to the server. Unfortunately, JQuery also uses this technique.
To avoid this conflict, you can change the prefix which is used by angular. From the angular Documentation:
$locationProvider.hashPrefix("!");
This will result in Angular links as /#! rather than /#. You can also optionally enable HTML5Mode, which uses HTML5 Push State to handle URLs without a hash at all, in browsers that support it. You should still consider adding a hash prefix as a fallback, for older browsers.