AngularJS UI 路由器根范围 slug 路由

Posted 2023-02-24

【中文标题】AngularJS UI 路由器根范围 slug 路由

【英文标题】：AngularJS UI router root scope slug routes

【发布时间】：2016-04-10 09:50:55

【问题描述】：

我正在尝试为根范围实现路由，例如

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

猜你明白了。我正在使用 AngularJS 1.4 和 UI Router 0.2.15。

我现在的问题是我有这条路线，它是我路线顺序中的最后一条：

(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('/');
    

)();

在另一个视图中，我的搜索结果，我使用这个作为 URL：

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

这将正确生成我的 slug 路线，但是当我点击它时，什么也没有发生，我不知道为什么。显然它能够将对象解析为 URL，但反之亦然。

第二次尝试：

我已阅读this page 并尝试过，但也没有成功。至少 URL 没有改变，slug URL 保持不变，但控制器仍然没有实例化......

$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;
        
    
);

console.log() 调用的输出是这样的：

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

我真的不明白为什么它不也调用decode。

我只是将我的个人资料路线更改为：

    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);
            
        
    );

【问题讨论】：

如果你直接导航到 URL 会发生什么？

什么都没有，它加载布局而不是里面的视图，console.log() 没有被触发。

【参考方案1】：

多次遇到这个问题，我用来解决这个问题的方法是：

您还有其他同名路线吗？ 模板是否存在？ 控制器存在吗？ getProfile 是否返回承诺？如果是，它会失败吗？

希望对你有帮助

【讨论】：

嗯，我知道为什么。您的 URL 需要类似于 profile/:profileSlug。如果这不起作用，您能否分享当您尝试导航到该 URL 时发出的网络请求？最后，您是否收到任何 JS 错误？

好吧，但是我的 URL 会变成 /#/profile/<slug>，但是我需要它在 URL 的根级别，正如问题标题所说的那样。

您是否有机会创建 Plnkr？我可以尝试调试它。您还可以收听广播事件以查看触发了哪些事件。您可以在此备忘单（第 5 页）上查看广播的事件列表d2eip9sf3oo6c2.cloudfront.net/pdf/…

【参考方案2】：

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>