Как загрузить новую страницу и передать данные из api?

63
10

У меня есть страница со списком команд. При щелчке мне нужен титул и члены этой команды на другой странице. Я просто загрузил команды в список. Код находится здесь:

angular.module('my-app').controller('MainController', function($scope, $http) {
$http.get("http://...").success(function(response) {
$scope.details = response;
});
});

а также

<article ng-app="seed-angular">
<section ng-controller="MainController as mc">
<ul>
<li ng-repeat="x in details">
<a href="/team/team.html">{{x.name}}</a>
</li>
</ul>
</section>
</article>

спросил(а) 2021-01-19T17:18:47+03:00 2 месяца, 3 недели назад
1
Решение
86

Как упоминалось в комментариях Claies, вам нужно использовать маршрутизатор в своем приложении. Из документов:

Маршруты приложений в Angular объявляются через $routeProvider, который является поставщиком услуги $route. Эта услуга позволяет легко подключать контроллеры, просматривать шаблоны и текущее местоположение URL в браузере. Используя эту функцию, мы можем реализовать глубокую привязку, которая позволяет нам использовать историю браузера (назад и вперед) и закладки.

Есть несколько библиотек, в которых вы можете это сделать. Я буду использовать ngRoute в качестве примера, поскольку он поставляется с Angular.js.

Для этого вам нужно добавить angular-route.js и загрузить модуль ngRoute:

var app = angular.module('seed-angular', [
'ngRoute'
]);

Вам также нужно настроить свой $routeProvider для настройки URL-адресов, например:

app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/team', {
templateUrl: 'team-list.html',
controller: 'MainController'
}).
when('/team/:teamId', {
templateUrl: 'team-detail.html',
controller: 'TeamDetailController'
}).
otherwise({
redirectTo: '/team'
});
}
]);

В приведенных выше маршрутах мы настроили /team для team-list.html к странице шаблона team-list.html. Обратите внимание, что <a href=""> теперь передает параметр teamId:

<article>
<section ng-controller="MainController">
<ul>
<li ng-repeat="x in details">
<a href="#/team/{{x._id}}">{{x.name}}</a>
</li>
</ul>
</section>
</article>

Мы также сконфигурировали /team/:teamId для маршрутизации на страницу шаблона страницы team-detail.html (обратите внимание, что :teamId означает, что это параметр):

<article>
<section ng-controller="TeamDetailController">
<a href="#/teams">Back</a>
<div ng-repeat="x in details">
<strong>{{x._id}}</strong>
<ul>
<li>
{{x.firstName}} {{x.lastName}}
</li>
</ul>
</div>
</section>
</article>

В котором вы сможете получить доступ к teamId через $routeParams.teamId чтобы получить сведения о команде:

app.controller('TeamDetailController', function($scope, $http, $routeParams) {
var url = "http://est-teams.estudent.hr/api/teams/" + $routeParams.teamId + "/members";
$http.get(url).success(function(response) {
$scope.details = response;
});
});

См. Эту скрипту для рабочего примера.

ответил(а) 2021-01-19T17:18:47+03:00 2 месяца, 3 недели назад
44

если вы хотите передать данные, вы можете создать сервис и создать функцию, которая хранит или устанавливает ваши данные, а затем вызовите ее в своем первом контроллере, который вызвал данные, и вызовет его снова в вашем следующем контроллере страницы, вот код:

это услуга:

myApp.service('sharedProperties', function() {
var stringValue = 'test string value';
var objectValue = {
data: 'test object value'
};

return {
getString: function() {
return stringValue;
},
setString: function(value) {
stringValue = value;
},
getObject: function() {
return objectValue;
}
};
});

вы можете вызвать его в своем контроллере следующим образом:


myController.controller('UserUpdateController', ['$scope', '$http','sharedProperties',
function($scope, $http, sharedProperties ) {
$scope.updateUser = function() {
.....
id = sharedProperties.getString();

};

}
]);

и установите данные из предыдущей страницы следующим образом:

myController.controller('UserListController', ['$scope', '$http','sharedProperties',
function($scope, $http, sharedProperties) {

$scope.updateUser = function(id){
console.log("from index "+id);
sharedProperties.setString(id);
};

}
]);

ответил(а) 2021-01-19T17:18:47+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема