4

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);
            }
        }
    });
||||||
  • what happens if u navigate to the URL directly? – Yerken Jan 6 '16 at 10:37
  • Nothing, it loads the layout but not the view inside, the console.log() isn't triggered. – burzum Jan 6 '16 at 10:38
1

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

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

I hope this helps

||||||
  • 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? – Michele Ricciardi Jan 6 '16 at 13:53
  • 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. – burzum Jan 6 '16 at 15:21
  • 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/… – Michele Ricciardi Jan 6 '16 at 22:21
0

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>

||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.