Angular & Ionic - Access to route parameters

Question

I need to get the route parameter in my Ionic app.

This is the app.js file ( the config section ):

.config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider

            .state('categorylist', {
                url: '/',
                templateUrl: 'views/category_list.html'
            })
            .state('category/single',{
                url: '/maps/:category',
                templateUrl: 'views/mappa.html'
            })

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/');
    })

this is the controller that should get the route parameter and show a map with some marker that will fetch from a online json.
In this section I get the current user position and create some markers on the map.

Right now the locations is manually set but in the future it will use the route params to make an API GET request.

How can I access to that params?

.controller('MapsCtrl', function ($scope, $routeParams, $cordovaGeolocation, $ionicPlatform, $ionicLoading) {

        $ionicPlatform.ready(onDeviceReady);

        console.log($routeParams);


        function onDeviceReady() {

            // Mostro la finestra di caricamento
            $ionicLoading.show({
                template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
            });

            var posOptions = {
                enableHighAccuracy: true,
                timeout: 50000,
                maximumAge: 0
            };

            var locations = [
                [1, 'Servizio 1', xxxxxxx, xxxxxxxx, 'Address'],
                [2, 'Servizio 2', xxxxxxx, xxxxxxxx, 'Address']
            ];

            // Recupero la posizione dellutente
            $cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {

                var lat = position.coords.latitude;
                var long = position.coords.longitude;

                // Imposto le coordinate
                var myLatlng = new google.maps.LatLng(lat, long);

                // Impostazioni mappa
                var mapOptions = {
                    center: myLatlng,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControlOptions: {
                        mapTypeIds: []
                    }
                };

                // Creo la mappa
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                // Creo il marker con la posizione corrente dell'utente
                var marker;
                marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    animation: google.maps.Animation.DROP
                });

                marker.setMap(map);


                var infowindow = new google.maps.InfoWindow();

                var marker, i;

                // Imposto sulla mappa tutti i servizi trovati
                for (i = 0; i < locations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
                        map: map
                    });

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {

                            var popupContent = "<h1>" + locations[i][1] + "</h1>" +
                                "<p>" + locations[i][4] + "</p>";

                            infowindow.setContent(popupContent);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }

                $scope.map = map;
                $scope.elencoServizi = locations;
                $ionicLoading.hide();

                console.log($routeParams);

            }, function (err) {
                $ionicLoading.hide();
                console.log(err);
            });
        }
    });

I have included ngRoute but when I try to print out the $routeParams I get an empty object.

Answer 1

To access the parameters in links like xyz/id1/id2, use the following in xyz.page.ts file-

import { ActivatedRoute, Router} from '@angular/router';

..
constructor(private route : ActivatedRoute, private router : Router){}

ngOnInit() {
   this.route.paramMap.subscribe(params => {
      let id1 = params.get('id1');
      let id2 = params.get('id2');
   });
}

Answer 2

Ionic framework routing works on the basis of ui.router, and then you register all the states of your application using $stateProvider.

Where as ngRoute is the another way to create route based SPA, at that time $routeParams service is used to get value of parameter which passed from URL.

You should use $stateParams instead of $routeParams

$stateParmas has all the information about parameter available in URL.