Have a expression error in ui-sref - angularjs

Question

I am working through the ui-router docs. I have a decent feel for what I am trying to do with ui-sref. In the bottom td I am adding ui-sref to the desired href. I made sure to call the state that I want to fire and the brackets are the route Params that I am trying to create.
the problem is though that I am getting Syntax Error: Token '.' is at column {2} of the expression [{3}] starting at [{4}] from the Angular docs.
I made sure to reference some additional info incase I am missing in any part of my code.
<div class="row" >
<div class="panel panel-primary">
<div class="panel-heading">
Customer List
</div>
<div class="panel-body">
Filter: <input type="text" ng-model="customerFilter">
</div>
<table class="table table-striped table-responsive">
<tr>
<th ng-click="ctrl.doSort('name')">Name</th>
<th ng-click="ctrl.doSort('city')">City</th>
<th ng-click="ctrl.doSort('orderTotal')">order total</th>
<th ng-click="ctrl.doSort('joined')">joined</th>
<th> </th>
</tr>
<tr data-ng-repeat = "cust in ctrl.customers |filter: customerFilter| orderBy:ctrl.sortBy:ctrl.reverse">
<td>{{cust.name | uppercase}}</td>
<td>{{cust.city}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined |date}}</td>
<td><a ui-sref="orders({ctrl.cust.id})">View Orders</a></td>
</tr>
</table>
</div>
<span>Total customers: {{ctrl.customers.length}}</span>
</div>
Here is the top part of my controller. I am working with controllerAs and trying to get more used to the John Papa style guide
angular
.module('app.customers')
.controller('CustomerController', CustomerController);
function CustomerController($stateParams) {
var vm = this;
// customerId comes from url param
console.log($stateParams);
var customerId = $stateParams.customerId;
vm.orders = null;
I am getting back an empty object for $stateParams
My route file is broken up as specific as I could make it. I created a view object, created a main view and referenced it in the html. I made a resolve object that will take the $stateParams
angular
.module('app.customers')
.config(config);
function config($stateProvider) {
console.log('customers route')
$stateProvider
.state('customers',{
url:'/customers',
views: {
"main#": {
templateUrl: './components/customers/customers.html',
controller: 'CustomerController',
controllerAs: 'ctrl'
}
},
resolve: {
customerId: ['$stateParams', function($stateParams) {
return $stateParams.customerId;
}]
}
})
};
However, I am just going to the templateUrl I created with no data and the url is not getting the id.
Here is my orders controller
(function() {
'use strict';
angular
.module('app.orders')
.controller('OrdersController', OrdersController);
function OrdersController($stateParams) {
console.log('in orders');
var vm = this;
vm.title = "Customer Orders";
}
}());
This is the route that I set up for orders. I made sure to reference :Id each contact id.
(function() {
'use strict';
angular
.module('app.orders')
.config(config);
function config($stateProvider) {
$stateProvider
.state('orders',{
url:'/orders:customerId',
templateUrl: './components/orders/orders.html',
controller: 'OrdersController',
controllerAs: 'ctrl'
})
// $locationProvider.html5Mode(false);
};
})();

Answer 1

Firstly, state should define the parameter. It could be part of url or params : {} (or both), but at least some...
// params
.state('customers',{
url:'/customers',
params: { customerId : null }
...
// url
.state('customers',{
url:'/customers/:customerId',
...
// url & params
.state('customers',{
url:'/customers/:customerId',
params: { customerId : 1 } // default value
...
Having this, we can create ui-sref like this:
// instead of this
<td><a ui-sref="orders({ctrl.cust.id})">View Orders</a></td>
// we need object with name customerId and its value
<td><a ui-sref="orders({customerId: ctrl.cust.id})">View Orders</a></td>
For more details check this Q & A:
How to pass parameters using ui-sref in ui-router to controller

Answer 2

I think one part of the issue is that ctrl.cust.id should just be cust.id