I'm evaluating the path for some logic in my routes and controllers, and it seems like window.location.pathname works just fine as an alternative to injecting $location for $location.$$path, but I'm not sure if Angular has issues when using window.location that I'm not aware of.
Any problems with using `window.location.pathname'?
I think you can read everything about $location here
$location is an Angular service based on window.location but it has more features and properties to be used.
When should I use $location?
Any time your application needs to react
to a change in the current URL or if you want to change the current
URL in the browser.
So if you are only getting the location you can safely use window.location.pathname cause it's native Javascript but every time you need to interact with the location I would recommend to use $location service
I've discovered that using window.location in a controller does not properly update when ui-sref links are used to transition between states.
If I use $location.path() instead, the url path is properly updated in the controller, so $location is clearly the way to go when using Angular / ui-router.
This is the type of difference I was really looking for when asking the question.
Angular.js is a framework in JS so, that would work perfectly, but my recommendation to you would be, as a matter of principle, if you pick a framework, work within the framework. And use $location, and checkout the $route.
I hope it helps.
Related
I am trying to run angular next to our old angularjs application. Before we try to go the ngUpgrade (a lot of refactoring needed before possible) route I'd like to try and run them independent from each other. I thought I would be able to achieve this by just rendering the tag and the associated script files that get generated (by angular-cli) on the specified routes that I want to upgrade to our new application.
I do this by adding a state to my angular-ui-router. With *param as last url value so all subsequent routes go to the same route.
img-link
But now I have an issue that when I redirect from an angularjs(e.g. /user) route to a new route( e.g. /subscription/2) the application breaks because angular can't resolve the previous route.
I thought this could work if I could intercept the routeChange in angular but can't find a way to do this.
Is this even possible?
In order for angular to intercept and handle routes you need to use an UrlHandlingStrategy. Please check the example here.
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'm structuring a Multi Page App in angular. I have a main app with its ngRoute configured so that the resulting url is something like:
http://localhost:8080/project/main#firstTemplate
http://localhost:8080/project/main#secondTemplate
http://localhost:8080/project/main#thirdTemplate
...
Now I must move to another app in the same project so that the Url is something like:
http://localhost:8080/project/secondary#fourthTemplate
I'm able to achieve this by manipulating the string resulting by $location.absUrl() and pass it to $window.location.href but it's horrible.
Is there a better way to do the same thing?
You should do this by the means of your router. There is a default router in angular, though I would suggest you going with https://github.com/angular-ui/ui-router - as I think it is much better than Angular v1.x defaults.
With that router you can define few states (1 state per each URL), define URL for each state, define views to be displayed in that state, actions on entry/leave etc. Then, you can get access to $state object and its go() method to switch between states - as well as easily have it done automatically on elements by specifying .
I have recently started using ionic framework, it has angular js in it. To navigate between screens, I was using $location.path and it's working great. However, in an example I've downloaded, I saw $state.go being used to redirect to some page. I would like to know the difference between the two.
The $location service is on the angular.js framework out of the box and allow you to manage location object (similar to that in pure javascript).
The $state service is a part of ui-router module and allows you to manage routes in an advanced mode, throughout a state machine management of views.
If you use ui-router, you should prefer to use $state service to manage states/routes because state abstracts the concept of route and you could change the physical routes without changing states.
Besides that, more problems you could have if you run in hashbang mode, in particular in your html links. In this case it's preferable to use ui-sref rather than ng-href (or just href).
In my opinion, you should always think in term of states rather than paths. Obviously you can mix the services if you know what you're doing
Thanks #wilver for answering it.
As I dug deeper into angular and learned different ways of structuring my projects, I got to understand these states and paths better. And yes, I've found states much better than paths.
$state.go, which comes with $stateProvider - a provider by ui-router, will work based on state names. Major difference between previously inbuilt(now you need to include ngRoute) router and states is that "States can have nested states but with router it's not possible. And I suddenly realized that whole of Ionic framework is possible because of this concept - I was able to understand this while working on an angular web app based on ngRoute and ionic app based on ui-router.
Ionic works with app as basic state and all other screens defined as its sub states. That's why you see app.screen1, app.screen2 inside $stateProvider in app.js.
So when you have routes, you use $location.path("<routeUrl>") and
when you have states, you use $state.go("<stateName>")
I use ionic and one of the differences that I have observed but not yet figured out why is that $location.path is much slower than $state.go