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

Question

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

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> 

Answer 1

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

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

Есть несколько библиотек, в которых вы можете это сделать. Я буду использовать 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. Обратите внимание, что <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 (обратите внимание, что :teamIdmeans it's a parameter):

<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; 
    }); 
}); 

---

См. Этот fiddle для примера.

Answer 2

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

это услуга:

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); 
     }; 


    } 
]);