apache和ui-router有什么问题吗？

Question

我已经尝试了几天，在Angular中以ng-view显示动态内容的不同方法。

最新的尝试是遵循本教程https://ui-router.github.io/ng1/tutorial/hellogalaxy，这是ui-routers自己的教程之一。我调整了名称，因此它适用于我的应用，所有内容都与使用所选项目的ng-view区分开来。

Apache和ui-router是否存在任何问题，或者我做错了什么？我已将我的代码与教程进行了比较，并且我将它与之相同。当我点击该项目时，它会登录控制台。

任何人都可以在我的代码中看到为什么数据没有被加载？ （对类似名称专利和专利的道歉）

var app = angular.module('myApp', ['ui.router']);

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

    var states = [
        {
            name: 'patents',
            url: '/patents',
            component: 'patents',
            resolve: {
                patents: function(patentsService) {
                    return patentsService.fetchAllPatents();
                }
            }
        },
        {
            name: 'patents.patent',
            url: '/{patentId}',
            component: 'patent',
            resolve: {
                patent: function(patents, $stateParams) {
                    return patents.find(function(patent){
                        console.log(patent.id)
                        return patent === $stateParams.patentId;
                    })
                }
            }
        }
    ]

    states.forEach(function(state) {
        $stateProvider.state(state);
    });

}]);

app.run(function($http, $uiRouter) {
  // window['ui-router-visualizer'].visualizer($uiRouter);
  $http.get('http://localhost:8080/Sprint002b/restpatent/', { cache: true });
});

服务

app.service('patentsService', function($http) {

var service = {

    fetchAllPatents: function() {
    return $http.get('http://localhost:8080/Sprint002b/restpatent/', {cache: true}).then(function(resp){
                return resp.data
        });
    }
    // },
    // getPatent: function(id) {
    //     function patentMatchParam(patent) {
    //         console.log(patent)
    //         return patent.id === id;
    //     }

    //     return service.fetchAllPatents().then(function(patents) {
    //         return patents.find(patentMatchParam)
    //     })
    // }
};

return service;

}）;

angular.module('myApp').component('patents', {
  bindings: { patents: '<' },
  template: '   <div class="row">' +
                    '<div class="col-md-12">' +
                        '<table class="table table-bordered table-striped text-md-center">' +
                            '<thead class="thead-inverse">' +
                                '<tr>' +
                                    '<td class="align-middle">Application No. </td>' +
                                    '<td class="align-middle">Client Ref</td>' +
                                    '<td class="align-middle">Cost now</td>' +
                                    '<td class="align-middle">Cost band end</td>' +
                                    '<td class="align-middle">Cost next</td>' +
                                    '<td class="align-middle">Renewal Date</td>' +
                                '</tr>' +
                            '</thead>' +
                            '<tbody>' +
                                '<tr ng-repeat="patent in $ctrl.patents">' +
                                    '<td><a ui-sref="patents.patent({patentId: patent.id})">{{patent.applicationNumber}}</a></td>' +
                                    '<td ng-bind="patent.clientRef"></td>' +
                                    '<td ng-bind="patent.currentRenewalCost">$</td>' +
                                    '<td ng-bind="patent.costBandEndDate"></td>' +
                                    '<td ng-bind="patent.renewalCostNextStage"></td>' +
                                    '<td ng-bind="patent.renewalDueDate"></td>' +
                                '</tr>' +
                            '</tbody>' +
                        '</table>' +
                        '<div ui-view></div>' +
                    '</div>' +
                '</div>' 
});

组件无法加载数据

angular.module('myApp').component('patent', {
  bindings: { patent: '<' },
  template: '<h3>A patent!</h3>' +

            '<div><p>Name: {{$ctrl.patent}}</p></div>' +
            '<div><p>Id: {{$ctrl.patent.id}}</p></div>' +
            '<div><p>Company: {{$ctrl.patent.clientRef}}</p></div>' +

            '<button ui-sref="people">Close</button>'
});

更新

索引

<!doctype html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="styles/normalize.css">
        <link rel="stylesheet" type="text/css" href="styles/style.css">


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

        <!--angular-->

        <base href="/">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>

        <script src="scripts/app.js"></script>
        <script src="scripts/services.js"></script>
        <script src="components/patents.js"></script>
        <script src="components/patent.js"></script>

        <title>Patent Place</title>

    </head>

    <body ng-app="myApp">

        <main class="container">


                    <a ui-sref="patents">Patents</a>


            <ui-view></ui-view>
        </main>
    </body>

</html>