Overview of getting and setting the URL and parts of the URL using angularjs and/or Javascript

Question

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.

• It seems that even though the routing does not reload the browser, the page in the template gets reset to it's default settings. So if I have a class set, change the URL, the class gets set back to the default. I wanted to avoid something like this.

  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?

Answer 1

The search string in the URL can be changed without reloading the page.

reloadOnSearch: false

Must be used in the routing.

myApp.config(['$routeProvider',
  function($routeProvider) {

    $routeProvider.
            //Note that there is both a 'Stores' and a 'Store' singular routing.  Stores plural has no controller.
            when('/Stores', {
            templateUrl: 'Client_Pages/Stores.php'
        }).
            /*This is a little complicated. See notes at top of page: */
            when('/Store/:StoreId', {
            templateUrl: function(params){return 'Client_Pages/Stores.php?storeID=' + params.StoreId;},
            controller: 'storeParseData',
            reloadOnSearch: false
        }).
            when('/Offered', {
            templateUrl: 'Client_Pages/Offered_Menu.php'
        }).
            when('/Items/:CatId', {
            templateUrl: function(params){return 'Client_Pages/Offered_Menu.php?cat=' + params.CatId;},
            controller: 'CommonController',
            reloadOnSearch: false
      }).

Here are all the parts to the complete strategy I'm using:

• Routing URL for page with no search string and no detailed path - used for initial load
• Routing URL with a path change, and a "dummy" search string that reloads page and looks up data with PHP.
• Routing URL with original detailed path plus a search string change created by $location.search('itemID', picID); for more detailed information.
• Code in a controller that runs whenever the page is reloaded. This only runs automatically on the very first page load, and the URL path change, but not the search string change. This "on load" code doesn't run when the URL search string changes. The "on load" code allows a user to paste a link in the browser, and have the code go directly to the detailed information.
• Click event that changes the URL path, but not the search string.
• Click event that changes the search string, but NOT the path, and then runs some code.

Here's how it works:

• User clicks the Main Menu. The page routing loads that page, but no data.
• Once the user is in that page, they choose from lots of choices, the path changes, the page reloads, and the data is retrieved.
• The user looks at the data, and if they want more detailed information, they click something, and the URL search string is changed. (Path stays the same)
• Because the more detailed info was loaded originally, the page doesn't need to be reloaded, and no request to a database needs to be made. The more detailed information is shown using javascript, the "on load" code does not run because of the reloadOnSearch: false setting in the routing.
• When an click event runs from the user requesting more detailed information, the function changes the search string with $location.search('key', 'value') then triggers code to display the details. (Not from the routing controller.)
• If a user pastes a detailed URL with a search string on the end, the entire process happens all at once, and the page loads the details the first time. The PHP runs, the data is retrieved, then when the page loads, the "on load" code loads the details.

If the user is navigating the site themselves, it's a 3 step process

• Page Load
• Category Data Loaded
• Details of individual Item Displayed

If a detailed link with a search string is pasted into the browser, all three steps are done in sequence, and it becomes a one step process.