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?

score 1 · Accepted Answer · edited May 23 '17 at 12:14

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 '17 at 12:14

Community

1
1

answered Aug 21 '15 at 09:13

Radim Köhler

122,561
47
239
335

thanks, but it doesn't work when I want to go to the users.id state directly not via anchor. – Ramin Omrani Aug 21 '15 at 09:20
I updated the answer, added more details, extended the plunker. Hope now you should have your answer ;) Good luck with UI-Router – Radim Köhler Aug 21 '15 at 09:27
thanks for the fast work, but the new problem is that `users.id` state loads `users` state **templateUrl** view. can you help sir? – Ramin Omrani Aug 21 '15 at 09:55

score 0 · Answer 2 · answered Aug 21 '15 at 14:03

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

      }])

Angular UI-Router doesn't match a defined state

2 Answers2