J.P J.P - 6 months ago 32
AngularJS Question

Redirect to other view with controller method and routh

i want when user click on someone user ,show new view for that information.
I have two controlles,first get list of user,and it is work fine,but second controller have function which hava param of users id,but they show blank page.I realy don t know how to redrect view from second controller method.
This is my code:



<html>

<head>
<title>Angular JS Views</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
</head>

<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "app">
<p><a href = "#viewStudents">view Students</a></p>
<p><a href = "#viewStudent">View Student</a></p>
<div ng-view></div>

<script type = "text/ng-template" id = "viewStudents.htm">
<ul ng-repeat="entry in pacijenti">
<li>{{ entry.ime }}</li>
<li>{{entry.prezime}}</li>
<li>{{entry.jmbg}}</li>
<button type="button" ng-click="getP(entry.jmbg)" >
</button>
<a ng-href='#viewStudent' ng-click="myCtrl.getP(entry.jmbg)" >click me</a>
</ul>
</script>

<script type = "text/ng-template" id = "viewStudent.htm">
<ul ng-repeat="entry2 in pac">

<li>{{entry2.dijagnoza}}</li>
<li>{{entry2.bolest}}</li>


<a href="pocetna">link1</a>
</ul>
</script>
</div>


<script>
var app = angular.module("app", ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
$routeProvider.

when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'HomeController'
}).

when('/viewStudent', {
templateUrl: 'viewStudent.htm',
controller: 'myCtrl'
}).

otherwise({
redirectTo: '/viewsStudents'
});
}]);


app.factory('photos', ['$http', function($http) {
return $http.get("http://localhost:8080/mavenproject2/fizijatar/12345/pacijenti")
.success(function(response) {
return response;
})
.error(function(response) {
return response;
});
}]);
app.controller('HomeController', ['$scope', 'photos', function($scope, photos) {
$scope.pacijenti=this;

photos.success(function(response) {
$scope.pacijenti =response;
});

}]);

app.controller('myCtrl', function($scope, $http) {
$scope.pac=this;

$scope.getP=function(jmbg){
$http.get("http://localhost:8080/mavenproject2/fizijatar/12345/pacijenti/"+jmbg+"/pregledi")
.then(function(response) {
$scope.pac = response.data;
}, function(response) {
$scope.pac = "Something went wrong";
});





};
});







</script>

</body>
</html>




Answer

Modify your route to accept a jmbg id:

app.config(['$routeProvider', function($routeProvider) {
             $routeProvider.

             when('/viewStudents', {
                templateUrl: 'viewStudents.htm',
                controller: 'HomeController'
             }).

             when('/viewStudent/:jmbg', {
                templateUrl: 'viewStudent.htm',
                controller: 'myCtrl'
             }).

             otherwise({
                redirectTo: '/viewsStudents'
             });
          }]);

Then in the controller, retrieve the jmbg id:

app.controller('myCtrl', function($scope, $http, $routeParams) { 
             $scope.pac = this;
             $scope.jmbg = $routeParams.jmbg;

              $scope.getP = function(jmbg){
                  $http.get("http://localhost:8080/mavenproject2/fizijatar/12345/pacijenti/"+jmbg+"/pregledi")
                  .then(function(response) {
                      $scope.pac = response.data;
                  }, function(response) {
                      $scope.pac = "Something went wrong";
                  });

            // Call the getP function with the jmbg id
            $scope.getP($scope.jmbg);

              };
         });

The link to open the student view would look like this:

<a ng-href="#viewStudent/{{entry.jmbg}}">click me</a>

Here is a working plunker example: https://plnkr.co/edit/99aDJkuvIDopNoILNFGB?p=preview -- Please note, I removed the photo factory usage, and instead hard coded example data.