ui-路由器状态 url 问题

Question

这里有人能帮我 ui-router 吗？我不明白 URL 在嵌套视图中由 ui-route 构建的行为。看看下面的代码。有嵌套的视图。如果我点击 [课程]，我会看到 http://localhost:8080/#/courses URL. That’s correct. But if I click [Course #1] next after that, the URL becomes http://localhost:8080/# . Where is the rest of URL? However, If I click [Lessons] then, URL becomes as it was expected - http://localhost:8080/#/courses/1/lessons 那么，中间状态有什么问题呢？

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>Trial app</title>
    <!-- inject:css -->
    <!-- endinject -->
    <!-- bower:css-->
    <!-- endbower-->
</head>
<body>
<h1>Trial App</h1>
<a ui-sref="courses">[Courses]</a>
<ui-view></ui-view>

<!-- bower:js-->
<script src="lib/bower/angular/angular.js"></script>
<script src="lib/bower/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower-->
<!-- inject:js -->
<script src="js/app.js"></script>
<!-- endinject -->
</body>
</html>

appp.js

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

myApp.controller('CoursesListCtrl', function ($log, $state, $scope) {
    $scope.selectCourse = function (courseId) {
        $state.go('courses.course', {courseId: courseId});
    };
});

myApp.controller('CourseCtrl', function ($log, $state, $scope) {
    $scope.courseId = $state.params.courseId;
});

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('courses', {
            url: '/courses',
            template: '<h2>Courses</h2>' +
            '<a href="#" ng-click="selectCourse(1)">[Course #1]</a><br>' +
            '<ui-view></ui-view>',
            controller: 'CoursesListCtrl'
        })
        .state('courses.course', {
            url: '/{courseId}',
            template: '<h3>Course #{{courseId}}</h3>' +
            '<a ui-sref="courses.course.lessons">[Lessons]</a><br>' +
            '<ui-view></ui-view>',
            controller: 'CourseCtrl'
        })
        .state('courses.course.lessons', {
            url: '/lessons',
            template: '<h3>Lessons</h3>'
        })
    ;
});

Answer 1

你的第一个模板应该是 anchor 有 href='#' 它应该改变，你可以使用 ui-sref 动态地创建一个 href

标记

<a ui-sref="courses.course({courseId: 1})">[Course #1]</a><br>

以上 ui-sref 将创建和动态 url 可能有 href="#/courses/1"

ui-路由器状态 url 问题

ui-router state url issue

javascript

url-routing

angularjs

angularjs-routing

angular-ui-router