JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<body ng-app="myApp">
    <a ui-sref="test({req: 'a'})">test a</a><br/>
    <a ui-sref="test({req: 'b'})">test b</a><br/>
    <a ui-sref="test({req: 'c', opt: 'here'})">test c and opt</a><br/>
    <a ui-sref="test({req: 'd', opt: undefined})">test d and explicity without opt</a>
    <section ui-view>To be replaced</section>
</body>

JavaScript

angular.module('myApp', ['ui.router'])
    .config(['$stateProvider',

        function ($stateProvider) {
            $stateProvider.state('test', {
                url: '/{req}?opt',
                params: {
                    opt: {value: null, squash: true}
                },
                template: '<h1>req = {{req}}</h1>' +
                		'<h1>opt = {{opt}}</h1>',
                controller: function($scope, $stateParams) {
                	$scope.req = $stateParams.req; 
                    $scope.opt = $stateParams.opt;
            	}
            })
        }])

    .run(['$state', 
    	function ($state) {
    		$state.go('test', {req: 'initial'});
    	}]);