seo Question posted in
Some basic information to get you started with this can be found here.

Ui-Router optional parameters create long not so friendly url – SEO

My ui-router optional parameters create a long not so friendly url, how do I shorten the url while persisting my parameters. I need to be able to share this url over social media, be SEO friendly.

If I remove some of the parameters from my url in my state it still goes through to my view displays the correct data, but on refresh only the data from the parameters that I included in my url is displayed.

My link:

<a class = "xtradetails" ng-click = "vm.detailsClick(car)">VIEW DETAILS</a>

JS:

vm.detailsClick = function (car) {
    vm.detailsdata    = car;
    $state.params.car = car;
    $state.go("cardetails", {
        car          : car,
        stock_id     : car.stock_id,
        make         : car.make,
        year         : car.year,
        mileage      : car.mileage,
        variant      : car.variant,
        selling_price: car.selling_price,
        colour       : car.colour,
        condition    : car.condition,
        branch       : car.branch,
        extras_csv   : car.extras_csv,
        description  : car.description,
        location     : car.location,
        body_type    : car.body_type,
        province     : car.province,
        company_id   : car.company_id,
        url1         : car.url1,
        url2         : car.url2,
        url3         : car.url3,
        url4         : car.url4,
        url5         : car.url5,
        url6         : car.url6,
        url7         : car.url7,
        url8         : car.url8,
        url9         : car.url9,
        url10        : car.url10
    }, {});
};

Here is my state:

.state("cardetails", {
    params     : {
        car          : null,
        make         : null,
        stock_id     : null,
        company_id   : null,
        year         : null,
        selling_price: null,
        mileage      : null,
        variant      : null,
        colour       : null,
        condition    : null,
        branch       : null,
        extras_csv   : null,
        description  : null,
        province     : null,
        contact_tel  : null,
        url1         : null,
        url2         : null,
        url3         : null,
        url4         : null,
        url5         : null,
        url6         : null,
        url7         : null,
        url8         : null,
        url9         : null,
        url10        : null,
        squash       : true
    },
    templateUrl: "partials/cardetails.html",
    url        : "/:make/:stock_id/:year/:selling_price/:mileage/:variant/:colour/:condition/:location/:province/:body_type/:branch/:extras_csv/:description/:url1/:url2/:url3/:url4/:url5/:url6/:url7/:url8/:url9/:url10",
    controller : "Details"
})

My controller:

app.controller('Details', ["$scope", "$stateParams", function ($scope, $stateParams) {
    $scope.car            = $stateParams.car;
    $scope.stock_id       = $stateParams.stock_id;
    $scope.make           = $stateParams.make;
    $scope.year           = $stateParams.year;
    $scope.variant        = $stateParams.variant;
    $scope.mileage        = $stateParams.mileage;
    $scope.colour         = $stateParams.colour;
    $scope.condition      = $stateParams.condition;
    $scope.selling_price  = $stateParams.selling_price;
    $scope.branch         = $stateParams.branch;
    $scope.extras_csv     = $stateParams.extras_csv;
    $scope.description    = $stateParams.description;
    $scope.location       = $stateParams.location;
    $scope.body_type      = $stateParams.body_type;
    $scope.company_id     = $stateParams.company_id;
    $scope.contact_number = $stateParams.contact_number;
    $scope.address        = $stateParams.address;
    $scope.dealer         = $stateParams.dealer;
    $scope.suburb         = $stateParams.suburb;
    $scope.province       = $stateParams.province;
    $scope.contact_tel    = $stateParams.contact_tel;
    $scope.name           = $stateParams.name;
    $scope.url1           = $stateParams.url1;
    $scope.url2           = $stateParams.url2;
    $scope.url3           = $stateParams.url3;
    $scope.url4           = $stateParams.url4;
    $scope.url5           = $stateParams.url5;
    $scope.url6           = $stateParams.url6;
    $scope.url7           = $stateParams.url7;
    $scope.url8           = $stateParams.url8;
    $scope.url9           = $stateParams.url9;
    $scope.url10          = $stateParams.url10;
    $scope.car            = {
        make          : $scope.make,
        stock_id      : $scope.stock_id,
        company_id    : $scope.company_id,
        dealer        : $scope.dealer,
        year          : $scope.year,
        variant       : $scope.variant,
        mileage       : $scope.mileage,
        selling_price : $scope.selling_price,
        colour        : $scope.colour,
        condition     : $scope.condition,
        branch        : $scope.branch,
        extras_csv    : $scope.extras_csv,
        description   : $scope.description,
        location      : $scope.location,
        body_type     : $scope.body_type,
        contact_number: $scope.contact_number,
        address       : $scope.address,
        suburb        : $scope.suburb,
        province      : $scope.province,
        contact_tel   : $scope.contact_tel,
        name          : $scope.name,
        url1          : $scope.url1,
        url2          : $scope.url2,
        url3          : $scope.url3,
        url4          : $scope.url4,
        url5          : $scope.url5,
        url6          : $scope.url6,
        url7          : $scope.url7,
        url8          : $scope.url8,
        url9          : $scope.url9,
        url10         : $scope.url10
    };
}]);
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution that worked for me, show all the details with only the parameters i need in my url, while persisting on refresh. Maybe some else would benefit from this.

    Function:

     vm.detailsClick     = function (car) {
               vm.detailsdata           = car;
               $state.params.car        = car;
               $state.transitionTo("cardetails", {
                   stock_id  : car.stock_id,
                   series    : car.series,
                   make      : car.make,
                   year      : car.year,
                   company_id: car.company_id,
                   selling_price: car.selling_price
               }, {});
           };

    My state:

    .state("cardetails", {
           url        : "/for-sale/used/:company_id/:stock_id/:make/:series/:year/:selling_price",
           params     : {
               car          : null,
               company_id   : null,
               stock_id     : null,
               year         : null,
               make         : null,
               series       : null,
               selling_price: null
           },
           resolve    : {
               car: function ($stateParams) {
                   return {
                       car          : $stateParams.car,
                       stock_id     : $stateParams.stock_id,
                       company_id   : $stateParams.company_id,
                       make         : $stateParams.make,
                       year         : $stateParams.year,
                       series       : $stateParams.series,
                       selling_price: $stateParams.selling_price
                   }
               }
           },
           controller : "Details",
           templateUrl: "partials/cardetails.html"
       })

    My Controller:

    app.controller('Details', ["$scope", "$http", "$stateParams", function ($scope, $http, $stateParams) {
    function detailsFetch(company_id, stock_id, selling_price) {
        var dataUrlBasePath = "you-api-url?select=*";
        $http.get(dataUrlBasePath + "&company_id=eq." + $stateParams.company_id + "&stock_id=eq." + $stateParams.stock_id + "&selling_price=eq." + $stateParams.selling_price).then(function (response) {
            $scope.car = response.data[0];
            console.log($scope.car);
        });
    }

    detailsFetch($stateParams.company_id, $stateParams.stock_id, $stateParams.selling_price);
}]);

  2. 0

    In order for your application to work correctly, you need all of your parameters be to present in the URL. Now if you wish to have a more appealing URL to share on social media, there are several online services for URL shortening that you can use.

    I suggest you use the google URL shortener. For example this question has a relatively long URL:

    https:\stackoverflow.com/questions/46789070/ui-router-optional-parameters-create-long-not-so-friendly-url

    Which becomes after shortening:

    https:\goo.gl/QhQWCz

    NB: please note that I have added inverted slashes to the URLs to avoid having them interpreted as clickable links.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search