Search code examples
angularjsrestangular-ui-routerangular-controller

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>


Solution

  • 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.