A feature-packed routing library for AngularJS which supports tree-like nested routes and loading flow handling.
Example site is located here: http://artch.ru/angular-route-segment/example/.
The sources of this example can be found in the folder 'example'.
You can install the library via Bower:
bower install angular-route-segment
This library is intended to provide the lacking functionality of nested routing to AngularJS applications. It is widely known there are no ways to keep a controller instance alive when only part of it should be updated via routing mechanics -- the
$route service is re-creating the whole scope after a route is changed.
angular-route-segment library gives you a way to handle this.
The library provides two pieces of code:
$routeSegment service and
$routeSegment is meant to be used instead of built-in Angular
$route service. Its provider exposes configuration methods which can be used to traverse the tree of route segments and setup it properly:
Alternatively, you can use this syntax instead of traversing:
app-view-segment tags in the DOM will be populated with the corresponding route segment item. You must provide a segment index as an argument to this directive to make it aware about which segment in the tree it should be linked to.
<li><a href="/section1">Section 1</a></li>
<li><a href="/section2">Section 2</a></li>
<div id="contents" app-view-segment="0"></div>
section1.html: (it will be loaded to
Section 1 contents.
...etc. You can reach any nesting level here.
Please note that you may read the test specs to learn features usage.
A hash object which can be used to set up the service on config stage:
When true, it will resolve
templateUrlautomatically via $http service and put its contents into
When true, all attempts to call
withinmethod on non-existing segments will throw an error (you would usually want this behavior in production). When false, it will transparently create new empty segment (can be useful in isolated tests).
The shorthand for $routeProvider.when() method with specified fully qualified route name.
Route URL, e.g.
Fully qualified route name, e.g.
Adds new segment at current pointer level.
Name of a segment item, e.g.
Segment's parameters hash. The following params are supported:
templateprovides HTML for the given segment view;
templateUrlis a template which should be fetched from the network via this URL;
controlleris attached to the given segment view when compiled and linked, this can be any controller definition AngularJS supports;
dependenciesis an array of route param names which are forcing the view to recreate when changed;
watcheris a $watch-function for recreating the view when its returning value is changed;
resolveis a hash of functions or injectable names which should be resolved prior to instantiating the template and the controller;
untilResolvedis the alternate set of params (e.g.
controller) which should be used before resolving is completed;
resolveFailedis the alternate set of params which should be used if resolving failed.
Traverses into an existing segment, so that subsequent
segment calls will add new segments as its descendants.
An existing segment's name. An optional argument. If undefined, then the last added segment is selected.
Traverses up in the tree.
Traverses to the root.
Fully qualified name of current active route.
An array of segments splitted by each level separately. Each item contains the following properties:
nameis the name of a segment;
paramsis the config params hash of a segment;
localsis a hash which contains resolve results if any;
reloadis a function to reload a segment (restart resolving, reinstantiate a controller, etc)
Helper method for checking whether current route starts with the given string.
Helper method for checking whether current route contains the given string.