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.
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/
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 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 have an index.html with an ng-view within the page at a specific region. I want to make it such that when I click on a button on the page, the ng-view switches to another view, but without having to define a new route or trigger a route change. The following options are what I am thinking:
A main controller around everything. Each region/view would have its own controller (subcontroller1 and subcontroller2). Main controller has the responsiblity of switching views when appropriate without route.
Is this the right train of thinking? Are there any examples of switching just a part of the page?
For the first part of your question : no, you can't partially use ng-view. There is only one ng-view per angularjs app, and the ng-view switches to another view according to the router.
You can load specific part of a page by using ng-switch, so that only part of the DOM are loaded according to the value of the ng-switch : http://docs.angularjs.org/api/ng.directive:ngSwitch
Probably the closest answer to your question is to have look at the ui-router, in order to use nested routing : https://github.com/angular-ui/ui-router
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.