2017-04-02 3 views
1

간단한 SPA를 쓰려고합니다. 평균을 사용합니다.각도 1 - 라우팅 및 API

노드를 통한 API가 모두 작동합니다.

내 메인 컨트롤러

// create the module and name it 
var boardingApp = angular.module('boardingApp', ['ngRoute']); 


boardingApp.config(function($routeProvider) { 


    $routeProvider 

     // route for the home page that lists all tenants 
     .when('/', { 
      templateUrl : 'js/templates/tenants.html', 
      controller : 'tenantsController' 
     }) 
     // route for a specifc tenant 
     .when('/tenant/:id', { 
      templateUrl : 'js/templates/tenant.html', 
      controller : 'tenantController' 
     }) 

}); 

boardingApp.controller('tenantsController', ['$scope','$http','$log', function($scope, $http,$log) { 

     $http.get(URL + "/api/tenants") 
      .then(function(response){ $scope.details = response.data; }); 

}]); 

boardingApp.controller('tenantController', ['$scope','$http','$location','$log', function($scope, $http, $location, $log) { 



     if ($location.search().hasOwnProperty('id')) { 
      var myid = $location.search()['id']; 
      console.log(myid) 

      myURL = URL + "/api/tenants/"+myid 
      console.log(myURL) 

      $http.get(myURL) 
      .then(function(response){ $scope.tenant = response.data; }); 
      console.log($scope.tenant) 
     } 

}]); 

boardingApp.controller('readmeController', function($scope, $http) { 

     $scope.message = "This is the message" 


}); 

루트 경로 작업이 발견 한 API가 테이블을 생성 호출에 경로를 설정했습니다. 해당 템플릿의 모든 좋은

다음 주요 부분은 임차인 ID를 필요로이

<tbody id="tenantsTable"> 
         <tr ng:repeat = "tenant in details | filter : true: tenant.activeTenant "> 
         <td><a ng-href = "#/tenant.html?id={{tenant._id}}" >View</td> 
         <td>{{tenant.roomNumber}} </td> 
         <td>{{tenant.firstName}} </td> 
         <td>{{tenant.lastName}} </td> 
         <td>{{tenant.paymentFrequency}} </td> 
         <td>${{tenant.rentAmount}} </td> 
         <td> {{tenant.leaseEnd | date: 'dd MMM yyyy'}} </td> 
         </tr> 

         </tbody> 
나는 "보기"링크를 클릭을 통해 각 세입자에 대한 DB에서 데이터를 끌어 할

및 API 호출입니다 - 표준 물건.

컨트롤러가 요청을받지 못하고 테넌트 페이지의 링크를 클릭하면 빈 페이지가됩니다.

무엇이 여기에 있습니까? API 호출의 모든 좋은 작업 미세

답변

0

당신 앵커 탭이 잘못, 그것은 또한 당신이 $routeParams.id API 대신를 사용하여 tenantController 내부 경로 매개 변수를 검색해야 "#/tenant/{{tenant._id}}"

ng-href="#/tenant/{{tenant._id}}" 

처럼 정확한 패턴에 있어야합니다 $location.search() 이는 검색어 매개 변수를 찾습니다.

+0

감사합니다. 오랫동안 이것을 보았습니다. $ routeParams를 연구 할 필요가 있습니다. –

+0

@ScottS는 컨트롤러에'$ routeParams'를 주입하고'$ routerParams.id'를 매개 변수 값 ' –