Navigating through different components in Angular without using templates

Question

Navigating through different components in Angular without using templates

Searching for a straightforward solution using Angular to manage routes.

I have a webpage generated by the server featuring a basic Google map and some logic spread across three separate controllers.

Now, I aim to integrate routing into this setup. Nothing fancy, just simple routing. As I navigate around the map and obtain new coordinates, I want to append them to the current URL as a parameter, like "?position=10.11,50.23". I prefer utilizing history push state with a hashbang backup.

In another section of the application, I wish to monitor changes to this parameter (perhaps using $watch). Additionally, I want to utilize the same code to detect changes when the page is initially loaded.

I previously worked with CanJS where achieving this was very easy, but in Angular, I'm struggling to even take the first step towards the correct outcome :)

PS: This is just a snippet of a minimal use case.

Thank you

javascript angularjs angular-routing

Answer 1

Answer №1

If you're looking to achieve this functionality, Angular routing may not be necessary. In Angular, routing is commonly used to swap out ng-view with different templates (although it has other uses as well).

To meet your requirements, you can utilize the $location service and implement a $watch:

$scope.$watch(function () { return $location.search().position; }, function (newVal) {
  $scope.params = newVal || 'No params';
});

$scope.setParams = function (val) {
  $location.search('position', val);
};

Check out the working demo here

Open the live preview in a new window to observe the parameter changes in the address bar.

Update: The demo on plnkr.co may no longer function due to potential changes in their embedded mode.

Answer 2

If you're looking to achieve this functionality, Angular routing may not be necessary. In Angular, routing is commonly used to swap out ng-view with different templates (although it has other uses as well).

To meet your requirements, you can utilize the $location service and implement a $watch:

$scope.$watch(function () { return $location.search().position; }, function (newVal) {
  $scope.params = newVal || 'No params';
});

$scope.setParams = function (val) {
  $location.search('position', val);
};

Check out the working demo here

Open the live preview in a new window to observe the parameter changes in the address bar.

Update: The demo on plnkr.co may no longer function due to potential changes in their embedded mode.

Answer 3

Answer №2

Unfamiliar with CanJS, but in the realm of Angular, it's just as simple.

Begin by utilizing:

$location.search({parameter1:'someValue', parameter2: 'someOtherValue'})

to adjust your URL -- the history will be automatically updated.

The most sophisticated approach to detect any modifications in the URL is through using one or both of the built-in events: $locationChangeStart and $locationChangeSuccess, like so:

    $scope.$on("$locationChangeStart", function (event, next, current) {
        // your code goes here
    });
    $scope.$on("$locationChangeSuccess", function (event, next, current) {
        // or here (or both if necessary)
    });

To access the search parameters, simply employ $location.search() within one of the aforementioned methods.

Answer 4

Unfamiliar with CanJS, but in the realm of Angular, it's just as simple.

Begin by utilizing:

$location.search({parameter1:'someValue', parameter2: 'someOtherValue'})

to adjust your URL -- the history will be automatically updated.

The most sophisticated approach to detect any modifications in the URL is through using one or both of the built-in events: $locationChangeStart and $locationChangeSuccess, like so:

    $scope.$on("$locationChangeStart", function (event, next, current) {
        // your code goes here
    });
    $scope.$on("$locationChangeSuccess", function (event, next, current) {
        // or here (or both if necessary)
    });

To access the search parameters, simply employ $location.search() within one of the aforementioned methods.

Navigating through different components in Angular without using templates

Answer №1

Answer №2

Similar questions

Adjusting form elements with Javascript

`Troubleshooting a rotation problem with PhysiJS`

Encountering an error of "undefined is not iterable, cannot read property Symbol(Symbol.iterator)"

Stop the duplication of downloading JavaScript files

What is the best way to rate a particular image?

Customizing the language parameter for the apply button script on LinkedIn

How can I set a value using document.getElementById(idPopUPImage).innerHTML to create a static popup in Leaflet?

Utilize the Algolia search-insights library in conjunction with React

What is the best way to retrieve and save the titles of checked boxes in the Autocomplete using state with hooks?

Using Object.freeze does not freeze the elements within an array

Angular.js: Utilizing ng-model for checkboxes

Formik's handleSubmit function seems to be being overlooked and not executed as

Encountering a problem when trying to utilize material-ui icons in a React application

Encountering an issue while trying to utilize the firestorePlugin from vuefire in Vuejs 3 createApp. The problem is that I am receiving an Uncaught TypeError: Cannot set property '$

Persist the data retrieved from an asynchronous function in the memory

What could be the reason for my mongoose model failing to save in mongodb?

Run JavaScript code whenever the table is modified

AngularJS issue - [$compile:multidir] Encountering a problem with multiple directives

Obtaining the date for the previous month using JavaScript or jQuery

FullPage.js combines traditional scrolling with a unique horizontal slider feature