AngularJS UI router root scope slug routes

Question

I'm trying to implement a route for the root scope like

/#/profile-1
/#/profile-2
/#/developer-name

Guess you get the idea. I'm using AngularJS 1.4 and UI Router 0.2.15.

My problem is now that I have this route, it's the last one in the order of my routes:

(function () {
    'use strict';

    angular
        .module('bs3Prototype')
        .config(routerConfig);

    /** @ngInject */
    function routerConfig($stateProvider, $urlRouterProvider) {
        $stateProvider.
            state('home', {
                url: '/',
                templateUrl: 'app/main/main.html',
                controller: 'MainController',
                controllerAs: 'main'
            }).
            state('profiles', {
                url: '/profiles',
                templateUrl: 'app/profiles/profiles_listing.html',
                controller: 'ProfilesController',
                controllerAs: 'profiles'
            }).
            state('search', {
                url: '/search',
                templateUrl: 'app/search/search.html',
                controller: 'SearchController',
                //controllerAs: 'search',
                reloadOnSearch: false,
                resolve: {
                    profileCategories: function(profileCategoriesService) {
                        return profileCategoriesService.index();
                    },
                    jobCategories: function(staticListsService) {
                        return staticListsService.getList('jobTypes');
                    },
                    agendaCategories: function(agendaCategoriesService) {
                        return agendaCategoriesService.index();
                    },
                    buildingTypes: function(buildingTypesService) {
                        return buildingTypesService.index();
                    }
                }
            }).
            state('profile', {
                url: '/:profileSlug',
                templateUrl: 'app/profile/profile_view.html',
                controller: 'ProfileController',
                controllerAs: 'profile',
                resolve: {
                    profile: function (profilesSerivce, $stateParams) {
                        console.log(profilesSerivce.getProfile($stateParams.profileSlug));
                        return profilesSerivce.getProfile($stateParams.profileSlug);
                    }
                }
            });

        $urlRouterProvider.otherwise('/');
    }

})();

In another view, my search results, I'm using this for the URL:

<a ui-sref="profile({profileSlug: result.slug})">Profile: {{result.profile_title.profile_title_default}} (ID: {{result.id}})</a>

This will correctly generate my slug route but when I click on it nothing happens and I have no idea why. Obviously it's able to resolve the object to an URL but not vice versa.

Second try:

I've read this page and tried it but no success either. At least the URL doesn't change and the slug URL stays but the controller is still not instantiated...

$urlMatcherFactoryProvider.type('profileSlug', {}, function(profilesService) {
    var services = {
        profile: profilesService
    };
    var checkedUrls = [];
    return {
        encode: function(item) {
            console.log('encode');
            console.log(item);
            return item;
        },
        decode: function(item) {
            console.log('decode');
            console.log(item);
            if (_.contains(checkedUrls, item)) {
                return true;
            }
            return services.profile.getProfile(item).then(function(result) {
                console.log(result);
                checkedUrls.push(item);
                return true;
            });
        },
        is: function (item) {
            console.log('is');
            console.log(item);
            return true;
        }
    }
});

The output of the console.log() calls is this:

index.route.js:36 is
index.route.js:37 architekturhalle
index.route.js:36 is
index.route.js:37 architekturhalle
index.route.js:36 is
index.route.js:37 architekturhalle
index.route.js:19 encode
index.route.js:20 architekturhalle
index.route.js:36 is
index.route.js:37 architekturhalle

I really don't understand why it is not calling decode as well.

I've only changed my profile route to this:

    state('profile', {
        url: '/{profileSlug:profileSlug}',
        templateUrl: 'app/profile/profile_view.html',
        //controller: 'ProfileController',
        controller: function() { alert('TEST'); },
        //controllerAs: 'profile',
        resolve: {
            profile: function (profilesSerivce, $stateParams) {
                console.log(profilesSerivce.getProfile($stateParams.profileSlug));
                return profilesSerivce.getProfile($stateParams.profileSlug);
            }
        }
    });

Nothing, it loads the layout but not the view inside, the console.log() isn't triggered. — floriank
– floriank, Commented Jan 6, 2016 at 10:38

Michele Ricciardi · Accepted Answer · 2016-01-06 10:40:22Z

1

Came across this multiple times and the way I used to troubleshoot this was:

Do you have another route with the same name?
Does the template exists?
Does the controller exist?
Does getProfile return a promise? If so, does it fail?

I hope this helps

answered Jan 6, 2016 at 10:40

Michele Ricciardi

2,11716 silver badges17 bronze badges

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

3 Comments

Michele Ricciardi Over a year ago

Ah right, I know why. You need to have your URL something like profile/:profileSlug. if that doesn't work, can you share what network requests are made when you try and navigate to that URL? Lastly, do you get any JS errors?

floriank Over a year ago

Well, but my URL will become /#/profile/<slug> then, but I need it on the root level of the URL as questions title says as well.

Michele Ricciardi Over a year ago

Is there any chance you could create a Plnkr? I could try debug it. Also you can listen for broadcasted events to see which ones are triggered. You can see the list of events broadcasted on this cheatsheet (page 5) d2eip9sf3oo6c2.cloudfront.net/pdf/…

Venkey seemakurthi · Accepted Answer · 2017-02-20 07:18:53Z

var myApp =angular.module("appModuleName",['ui.router']);

var urlinfo = "/index.html";

myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('dashboard', {
            url: '/settings',
            templateUrl: 'templates/settings.html'
        })
        .state('customer', {
            url: '/profile',
            templateUrl: 'templates/profile.html',
            controller :'customerDetailsController'
        })
        .state('admin', {
            url: '/account',
            templateUrl: 'templates/account.html',
            controller :'adminDetailsController'
        });

    $urlRouterProvider.otherwise('/settings');
});


myApp.controller("customerDetailsController",function($scope){
	
	$rootScope.customerDetails = {name:'Venkat',occupation:'software'};
});

myApp.controller("adminDetailsController",function($scope){
	
	var adminDetailsList = [{name:'Venkat',occupation:'admin'},
	                        {name:'nishita',occupation:'acccount'},
	                        {name:'laxmi',occupation:'finance'}];
	$scope.adminDetails = adminDetailsList;
});

/*!
 * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

 body {
    overflow-x: hidden;
 }

/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Welcome Angular Js</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

</head>
<body ng-app="appModuleName">


<div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a ui-sref="dashboard">Dashboard</a>
                </li>
                <li>
                    <a ui-sref="customer">customer</a>
                </li>
                <li>
                    <a ui-sref="admin">admin</a>
                </li>
                
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                       <ui-view></ui-view>
                       </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    
</body>


</html>

Collectives™ on Stack Overflow

AngularJS UI router root scope slug routes

Second try:

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Second try:

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related