Nested routing in AngularJS

In AngularJS , as you know, there is no way to make multi-level routing using regular means, in which reloading the lower levels of routes would not lead to the re-creation of top-level elements. The standard service $routeinitializes the view, the controller, and its scope as a whole each time the page URL changes.

To solve this problem, several third-party solutions have been written, including the well - known ui-router . For a number of reasons, none of the solutions worked for some of my projects, and I wrote my own library, which I present here: angular-route-segment .

What does she allow to do?

Demo here: angular-route-segment.com/src/example
Sources of the example in the example directory on the github.

The library serves as a replacement for the standard service $route. Each route is represented as a hierarchical tree-like chain of segments listed through a point, each of which can be individually configured.

angular.module('app').config(function ($routeSegmentProvider) {
$routeSegmentProvider.
    when('/section1',          's1.home').
    when('/section1/prefs',    's1.prefs').
    when('/section1/:id',      's1.itemInfo.overview').
    when('/section1/:id/edit', 's1.itemInfo.edit').
    when('/section2',          's2').
    segment('s1', {
        templateUrl: 'templates/section1.html',
        controller: MainCtrl}).
    within().
        segment('home', {
            templateUrl: 'templates/section1/home.html'}).
        segment('itemInfo', {
            templateUrl: 'templates/section1/item.html',
            controller: Section1ItemCtrl,
            dependencies: ['id']}).
        within().
            segment('overview', {
                templateUrl: 'templates/section1/item/overview.html'}).
            segment('edit', {
                 templateUrl: 'templates/section1/item/edit.html'}).
            up().
        segment('prefs', {
            templateUrl: 'templates/section1/prefs.html'}).
        up().
    segment('s2', {
        templateUrl: 'templates/section2.html',
        controller: MainCtrl});

It is allowed to use another syntax, without going through the tree:

$routeSegmentProvider.segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl});
$routeSegmentProvider.within('s1').segment('home', {
    templateUrl: 'templates/section1/home.html'});
$routeSegmentProvider.within('s1').segment('itemInfo', {
    templateUrl: 'templates/section1/item.html',
    controller: Section1ItemCtrl,
    dependencies: ['id']});

Using the directive app-view-segment(replacement to the standard one ng-view), the place in the DOM of the page is indicated, where each of the segment levels should be rendered:

index.html

Section 1
Section 2

section1.html (will be loaded into the element div#contents)

Section 1
Section 1 contents.

In that может быть загружен следующий сегмент, и так далее.

Такой подход, в сочетании с некоторыми продвинутыми фичами по конфигурированию, позволяет делать довольно сложные вещи с маршрутизацией в приложении.