angular uirouter 打开错误url

Question

我是 Angular 1 的新手，必须在现有的网络应用程序上实现一项新功能。该应用程序使用 jhipster 生成后端和前端的某些部分（Angular 1 和 uirouter）。

所以我尝试使用我自己的路线和 state 就像这样，它主要是从 webapp 的现有组件复制和粘贴的：

(function() {
    'use strict';

    angular
        .module('artemisApp')
        .config(stateConfig);

    stateConfig.$inject = ['$stateProvider'];

  function stateConfig($stateProvider) {
    $stateProvider
      .state('model-comparison-exercise-for-course', {
        parent: 'entity',
        url: '/course/{courseid}/model-comparison-exercise',
        data: {
            authorities: ['ROLE_ADMIN', 'ROLE_TA'],
            pageTitle: 'artemisApp.modelComparisonExercise.home.title'
        },
        views: {
            'content@': {
                templateUrl: 'app/entities/model-comparison-exercise/model-comparison-exercise.html',
                controller: 'ModelComparisonExerciseController',
                controllerAs: 'vm'
            }
        },
        resolve: {
            translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
                $translatePartialLoader.addPart('modelComparisonExercise');
                $translatePartialLoader.addPart('exercise');
                $translatePartialLoader.addPart('global');
                return $translate.refresh();
            }],
            courseEntity: ['$stateParams', 'Course', function ($stateParams, Course) {
                return Course.get({id: $stateParams.courseid}).$promise;
            }]
        }
    });
}

})();

然后我尝试用下面的代码打开这条路由：

<a ui-sref="model-comparison-exercise-for-course({courseid:course.id})"
   data-translate="artemisApp.course.modelComparisonExercises"></a>

通过单击 link 会触发一个 http get 请求，其中 returns 一个 http 状态代码 404：http://localhost:8080/app/entities/model-comparison-exercise/model-comparison-exercise.html

其实应该打开的url是http://localhost:8080/#/course/1/model-comparison-exercise

知道我可能配置错了什么吗？

Answer 1

请尝试将 'content@' 更改为 'content@artemisApp'。

正如解释的那样：

The symbol before the @ is the name of the view you want to match, and the symbol after the @ is a reference to the state in which the template the ui-view directive should exist in.

并且 <a> 标签没有被关闭：

<a ui-sref="model-comparison-exercise-for-course({courseid:course.id})"
   data-translate="artemisApp.course.modelComparisonExercises"></a>

通过代码搜索，我发现文件夹 model-comparison-exercise 中不存在 model-comparison-exercise.html。此外 model-comparison-exercises.html 存在

angular uirouter 打开错误url

angular uirouter opens wrong url

javascript

angularjs

angular-ui-router

jhipster