Passing Parameters with AngularJS UI-Router | Nested Views

Angularjs UI-Router is considered as developers first choice when it comes to working with SPA(Single Page Application). Most of the developers are not interested in Advance features of Top JavaScript Frameworks like Angular & React, they just want to use Routing solutions provided by these Frameworks.

UI-Router makes it easier to work with nested Views. I have also written on using Angular UI-Router with Asp.Net Core for handling Nested Views with simplicity.

Another challenge that most of the Developers face is passing parameters when working with Angularjs UI-Router. I think this is as simple as “Hello World”, you just need to understand a few techniques.

Here are some methods of Passing Parameters using AngularJs UI-Router.

Query Parameters

Query Parameters are the parameters send through URL and visible to everyone. e.g.

/users?id=1

In Angularjs UI-Router you need to declare query parameters in your state configuration’s URL template. like this

state('myapp', {
  url: '/users?id=1',
  templateUrl: 'users.html',
  controller: function($scope, $stateParams) {
     $scope.id = $stateParams.id;
  }
})

link for this state will be created like this

<a ui-sref="myapp({ id: 1 })">Query Parameter</a>

& for passing multiple parameters

state('myapp', {
  url: '/users?id&name',
  templateUrl: 'new.html',
  controller: function($scope, $stateParams) {
     $scope.id = $stateParams.id;
     $scope.name = $stateParams.name;
  }
})

Non-URL route parameters

Unlike Query Parameters, Non-URL route parameters are hidden from the URL. Here’s the method of sending these parameters.

state('myapp', {
  url: '/users',
  params: {
    id: null,
  },
  templateUrl: 'users.html',
  controller: function($scope, $stateParams) {
     $scope.id = $stateParams.id;
  }
})

& link for this state will be created like this

ui-sref="myapp({ id: 1 })"

 

Optional Route Parameters

Optional Route parameters can be send using this way

state('myapp', {
  url: '/users/:id',
  templateUrl: 'users.html',
  controller: function($scope, $stateParams) {
     $scope.id = $stateParams.id;
  }
})

& link for this state will be created like this

ui-sref="myapp({ id: 2 })"