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: 427

Filed under:
|
|
|

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?

© Programmers or respective owner

Related posts about php

Related posts about angularjs