Search code examples
javascriptangularjsangular-ui-routerurl-routingangularjs-routing

ui-router state url issue

Is here anybody able to help me with ui-router? I don't understand the behavior of URL constructing by ui-route in the nested views. Look at the code bellow. There are thee nested views. If I click [Courses], I see 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 So, what’s wrong with the middle state?

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>'
        })
    ;
});
Solution

  • Your first template should be anchor has href='#' it should be change, you could use ui-sref to create a href dynamically

    Markup

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

    Above ui-sref will create and dynamic url that could have href="#/courses/1"