Currently, I am facing an issue with passing mongodb data from one state to another using ui-router in my app. The goal is to create a platform where users can view each other's profiles by clicking on them. Although I have successfully retrieved the list of user profiles, when clicked, the individual profile data does not load, resulting in a blank profile.
In my app.js file:
angular.module('MyApp', ['ui.router']).config(function($stateProvider, $urlRouterProvider, $authProvider) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomeCtrl',
templateUrl: 'partials/home.html'
})
// Other states defined here...
Within account.js:
angular.module('MyApp').factory('Account', function($http, $stateParams) {
return {
getProfile: function() {
return $http.get('/api/me/:id');
},
// Further functions defined here...
};
In match.list.html:
<div ng-repeat="user in users">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="well well-sm">
<div class="row">
<h1>{{user.displayName}}</h1>
<a ng-href="#/match/{{user.displayName}}">See {{user.displayName}}!</a>
</div>
</div>
</div>
</div>
The above part works as expected, displaying the list of users. However, the issue arises in match.profile.html when clicking on a user's profile:
<h1>{{user.displayName}}</h1>
<h1>{{user.age}}</h1>
etc...
I suspect that the problem lies within the controller setup in match.js:
angular.module('MyApp')
.controller('matchCtrl', function($scope, toastr, Account) {
// Controller functionality here...
});
The REST API endpoint used in Node.js for retrieving user data:
app.get('/api/me/', function(req, res) {
User.find(function(err, user) {
res.send(user);
});
});
// Additional endpoints defined here...