Overview of getting and setting the URL and parts of the URL using angularjs and/or Javascript
Posted
by
Sandy Good
on Programmers
See other posts from Programmers
or by Sandy Good
Published on 2014-05-27T01:27:23Z
Indexed on
2014/05/27
3:40 UTC
Read the original article
Hit count: 469
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
orhttp:\\www.name.com\Store\StoreID#ItemID
orhttp:\\www.name.com\Store\StoreID?ItemID
orhttp:\\www.name.com\Store#StoreID?ItemID
or- Something else?
© Programmers or respective owner