Angular UI-Router doesn't match a defined state

Question

I'm using UI-Router module for routing. I have 2 states that router should match the urls with them :

// Dashboard
.state('dashboard', {
    url: "/dashboard",
    templateUrl: "dashboard/views/index.html",
    controller: "DashboardController",
    ...
})

// Users
.state('users', {
    url: "/users",
    templateUrl: "users/views/index.html",
    controller: "UsersController",
    ...
})

// Single User
.state('users.id', {
    url: "/{id:^[a-z0-9_-]{3,16}$}",
    templateUrl: "users/views/show.html",
    controller: "UserController",
    ...
})

also I have set a default route :

$urlRouterProvider.otherwise("/dashboard");

I want the router to match users state when I go to http://127.0.0.1:8000/app/#/users

and to match user state when I go to http://127.0.0.1:8000/app/#/users/testuser

Problem :

the users state works good, but the user state url doesn't get matched and redirects to the default state. What's the problem?

Community · Accepted Answer · 2017-05-23 12:14:37Z

1

There is a working example

Try to use this regex def:

  .state('users.id', { 
      url: "/{id:(?:[a-z0-9_-]{3,16})}",

These links will work

  <a href="#/users">
  <a href="#/users/testuser">

This will go to otherwise

  <a href="#/users/xx">

Some inspiration could be found here

In case, we want to go to state 'users.id' directly, we just have to use proper call. In this extended plunker, we can see that it could be done like this:

// working
<a ui-sref="users">
<a ui-sref="users.id({id:'testword'})">
// not working - id does not fit - otherwise is used
<a ui-sref="users.id({id:'not-working simply too long'})">

The same would be with $state.go('users.id', {id:'testword'})

Check it here

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Aug 21, 2015 at 9:13

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ramin Omrani Over a year ago

thanks, but it doesn't work when I want to go to the users.id state directly not via anchor.

Radim Köhler Over a year ago

I updated the answer, added more details, extended the plunker. Hope now you should have your answer ;) Good luck with UI-Router

Ramin Omrani Over a year ago

thanks for the fast work, but the new problem is that users.id state loads users state templateUrl view. can you help sir?

cmgsakell · Accepted Answer · 2015-08-21 14:03:06Z

Here is an example of how I've done it in the past. Maybe it will help you.

app.config(['$stateProvider', '$urlRouterProvider',
        function ($stateProvider, $urlRouterProvider,$rootScope,$cookieStore) {
            $urlRouterProvider.otherwise("/login");
            $stateProvider
              .state('login', {
                  url: '/login',
                  title: 'Login',
                  templateUrl:'views/loginView.html',
                  controller: 'loginCtrl',
                  resolve: resolver($rootScope),

              })
              .state('account', {
                  url: '/account',
                  title: 'My Account',
                  accessLevel: 2,
                  resolve: resolver($rootScope,$cookieStore),   
                  views: {
                    'navigation': {
                         templateUrl: 'views/navigationView.html',
                         controller: 'navigationCtrl'
                    },
                    'content': {
                        templateUrl: 'views/contentView.html',
                        controller: 'navigationCtrl'
                    }
                 }            
              })
              .state('account.dashboard', {
                 url:'/dashboard',
                 title: 'Dashboard',
                 views : {
                    'pageContent': {
                        templateUrl:'views/dashboardView.html',
                        controller: 'dashboardCtrl'
                    }   
                 }             
              })
              .state('account.foo', {
                 url:'/foo',
                 title: 'foo',
                 views : {
                    'pageContent': {
                        templateUrl:'views/foo.html',
                        controller: 'fooCtrl'
                    }   
                 }             
              })
              .state('account.maps', {
                 url:'/maps',
                 title: 'Maps and stuff',
                 views : {
                    'pageContent': {
                        templateUrl:'views/mapsView.html',
                        controller: 'mapsCtrl'
                    }   
                 }             
              })

      }])

Collectives™ on Stack Overflow

Angular UI-Router doesn't match a defined state

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related