injecting children with parameter ui-router - angularjs

Question

i want to inject my children view into a web.
I have declared my config:
var states = [
{
name: 'application',
url: '/application',
component: 'application'
},
{
name: 'application.detail',
url: '/:id',
component: 'applicationInfo'
}
];
// Loop over the state definitions and register them
states.forEach(function(state) {
$stateProvider.state(state);
});
i have a button, which tries? to inject view
<button type="button" ui-sref="application.detail({id: application.id})" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-info-sign">
</i>
</button>
And a component:
angular.module('crudModule').component('applicationInfo', {
template: '<h1>hellllooooooooo</h1>',
controller: function($stateParams) {
}
});
EDITED:
application component:
angular.module('crudModule').component('application', {
templateUrl: 'applicationModule.html',
controller: function($http, $scope, httpService, $cookies, $log, $document, $dialogs) {
httpService.httpGetRequest('http://localhost:8080/applications').then(function success(response) {
$scope.applications = response.data;
$scope.displayedApplications = [].concat($scope.applications);
})
$scope.deleteApplication = function (id) {
$http({
method: 'DELETE',
url: "http://localhost:8080/application/" + id,
}).then(function success(response) {
httpService.httpGetRequest('http://localhost:8080/applications').then(function success(response) {
$scope.applications = response.data;
$scope.displayedApplications = [].concat($scope.applications);
})})
};
}
});
applicationModule html:
<table st-table="applications" st-safe-src="displayedApplications" class="table table-striped" style="width: auto;">
<thead>
<tr>
<th st-sort='id'>Id</th>
<th st-sort='name'>Name</th>
</thead>
<tbody>
<tr ng-repeat="application in applications">
<td>{{application.id}}</td>
<td>{{application.name}}</td>
<td>More info
<button type="button" ui-sref="application.detail({id: application.id})" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-info-sign">
</i>
</button>
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<button class="btn btn-primary" ui-sref="addApplication">Add new</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</div>
I have included application module:
When i click on the button my url changes to /application/(number) but the view does not change.

Answer 1

You need to have in your application component:
<ui-view></ui-view>
Because the router search this to put the content.
Check the oficial documentation for this:
https://ui-router.github.io/ng1/tutorial/hellogalaxy