Пропустить объект через ui-router к контроллеру

Question

Я создаю страницу профиля пользователя, используя угловые/рельсы. Я создал StateProvider используя UI-маршрутизатор, например, так,

$stateProvider 
    .state('friendprofile', { 
    url: '/{name}', 
    views: { 
     "friendProfile": { 
     templateUrl: '../assets/angular-app/templates/_friendProfile.html', 
     controller: 'friendProfileCtrl', 
     } 
    }, 
    }) 

Это защелкивающееся действие из шаблона,

%a.profile{"ui-sref" => "friendprofile(user)"} 
    name: {{ user.name }} 

Обратите внимание, что я передаю user здесь.

Итак, при нажатии ссылки .profile я перехожу к адресу http://localhost:3000/#/Jan%20Jansen. Так что это нормально.

В моей friendProfileCtrl У меня есть функция, которая вызывает службу,

friendProfileService.loadProfile().then(function(response) { 
    $scope.user_profile = response.data; 
    console.log ($scope.user_profile) 
}) 

Который называет эту услугу,

app.factory('friendProfileService', ['$http', function($http) { 
    return { 
    loadProfile: function() { 
     return $http.get('/users/4.json'); 
    } 
    }; 
}]) 

В настоящее время у меня есть обратный адрес users/4/.json жёстко прописанные. Могу ли я получить идентификатор пользователя там? Или мне нужно разрешить его в StateProvider?

Answer 1

Вы можете просто добавить id параметр внутреннего состояния пользователя, чтобы его можно было легко прочитать с $stateParams.

url: '/{id}/{name}', //assuming user object has `id` property which has unique id. 

Таким образом, хотя, сделав Ajax можно непосредственно получить пользователь id от объекта пользователя, прежде чем сделать Ajax.

Контроллер

friendProfileService.loadProfile($stateParams.id).then(function(response) { 
    $scope.user_profile = response.data; 
    console.log ($scope.user_profile) 
}) 

завод

app.factory('friendProfileService', ['$http', '$stateParams', function($http) { 
    return { 
    loadProfile: function(id) { 
     return $http.get('/users/'+ id +'json'); 
    } 
    }; 
}]) 

Answer 2

Вы сказали правильно - вы должны разрешить его перед контроллером нагрузки:

$stateProvider 
    .state('friendprofile', { 
    url: '/{name}', 
    views: { 
     "friendProfile": { 
     templateUrl: '../assets/angular-app/templates/_friendProfile.html', 
     controller: 'friendProfileCtrl', 
     } 
    }, 
    resolve: { 
     user: function($stateParams, friendProfileService) { 
     friendProfileService.loadProfile($stateParams.name); 
     } 
    } 
    }) 

А затем в контроллере вы можете нанести вред кт user переменная, которая не будет обещание, но разрешенные данные уже:

app.controller('friendProfileCtrl', [ 
    '$scope', 
    'user', 
    ... 
    function($scope, user, ...) { 
    $scope.user_profile = user; 
    console.log($scope.user_profile) 
    } 
]); 

Btw значение для ui-sref должно быть что-то вроде этого: friendprofile({name: user})

И не забудьте добавить входной параметр loadProfile функция. Вероятно, вам лучше переименовать параметр {name} в {id}