artch / angular-route-segment Goto Github PK

Switching between 's1.someName' and 's2.someName' will not refresh div[app-view-segment="1"].
Try to navigate from
http://angular-route-segment.com/src/example/#/section1/2
to
http://angular-route-segment.com/src/example/#/section2/2
using address bar

This means that as it stands the provided code sample in the project readme is incomplete and will not work without further configuration which is not documented.

The $routeParams don't seem to be populated when the resolve step is being performed. So, inside my resolve function, I can't access these route params. It seems to me the natural use case for the resolve function would be using the route params to resolve/load something? Am I thinking about this wrong?

My scenario: I have a page with an ID in the URL, I want to grab a resource off the server based on that ID before loading the page. So I'm doing this:

$routeSegmentProvider.when('/accept-invite/:token', 'accept-invite')
        .segment('accept-invite', {
            templateUrl: 'partials/signin/accept-invite.tpl.html',
            controller: 'AcceptInviteCtrl',
            resolve: {
                invite: function(Auth, $routeSegment) {
                    return Auth.getInvite($routeSegment.$routeParams.token);
                }
            }
        });

Auth.getInvite() returns an $http.post() promise.

Similar to this issue: #15

Except that here is the condition:

Same url pattern thus same segement, but different parameters.

Since this is the logic that determines whether or not to update the segment, we also need to test if the parameters are different.

Is there any way to determine, that viewSegment content has been loaded?

Thank you!

Hi! Thank you for grate library! But I have a troble.
When we have some segments tree, let's say 's1.infoItem.Z', and controllers attached to every of subsegment, controller of last segment invoked triple times if we open page on '/segment1/2/Z' (not navigate to it from home!). I think it's a bug.
I spend a couple of hours to find the solution and i think i found it. Just comment this two lines in appViewSegment directive:

if ($routeSegment.chain[viewSegmentIndex])
     update($routeSegment.chain[viewSegmentIndex]);

After some tests i suggest that all works fine. Please, explain meaning of this two lines and why after commenting all just works?

I'm using ui-router for few of my projects. angular-route-segment looks something similar. I like the syntaxes! Can you please let us know comparision between this and ui-router?

Great work, Thanks!

Hello!
Maybe a silly question but I can't find the filter you're providing. When I try to use them Im getting Error: [$injector:unpr] Unknown provider: routeSegmentEqualsToFilterProvider <- routeSegmentEqualsToFilter
In my app I have the dependencies: 'route-segment', 'view-segment' what else do I need to include?
Thanks!

When I'm using angular-route-segment, I have this route settings:

$routeSegmentProvider
.when('/item/:id', 'item.edit')

$routeSegmentProvider.segment('item', {
templateUrl: '/html/item.html',
controller: 'item',
dependencies: ['id']
});
$routeSegmentProvider.within('item').segment('edit', {
templateUrl: '/html/edit.html',
controller: 'edit'
});

Then I have a directive like this:
var myDirective = function() {
return function(scope, element, attrs, controller) {
console.log('myDirective');
};
};

this directive be called in edit.html

Then I found the directive function be called twice.

Is there any way to fix it? It's cause a problem when I add some event listener on element in the directive. If it's be call twice, means the event handler be added twice.

I've found that when transitioning between routes like /section1/1 -> /section2/2 (where there is no /section1/2 or /section2/1), I get invalid routes evaluated along the way, like section2/1.

This results in the controller for '1' being called with the controller for section2 as the parent (I think).

Here's a simple plunker showing the issue:
http://plnkr.co/edit/nW3Z0dKHfe1AZhgRAo83?p=preview

In $routeProvider, I would have custom paramters that would define the route access level:

$routeProvider.when({
  templateUrl: 'templateUrl.html',
  controller: 'MyController',
  access_level: ROUTE_ACCESS_LEVELS.ONLY_LOGGED_IN
})

I see in the test spec that you are adding in a custom hash - { test: 'A' }. How would I get the value of custom parameters in a $rootScope onChangeStart event?

Before I was doing

.run(['$rootScope', 'ROUTE_ACCESS_LEVELS', 'userService', function($rootScope, ROUTE_ACCESS_LEVELS)  {
  $rootScope.$on('$routeChangeStart',   function(evt, next, curr) {
    console.log(next.access_level)
    // do stuff with access_level

I can't seem to find the access_level parameter inside evt, next, or curr. Are custom parameters available in angular route segment?

Hi,

I'm fairly new to AngularJS and I am having problems using your library. Here is my code…

app.config(function ($routeSegmentProvider, $routeProvider){

$routeSegmentProvider.options.autoLoadTemplates = true;

$routeSegmentProvider.
    when('/login', 'login');

$routeSegmentProvider.segment('login', {
        templateUrl: 'partials/login.html',
        controller: 'LoginController'
    });
    $routeProvider.otherwise({redirectTo: '/login'});
});

Here's my login.html

<div>
  <form>
  <a href="#">Login with Facebook</a>
  <br/>
  <label>Email:</label>
  <input type="text" ng-model="user.email" placeholder="email" required>
  <br/>
  <label>Password:</label>
  <input type="password" ng-model="user.password" placeholder="password" required>
  <br/>
  <button ng-click="login()"/>Log In!</button>

  <br/>
  <a href="#/signup">Sign Up using Email</a>
</form>
</div>

And I also have a LoginController defined -

app.controller('LoginController', function($scope, $location, UserService) {
//more code in here…
});

This is my index.html

<body>
<div id="contents" app-view-segment="0"></div>
</body>

When I navigate to appName/#/login I don't see anything, but the code in LoginController is getting executed. I can't understand what I'm doing wrong here. Could you please explain?

Good day Artem.
First, thank you for a great component - using it is generally pleasant.

Second, I've encountered the following issue - if you have a segment with watcher function,
like this

.segment('Operators', {
                templateUrl: 'MyView',
                controller: 'MyCtrl',
                watcher: function () {
                      return window.location.hash;
                  }
            })

the watcher doesn't get properly cleaned. This happens under specific conditions, for example, if you go from Group.Operators => Group, i.e. the new chain has less segments and the segment with the watcher was among the segments that should be cleaned.
This causes the watcher to continue existing and trying to call reload on a nonexisting chain segment.

Here is a small app that illustrates this problem https://dl.dropboxusercontent.com/u/9307640/wacher-problem.zip

I've traced it to the following part of code:
route-segment.js

260    if($routeSegment.chain[j]) {
261             $routeSegment.chain[j] = null;
262              updateSegment(j, null);
263         }
...
327        function updateSegment(index, segment) {
328
329            if($routeSegment.chain[index] && $routeSegment.chain[index].clearWatcher) {
330                $routeSegment.chain[index].clearWatcher();
331            }

updateSegment should clean the watcher, but by the time it executes

$routeSegment.chain[j] = null; 

has already removed the reference to that chain segment and the watch is leaked.

Looking forward to a fix.

Hi. This is really great lib. I started to use angular-route-segment for nested views. But I have a problem. When I route to another segment, it calls previous controller. Here is you can see my problem

http://plnkr.co/edit/VUZM1ts5GvLnC2nf6QLe?p=preview

I would be grateful if you have a solution for this.

http://stackoverflow.com/questions/19978291/angular-route-segment-calls-previous-controllers

Good day again, Artem.

We have a nested route where we only want to load segments after the first if the first one successfully loaded data. We are using resolve:{...} in the route and in the template of first segment:

<div ng-if="group"> 
     <div app-view-segment="1"></div>
</div>

It doesn't work - the element gets added to the DOM, but the segment doesn't show up inside it.

We found a workaround like this

    <script type="text/ng-template" id="app-view-segment1.html">
         <div app-view-segment="1"></div>
    </script>

   <div ng-if="group"> 
        <div class="span10 early-full-width">
              <div ng-include=" 'app-view-segment1.html' "></div>
       </div>
    </div>

but since this looks like a bug - maybe a permanent fix is in order.

Since angular-route is a dependency this should be listed explicitly in bower.json. Took me a while to figure out why it wasn't working & expecting new users to figure this out for themselves is definitely not user-friendly.

Good day, @artch !

I want to change location before template is fired.

So I get authorization status via resolve via $http and do $location.path('/login') in controller. But template is fired before location changed instead.

Can you help me please?

This is supposed to get triggered on $location.search. Added the following line :

$rootScope.$on('$locationChangeSuccess', 
       function(){$rootScope.$broadcast('$routeUpdate',$route.current);}
);

as a quick fix based on the logic from angular-route : http://code.angularjs.org/1.2.0rc1/angular-route.js

I would like to be able to mix classical angular views with app-view-segment views; however, when I transition from a segment view to a normal view, the segment view remains.

Setup is as follows:

$routeSegmentProvider
    .when('/segment', 's1.home')
    .segment('s1', {
        template: 's1:<div app-view-segment="1"></div>'
    })
    .within().segment('home', {template: 'home'});
$routeProvider
    .when('/', { template: 'no segment'})

index.html contains:

<div app-view-segment="0"></div>
<div ng-view=""></div>

Plunkr - click "to segment" and then "to root"; the segment view remains.

ng-view cleans up after itself if there is no template (and even removes the element via transclusion); app-view-segment should do the same thing.

This is my current workaround:

app.run(function($rootScope, $routeSegment) {
    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        var segmentsOn = false, segmentsOff = false, inPrev = false, inCurrent = false;
        if (previous != null) {
            inPrev = 'segment' in previous;
            inCurrent = 'segment' in current;
        }
        segmentsOff = inPrev && !inCurrent;
        segmentsOn = inCurrent && !inPrev;
        if (segmentsOff || segmentsOn) {
            $rootScope.$broadcast('routeSegmentChange', {
                index: 0, segment: segmentsOff ? null : $routeSegment.chain[0]
            });
        }
    });
});

I get TypeError: Cannot read property 'productbacklog' of undefined when routes are defined separately in 2 modules, projects and productbacklog:

angular.module('projects', ['productbacklog'])

.config(['$routeSegmentProvider', function ($routeSegmentProvider) {
    $routeSegmentProvider.when('/projects', 'projects');
    $routeSegmentProvider.segment('projects', {
        templateUrl:'projects/projects-list.tpl.html'
    });
}]);

angular.module('productbacklog', [])
.config(['$routeSegmentProvider', function($routeSegmentProvider){
$routeSegmentProvider.when('/projects/:projectId/productbacklog', 'projects.productbacklog.list');
$routeSegmentProvider.within('projects').within('productbacklog').segment('list', {
templateUrl: "projects/productbacklog/productbacklog-list.tpl.html"
});
}]);

But if I define both routes in projects module then it work:

angular.module('projects', ['productbacklog'])

.config(['$routeSegmentProvider', function ($routeSegmentProvider) {
    $routeSegmentProvider.when('/projects', 'projects');
    $routeSegmentProvider.segment('projects', {
        templateUrl:'projects/projects-list.tpl.html'
    });

    $routeSegmentProvider.when('/projects/:projectId/productbacklog', 'projects.productbacklog.list');
    $routeSegmentProvider.within('projects').within('productbacklog').segment('list', {
        templateUrl: "projects/productbacklog/productbacklog-list.tpl.html"
    });
}]);

Hi,
I'm fairly new to this lib, and in app.js I was trying to change from:

function MainCtrl($scope, $routeSegment, loader) {
$scope.$routeSegment = $routeSegment;
$scope.loader = loader;
$scope.$on('routeSegmentChange', function() {
loader.show = false;
})
}

to:

app.controller('MainCtrl', ['$scope', '$routeSegment', 'loader', function($scope, $routeSegment, loader) {
$scope.$routeSegment = $routeSegment;
$scope.loader = loader;
$scope.$on('routeSegmentChange', function() {
loader.show = false;
})
}]);

however, it doesn't seems working, can you help me look at the code and tell me where I did wrong? I've been googling and looking at documentations but no luck...
Thanks!

Hi there,

congrats for this incredibly useful plugin. I was wondering the following.
If I create the routes and the view segments dynamically without knowing the levels of the tree is it possible to make the app-view-segment index value dynamic?

Thanks a lot!

I had to revert to version 1.2.21 of angular-route because the example site gave the following error when run locally against 1.3.0:

Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
http://errors.angularjs.org/1.3.0-build.2959+sha.aa7dbf0/ng/areq?p0=MainCtrl&p1=not%20a%20function%2C%20got%20undefined
    at http://localhost:54328/bower_components/angular/angular.js:78:12
    at assertArg (http://localhost:54328/bower_components/angular/angular.js:1570:11)
    at assertArgFn (http://localhost:54328/bower_components/angular/angular.js:1580:3)
    at http://localhost:54328/bower_components/angular/angular.js:7448:9
    at http://localhost:54328/bower_components/angular/angular.js:6791:34
    at forEach (http://localhost:54328/bower_components/angular/angular.js:334:20)
    at nodeLinkFn (http://localhost:54328/bower_components/angular/angular.js:6778:11)
    at compositeLinkFn (http://localhost:54328/bower_components/angular/angular.js:6216:13)
    at compositeLinkFn (http://localhost:54328/bower_components/angular/angular.js:6219:13)
    at compositeLinkFn (http://localhost:54328/bower_components/angular/angular.js:6219:13)

I've got a code which works perfectly

$routeProvider.when('/',{
        access: access.user
        ,someKey:{ss:"dd"}
    });

and when I need a check

app.run(['$rootScope', '$location', 'Auth', '$log' function ($rootScope, $location, Auth, $log ) {
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
        if (!Auth.authorize(next.access)) {    //<<<--whith segment here occures an Error

            if(Auth.isLoggedIn()) {

            } else {

            }
        } else {

        } 
    });
}]);

all works well.
I mean, that there is "next.access" exists which a set above.

But, with segments its not works if

$routeSegmentProvider
        .when('/', 'mainRoot')
        .segment('mainRoot',{
            controller: 'mainRootCtrl'
            ,access: access.user
        })

How Can I solve this problem?

On the demo site it says that you can navigate through sections without them losing state. I've tried it out and but when I change sections (e.g. from Section 1 to Section 2 and back to Section 1) all state is lost.

Any ideas?

One of the things that always frustrated me about ngRoute was that I ended up hardcoding paths in my codebase. While this may be less typing initially, in the long run it leads to code that requires more work to maintain and integrate into other projects.

Coming from the Django world, where a Django project is made up of features modules, each describing their own url routes I became used to the concept of giving each route a shortname. Throughout my codebase (both project and the feature module) I would then build a url based on the short name and some parameters.

Fast forward to AngularJs, I created angular-named-routes. This works fine if you're only use ngRoutes, however I would like to utilise the nested view functionality of angular-route-segment.

Which leads me to my current situation: route-segment only exposes the first level of routes to ngRoute which means ngRoute has no idea what the path for a second level route might be.

I've created a gist with an attempt to illustrate the use case and some the start of a service that helps reverse a segment name into the full path:

https://gist.github.com/airtonix/9835196

i need to re-render a section depending on the result of a method.. for ex:

if (refreshDashboard() == true)
{
$scope.$routeSegment.reload();
}

can it be done? thanks!

Good day! It seems that $route.$reload doesn't work in a segment - page doesn't reload. Is it correct?

In $routeProvider, I can use caseInsensitiveMatch to set ignore case.
But in $routeSegmentProvider, how can I do it?

When I navigate to the root segment with default sub-segment and pre-defined parameters I get

Error: Route param `what` is not specified for route `/browse/:what`

Segment:

.segment('browse', {
     default: true,
     dependencies: ['what'],
     templateUrl: 'views/list.html',
     controller: 'FileListCtrl',
     params: {what: 'root'}

Controller

.controller('FileListCtrl', [
    '$scope', '$routeSegment',
    function ($scope, $routeSegment) {
       $routeSegment.$routeParams.what; // undefined

Target url: http://host/browse

Yeah, I'll add a demo, but not right now. Anyway, the bug exists and it is easy reproducible.

Example: http://plnkr.co/edit/5tqVwC

Explain

When you run this plnkr, in the "resolver" service, $routeSegment.name is empty. (You can check the console).

However, I can still access the segment data in the .chain property. Is this a normal behavior?

Example: http://plnkr.co/edit/5tqVwC

Question 1:

The example showed how redirection in resolve function will affect template and controller. When using route-segment, redirection in before resolve resolved is temporary. Once the resolve finish, original controller and template (OneCtrl and template-one) will be loaded back into <div app-view-segment></div> and keeping url with #/three.

On the other hand, ngRoute will not load OneCtrl and its template back into ng-view after redirection.

Question 2:

The example did not illustrate this problem.

But if I'm using a service name as resolve, the service function will be executed every time I route to that address. Not like in ngRoute, only function resolver will be executed every time, service resolver will only be executed once, which is the right behavior of a service.

Question 3:

Will this module support the new controllerAs syntax?

I really love this nested view module, especially the untilResolve option. Thank you in advance.

$routeSegment should be resolved before rendering, other way it will break the router.

file: view-segment.js

$timeout(function(){
  if($routeSegment.chain[viewSegmentIndex])
    update($routeSegment.chain[viewSegmentIndex]);
});

Hi,
It would be very nice if you add some reverse functions.
I created something similar in my last project. And it looks like this one.

1. resolve - service, which have 2 methods. href and hash.

   > resolve.href( "route.name", [arg1, arg2] ) 
   /route/name/arg1/arg2/
   > resolve.hash( "route.name", [arg1, arg2] ) 
   #!/route/name/arg1/arg2/
   

2. url - filter.

   {{ "route.name" | ulr: [arg1, arg2] }}
   returns resolve.hash( "route.name", [arg1, arg2] )
   

3. redirectTo service

   redirectTo( "route.name", [arg1, arg2] )
   returns $location.path(resolve.href( "route.name", [arg1, arg2] ))
   

make sense?

Good day!

It seems that nothing happens when I change location from #/ to #/?favorite=1.
Can I tell angular-route-segment to watch this and to reload the route?

Thanks.

Awesome control! The example website is a godsend for me. I do have one question... how would one go about maintaining the navigation on the individual sections (i.e.: the top level navigation)? For instance, if I am in section 1 and I navigate to one of items... Then go to section 2 and back to section 1... my section 1 navigation is reset again. Any recommendations for handling this?

related to #38 and #34
For references, I present an implementation of a simpler named routes module I've created before discovering angular-route-segment

Key points:

• service must be created as a provider so you have access to provider objects
• store hashPrefix if html5Mode is true
  https://github.com/airtonix/angular-named-routes/blob/master/src/lib/named-routes.coffee#L21
• generate url and prefix it
  https://github.com/airtonix/angular-named-routes/blob/master/src/lib/named-routes.coffee#L64

Apparently in newer versions of angular the hash prefix is implied when html5mode is false

• airtonix/angular-named-routes#15
• http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting/16678065#16678065

Segment definition

.segment('browse', {
     default: true,
     dependencies: ['what'],
     templateUrl: 'views/list.html',
     controller: 'FileListCtrl',
     params: {what: 'root'}

When I navigate directly to http://host/browse/home, I get the listing not from home, but from root instead.

Checked with release 1.3.0

Приветствую!

Этот пакет предоставляется с minified-версией. Мало того, bower использует именно ее.

По соему опыту обычно подключается полная версия. Почему тут иначе? Спасибо.

It will be great if someone implement rails-style routing (http://guides.rubyonrails.org/routing.html)

Good day, @artch ! Thanks for your work!

It seems that templateUrl doesn't work if options.autoLoadTemplates is false.

Test Case:

• Download this repo's demo.
• It works.
• Set options.autoLoadTemplates to false here.
• It doesn't work (element marked by app-view-segment="0" is untouched).

What do you think? Thanks. P.S. Я русский.

$routeProvider has an .otherwise() method.
I can't found similar feature here.
How can I provide otherwise route?

demo site open error

Example: http://plnkr.co/edit/yAbDMn

Illustration:

After you load the plunker, click to /home/project link, you will see ProjectCtrl have inputs in console twice.

Hello!
Thank you for this great extension!
I just cloned this repo and launched the example and Im getting this error on Chrome only (Error is not happening on your hosted example)

TypeError: Cannot read property 'name' of null
    at Object.q.contains (http://0.0.0.0:9001/build/angular-route-segment.min.js:7:2870)
    at Object.value (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:8522:19)
    at extend.literal (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:8573:41)
    at Object.Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:9953:28)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:14799:36
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:4464:13
    at Object.Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:9953:28)
    at Object.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:9809:23)
    at Object.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:10039:24)
    at HTMLHtmlElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js:7613:22) angular.js:7818

Not sure what it is and how can I solve this

I'm have the follow structure:

$routeSegmentProvider
        .when('/login', 'login')    
        .when('/users', 'base.users')

        .segment('login', {
            templateUrl:  '/login/login.html',
            controller: 'LoginCtrl', 
            permissions : {
                login: false,
                profiles: [profiles.public]
            }
        })

        // Use this for not reload the UI
        .segment('base', {
            templateUrl:  '/base.tpl.html',
            controller: 'UIBaseCtrl',
            permissions : {
                login: true,
                profiles: [profiles.common]
            }
        })

        .within()
            .segment('users', {
                default: true,
                templateUrl:  '/users/users.tpl.html',
                controller: 'UsersCtrl', 
                permissions : {
                    login: true,
                    profiles: [profiles.admin]
                }
            })

In my app.run:

$rootScope.$on("routeSegmentChange", function(event, route) {
            console.log(route);

In tests, I found a error in this follow situation:

1. /login: route, at index 0 => OK
2. /users: route => OK
   • go to segment ui, at index 0
   • go to segment ui.users, at index 1
3. /login: when I return to /login, are showed 3 route objects

First: an route Obj, at index 0, as name login.
Second: an route Obj, at index 1, segment = null
Third: an route Obj, at index 1, segment = null

The second and third should not appear. This causes an error when trying to check the permissions to try to authenticate the route.

For example, if I use:

console.log(route.segment.name);

The console returns:

1. login
2. ui
3. users
   and when back to /login, console show:
4. login
5. TypeError: Cannot read property 'name' of null
6. TypeError: Cannot read property 'name' of null

In one more example, if I use:

console.log($routeSegment);

for same sequence of routes calls, the console show the objects:

1. Object {name: "login", $routeParams: Object, chain: Array[1] ...
2. Object {name: "ui", $routeParams: Object, chain: Array[1] ...
3. Object {name: "ui.users", $routeParams: Object, chain: Array[2] ...
4. Object {name: " login.users ", $routeParams: Object, chain: Array[1]
5. Object {name: "login", $routeParams: Object, chain: Array[2] ...
6. Object {name: "login", $routeParams: Object, chain: Array[1] ...

In this case 4 seems to be an error because login.users segment does not exist.

Someone could give a help?

** I tested when $routeChangeStart, but the $routeSegment is always the previous. **.

Already on SO: http://stackoverflow.com/questions/19812911/is-it-possible-to-refresh-route-segment-provider-in-angularjs

Basically, I'm using:

resolve: ['isUserLoggedIn'],
resolveFailed: {
templateUrl: 'assets/templates/login.html',
controller: LoginCtrl
}

to redirect to login page if user is not yet logged in.
The login controller redirects back to /#/index if user logged in successfully, but it seems that templateUrl and controller have already been decided and they don't get refreshed, isUserLoggedIn does not get called for the second time. Is this intended behaviour? Is there a way to forcefully refresh routing after initial setup?

I was using custom options with ng-route, that were really useful, because I can provide settings based on the route.

Tried something like that with angular-route-segment but didn't worked.

Something like this would be awesome:

segment('dashboard', {
    templateUrl: loc + 'templates/dashboard.html',
    controller: 'DashboardCtrl',
    requireLogin: true,
    hasSidebar: true
}).

Or do you recommend a better way to do this?