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
Related
As far as I understand, AngularJS routing configuration is required if you want to use ng-view for Single Page Application (SPA).
My question: if I am not building SPA, and I dont configure routing, can I still use $routeProvider to get URL parameters?
if you don't want any routing but you want parameters from the url. you could use the dependency, $routeparams. this might be a better solution then using the routeprovider since you don't want to have an actual spa.
No, you can inject the $stateProvier but you can't see any parameters if you don't register any state to navigate between pages.
example: http://embed.plnkr.co/9t3jwYxECN7GV8c3wDSl/
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 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.
I'm wondering whether to use angular UI router or just use simple ng-include, i'm failing to fully understand why would i pick to include entire library over the built-in ng-include which gives me about the same functionality with less code?
Can someone explain whats wrong with
<div ng-if="somestate" ng-include="someview"></div>
Can someone explain whats wrong with
<div ng-if="somestate" ng-include="someview"></div>
It doesn't handle URLs in any way. You want the URL to change when you go to another state, and you want the state to change when the URL changes. You want to be able to bookmark a page in your app, or send its URL by email, and come back to this page rather than the home page when opening the bookmark or the link.
It also doesn't allow resolving data before switching to a state.Both ui-router and ngRoute allow doing that: the state changes only when the data needed to display this state has been successfully loaded.
That's the main job of ui-router and ngRoute. ui-router has many other goodies, like events when changing state, named views, state inheritance (very useful to handle a view consisting of several tabs, for example), etc.
I updated angularjs to 1.2.0-rc1 and added in ng-route as a dependency and added the angular-route.js file. In this build it is now separate.
Clicking on a link for example that has a bookmark href assigned which i used for bootstrap..
href="#collapse1"
Now angularjs is actually trying to change the route to #/collapse1
Is this a bug or am i missing something
Can anyone help?
Is there some additional configuration that i need to do to stop this from happening ?
Expected behavior
The expected behavior is what happens in angular before (i think i was using 1.0.8) ... the link does nothing as far as angularjs is concerned i.e. NO ROUTE CHANGE, of course bootstrap picks does its own thing and shows an accordion in this example.
This angularjs feature.
Use
href="#/#collapse1"
for correct location change.
because i had the same problem. At my point Bootstrap wasn't loaded and so he tried to route this collaps as an route. After i loaded bootstrap manuel to this view, it works fine.
Hope you understand my bad english ;)