Angular JS routing with and without param

Issue

I am new with AngularJS. Basically now I have two pages on my side bar.

<div class="menu-list">
        <ul id="menu-content" class="menu-content collapse out">
            <li><a ui-sref="dashboard"> <i class="glyphicon glyphicon-home"></i> Dashboard </a></li>
            <li data-toggle="collapse" data-target="#new" class="collapsed">
                <a ui-sref="status-count"><i class="glyphicon glyphicon-list-alt"></i> Record Count by Branch</a>
            </li>
        </ul>
    </div>

Then I tried to link the page from dashboard to the status-count with

<tr ng-repeat="x in branches">
            <td class="text-center">{{ x.BRANCHCODE +" - "+ x.BRANCHNAME}}</td>
            <td><div class="center-block {{x.AMQ ? 'online-ico': 'offline-ico'}}"> </div></td>
            <td><div class="center-block {{x.SQL ? 'online-ico': 'offline-ico'}}"> </div></td>
            <td><a href="/#/status-count/{{selectedState}}/TSL/{{x.BRANCHCODE}}/"><div class="center-block {{x.SL ? 'online-ico': 'offline-ico'}}"> </div></a></td>
            <td><a href="/#/status-count/{{selectedState}}/REF/{{x.BRANCHCODE}}"><div class="center-block {{x.REF ? 'online-ico': 'offline-ico'}}"></div></a></td>
        </tr>

App.js

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

app.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/dashboard');
        $stateProvider.state('dashboard', {
            url : '/dashboard',
            templateUrl : 'views/dashboard.html',
            controller : 'DashboardController'
        }).state('status-count', {
            url : '/status-count/:param1/:param2/:param3',
            templateUrl : 'views/status-count.html',
            controller : 'RecordCountController'
        });
    });

The linking works fine. However one new issue now is the side bar URL is now set to the last URL I clicked, for example

<a ui-sref="status-count" href="#/status-count/02/REF/1002161"><i class="glyphicon glyphicon-list-alt"></i> Record Count by Branch</a>

The desire outcome is the side bar href should be only #/status-count without the parameters.

Solution

You may skip adding the params to the URL (which will make it visible in the URL), and use params key to define them:

.state('status-count', {
  url : '/status-count',
  templateUrl : 'views/status-count.html',
  controller : 'RecordCountController',
  params: {
    param1: null,
    param2: null,
    param3: null
  }
})

There is only one caveat. You must use ui-sref instead of href in the a tags. But that can be done easily like this:

<a ui-sref="status-count({param1: selectedState, param2: 'TSL', param3: x.BRANCHCODE})"> ... </a>

This way, the params passed won’t be visible in the URL but can be fetched using $stateParams or $transition$.params().

Answered By – 31piy

Answer Checked By – David Goodson (AngularFixing Volunteer)