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.
Related
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
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
I was about to start using ngRoute because the ngRouter is all the talk here lately but I started realizing ngInclude is working fine for me and i'm wondering why everyone seems to be using ngRouter instead. They both load templates (or fragments) and I can attach a controller to either or. Is the only benefit to using ngRoute that you can use href to load a template? I don't mind using ng-click and changing a ngInclude value to true. Seems easier to me but i'm sure i'm missing something.
The point of using a router is to assign URLs to pages of your app. So that I can refresh the current page, or send a link to the current page to a friend, or bookmark the current page, and land on that page, instead of landing on the home page of the app.
I am currently rewriting an older version of and application where HTML is mostly generated server-side in angularJS.
Only some parts of the page are not powered by AngularJS while some of client side logic is still plain JavaScript. For URL routing we use UI-router
One of the cases is tabs that are used across all the application. It's current implementation contains above all rewriting location hash like this: myapp_url?foo=bar#1, myapp_url?foo=bar#2 etc.
Note - no slash "/" in hash part.
In my case angular block is in one of the tabs is not visible by default. So when user clicks tabs on a page, URL is changed to smth like myapp_url?foo=bar#TAB_id, which is not understaded by UI router and it redirects the app ( not the whole page but a angular-powered block) part to a 404 state.
Angular UI router relies on Url mask like myapp_url?foo=bar#/my_route - with slash symbol in hash part - so that could be a trigger.
I am asking how/where I could add this kind of check - for angular part whether to act or skip on url change?
I've solved it by creating a state with empty url, which does not interfere with url hash changes by javascript outside angularJS app.
$stateProvider
.state("base.emptyState", {
url: "",
template: '';
})
I have a single page application that really just has one single page. There's just the one view that has lots of javascript/ajax logic done with angularjs, but there's no routing to other views involved.
Therefore I'd like to git rid of the hashbang (#/) at the end of the url. Can I somehow turn off angularjs routing completely?
Btw: I know about Htm5Mode, but I want it to work in all browsers.
If you don't have a $routeProvider defined, there will be no routing, and therefore no hash in your url.