angular 1 - 路由和 api

Question

正在尝试编写一个简单的 SPA。使用平均值。

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 生成一个 table。一切顺利

那么该模板的主要部分就是这个

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

我想单击 "View" link 并通过 API 调用从数据库中为每个租户提取数据，只需要租户 ID - 标准内容。

我的控制器没有收到请求，当我点击 Tennants 页面上的 link 时，它只是空白。

我在这里错过了什么？ api 调用都很好并且工作正常

Answer 1

你的锚标签不正确，它应该是正确的模式，如 "#/tenant/{{tenant._id}}"

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

此外，您应该使用 $routeParams.id API 而不是 $location.search() 来检索 tenantController 中的路由参数，后者将查找查询参数。

angular 1 - 路由和 api

angular 1 - routing and api

angularjs

node.js

routing

angularjs-routing