Passing paramter to URL using ui-router

Question

I keep seeing examples on this but I don't know what I am doing wrong.

I load an item and its content into ng-view. When I refresh the page, it disappears. I have passed a parameter to the URL of the state and I am lost what to do next.

People have talked about $stateParams which I can log from my controller and I can see that item with id: 3 has been selected.

How do I keep the view populated with this item even on refresh? An example with my code would be greatly appreciated.

var app = angular.module('myApp', ['ngRoute', 'ui.router']);

app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', '$routeProvider',  function($stateProvider, $locationProvider, $urlRouterProvider, $routeProvider) {

    $urlRouterProvider
        .otherwise('/patents');

    $stateProvider
        .state("patents", {
            url: "/patents",
            templateUrl: "templates/patents/list/list-patents.htm",
            controller: "patentListCtrl",
        })
        .state("patents.item", {
            url: "/:id",
            templateUrl: function() {
              //THIS IS WHERE I AM NOT SURE HOW TO PASS THE URL THE ID
            },
            controller: "patentItemCtrl"
        })
}]);

app.controller('patentItemCtrl', ['$scope', 'patentTabService','$stateParams', '$state', '$routeParams', function($scope, patentTabFactory, $stateParams, $routeParams){

      console.log($stateParams.id)

}])

Possible duplicate: stackoverflow.com/a/24261127/1457231

Pop-A-Stash
– Pop-A-Stash

2017-06-22 16:43:03 +00:00
Commented Jun 22, 2017 at 16:43 — Pop-A-Stash
– Pop-A-Stash, Commented Jun 22, 2017 at 16:43

Umer Z · Accepted Answer · 2017-06-22 18:18:07Z

1

You should be able to to retrieve the required data by making a call your data service and then assign to your view. In your case call patentTabService to get patent with the id and then load that patent object into your view. For example, note I am assuming you already have some way to get a patent by id in your service:

app.controller('patentItemCtrl', ['$scope', 'patentTabService','$stateParams', '$state', '$routeParams', function($scope, patentTabFactory, $stateParams, $routeParams){
      $scope.patent = {};
      if (Number.isInteger($stateParams.id) ){
        $scope.patent = patentTabFactory.getPatent($stateParams.id);
      }
      
      console.log($stateParams.id)
}])

answered Jun 22, 2017 at 18:18

Umer Z

20011 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing paramter to URL using ui-router

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related