Overview of getting and setting the URL and parts of the URL using angularjs and/or Javascript
- by Sandy Good
Getting and Setting the URL, and different parts of the URL are a basic part of Application Design.
For Page Navigation
Deep Linking
Providing a link to the user
Querying Data
Passing information to other pages
Both angularjs and javascript provide ways to get/set the URL and parts of the URL. I'm looking for the following information:
Situation:
Show a simple URL in the browser address bar to the user
Provide a more detailed URL with string parameters to the page that the user will not see. In other words, two different URLs will be used, one simple one that the user sees in the browser, a more detailed one available to the page on load.
Get URL info with PHP when then page intially loads, both don't reload the PHP page when the user needs more detailed info that is already loaded but not displayed yet.
Set the URL with a more detailed URL for deep linking as the user drills down to more specific information.
Get URL info in a controller or JavaSript when angularjs detects a change in the URL with routing.
Hash or Query String or Both? Should I use a hash # in the URL, a string ?= or both?
Here is what I currently know and what I want:
A Query String HTTP:\\www.name.com?mykey=itemID will prevent angularjs from reloading the page. So, I can change the URL by adding/changing the string at the end, thereby providing new info to the page, and keep the page from reloading.
I can change the URL and force a page reload with: window.location.href = "#Store/" + argUserPubId + "?itemID=home";
If home is the itemID string, I want code to simply load the page, and not display more detailed information.
If there is a real itemID in the URL query string, I want the code to display the more detailed information.
Code from angularjs will run either from the controller specified in the routing, or a controller specified in the HTML, or both.
The angularjs code specified in the routing seems to run first, before the code specified in the HTML.
A different URL for the page can be used in angularjs templateURL: than the URL that was sent to the browser address bar.
when('/Store/:StoreId', {
templateUrl: function(params){return 'Client_Pages/Stores.php?storeID=' + params.StoreId;},
controller: 'storeParseData'
}).
The above code detects http:\\www.name.com\Store\StoreID in the browser, but SENDS http:\\www.name.com\Client_Pages/Stores.php?storeID=StoreID to the page.
In the above code, a function is used for the angularjs routing templateURL: to dynamically set the templateURL.
So, when the user clicks something to see details of an item, how should I configure the URL? Should I use angularjs $location or window.location.href ? Should I use a longer URL with more parameters, a hash bang, or a query string? Should I use:
http:\\www.name.com\Store\StoreID\ItemID or
http:\\www.name.com\Store\StoreID#ItemID or
http:\\www.name.com\Store\StoreID?ItemID or
http:\\www.name.com\Store#StoreID?ItemID or
Something else?
