使用漂亮的 URL 将参数传递给 MEAN 应用程序？答案

【问题标题】：Pass param into MEAN app with pretty URL?使用漂亮的 URL 将参数传递给 MEAN 应用程序？
【发布时间】：2015-07-01 23:49:23
【问题描述】：

在保持漂亮 URL 的同时将参数传递到 MEAN 应用程序的最佳方法是什么？ 我不能为此使用客户端上的存储。以下 Express 路由将成功引导 Angular 应用程序中的参数，但 URL 很难看...

router.get('/:bid', function(req, res, next) {
    var bid = req.params.bid || '';
    res.render('index', { initData: { bid: bid } });
});

参数化的 URL：

http://localhost:4001/ABC123

变成：

http://localhost:4001/?bid=abc123#/login

我不介意使用查询字符串，但我希望查询字符串参数立即消失。

【问题讨论】：

标签： angularjs express mean-stack

【解决方案1】：

（相当肯定，从您的其他帖子来看，您正在使用 UI-Router。我将在这里假设。）

如果您使用的是 UI-Router，我会使用值作为参数格式化 URL：

http://localhost:4001/#/login/abc123

只要你的状态占参数...

(function (module) {

    'use strict';

    var config = function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/login");

        $stateProvider
            .state('login', { 
                url: '/login/:bid', 
                templateUrl: 'partials/login.html', 
                params: { 
                    bid: { squash: true, value: null } 
                } 
            });
    };

    module.config(config);

})(angular.module('your-app'));

然后您可以使用 $stateParams 将值拉入您的控制器：

(function (module) {

    'use strict';

    var loginController = function ($stateParams) {

        var vm = this;

        vm.bid = $stateParams.bid || '';

    };

    module.controller('Login', loginController);

})(angular.module('your-app'));

随心所欲地使用它：

<div class="container" ng-controller="Login as login">
    <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in: {{ login.bid }}</h2>
    </form>
</div>

当您的用户点击链接或导航到其他地方时，该参数将从 URL 中消失。

另外，顺便说一句，这也将消除对 Jade 的依赖或通过视图引擎注入它。

【讨论】：