In the process of developing a backend rails application that generates an API for consumption by a front end ionic app, I encountered an issue. Despite having experience with Angular, my familiarity with Ionic is limited. The specific problem lies in linking to the show pages of a static resource received from the API.
The index action works smoothly, allowing me to list the resources. However, attempting to link to the show pages results in a blank white screen. Upon inspecting the angular show controller using console logs, I confirmed that the controller is running but fails to link to the page. Below is the configuration setup:
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'tab-search': {
templateUrl: "templates/search.html"
}
}
})
.state('app.gyms', {
url: '/gyms',
views: {
'tab-gyms': {
templateUrl: 'templates/gyms.html',
controller: 'GymsIndexCtrl'
}
}
})
.state('app.gymShow', {
url: "/gyms/:gymId",
views: {
'tab-gyms': {
templates: "templates/gym.html",
controller: 'GymsShowCtrl'
}
}
})
$urlRouterProvider.otherwise('/app/search');
})
controllers
angular.module('myApp.controllers', [])
.controller('GymsIndexCtrl', function($scope, $stateParams, Gyms) {
$scope.gyms = Gyms.index(function(response) {
console.log("from gyms");
console.log(response);
});
})
.controller('GymsShowCtrl', function($scope, $stateParams, Gyms) {
$scope.gym = Gyms.query({id: $stateParams.id}, function(response) {
// this is what's running, and it works
console.log("running");
console.log(response);
});
})
gyms.html
<ion-view view-title="Gyms">
<ion-content>
<h1 class="text-center">Gyms</h1>
<hr class="generic">
<div ng-repeat="gym in gyms">
<div class="list card">
<div class="item item-avatar">
<h2 class="pull-left"><b>{{gym.name}}</b></h2>
<p class="pull-lefft">{{gym.description}}</p>
</div>
<div class="item item-image">
<img src="{{gym.images}}" style="min-height: 200px;">
</div>
<!-- where the linking is. I have tried routes like this, and the
ui.router syntax of ui-sref="app.gymShow({gymId: gym.id})"
neither produce and error, but neither work -->
<a class="item item-icon-left assertive" href="#/app/gyms/{{gym.id}}">
<ion-icon name="person"></ion-icon>
{{gym.reviews_count}} reviews
</a>
</div>
</div>
</ion-content>
</ion-view>
The above code illustrates the set up used, similar to the ionic scaffold example. Despite following the template closely, the issue persists. Hence, I have two questions - how can I successfully link to show pages from an index action in ionic, and can I utilize $routeProvider in Ionic?
Your guidance on either of these queries would be greatly appreciated.