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