locked
AngularJS location service RRS feed

  • Question

  • User-436309264 posted

    I am trying to use $location service in Angular JS .However running into problem.

    https://docs.angularjs.org/guide/$location

    Problem:

    I am this page :

    Source : http://localhost:61405/Application/DiagnosticTool/3 ... In this page I have a questionnaire with radiobutton/checkboxes and button "Evaluate".

    On clicking "Evaluate" I want to go Destination page :

    http://localhost:61405/Application/MeasureChecklist/3

    In my angular controller, I use the following code :

    $location.path("/Application/MeasureChecklist/3");

    However, I end up with the following url :

    http://localhost:61405/Application/DiagnosticTool/3#/Application/MeasureChecklist/3

    For some reason , hashtag gets appended Application/DiagnosticTool/3#/Application/MeasureChecklist/3 with the old url and new url.

    I also used

    // $window.location.href = '/Application/MeasureChecklist/3';

    This works but I loose all the values for the questionnaire.

    How do I use $location.path or any other method to avoid full reload and go to the desired URL (./Application/MeasureChecklist/3)

    Thanks,

    Kapil.

    Thursday, March 8, 2018 6:53 PM

All replies

  • User283571144 posted

    Hi Kapils573,

    In my angular controller, I use the following code :

    $location.path("/Application/MeasureChecklist/3")

    However, I end up with the following url :

    http://localhost:61405/Application/DiagnosticTool/3#/Application/MeasureChecklist/3

    From the angular article:

    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.


    What does it not do?
    It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.

    As far as I know, angular has its own route provider.

    If you use the $location.path it will not redirect to another page. It will search the route then call page according to the route.

    Details, you could refer to below article.

    https://www.w3schools.com/angular/angular_routing.asp 

    If you want to redirect to another page.

    You should use $windows.location.herf.

    This works but I loose all the values for the questionnaire.

    I couldn't understand clearly about loose all the values.

    If you want to redirect to another page, it will refresh the page. So the data will lose.

    Do you mean you want to pass the data to another page?

    Best Regards,

    Brando

    Monday, March 12, 2018 9:05 AM
  • User-436309264 posted

    Hi Brando,

    When I use $windows.location.href, I also want to pass the data to another page. However I end up losing the values. Is their a way I use $window.location.href I redirect to another page and also pass the values?

    Thanks,

    Kapils573

    Monday, March 12, 2018 2:48 PM
  • User283571144 posted

    Hi Kapils573,

    As far as I know, if you have two pages,  angular will be loaded separately in page1 and page2 - you can not make javascript connection between them. 

    You could use param page1.html?param=value, cookies, localStorage (2 latest for same domain) to pass data from one page to another page.

    Thats why most angular apps are one page - you may see different paths in url, but this is still just one page (i.e. index.html). In this case you can connect them using angular service, $rootScope (which is actually just another service too) or using params in ui-router.

    More details about how to use localstorage and cookie in angular, you could refer to below codes:

    https://stackoverflow.com/a/18254204/7609093 

    https://stackoverflow.com/a/10985815/7609093 

    Best Regards,

    Brando

    Tuesday, March 13, 2018 7:53 AM