meanjs 如何实现管理仪表板答案

【问题标题】：how meanjs implement admin dashboardmeanjs 如何实现管理仪表板
【发布时间】：2014-09-30 12:07:54
【问题描述】：

meanjs 使用 angularjs 做前端 mvc，并且是一个 SPA 应用程序，所以当管理仪表板与前端页面不同时，实现管理仪表板的最佳方式是什么？也许两个接入点？

【问题讨论】：

在 MEANjs 中，管理功能由两部分组成。 ACL 后端将 API 调用限制为具有管理员角色的用户，然后是前端角度路由限制，在显示管理页面之前检查用户的角色。你想同时实现还是只实现角度逻辑？

【解决方案1】：

我也一直在寻找一种方法来实现这一点，我在这里发布了我的搜索结果。首先创建你的新模块：

yo meanjs:angular-module admin
yo meanjs:angular-route adminHome
? Which module does this route belongs to? admin
? What do you want your route path to be? admin-home
? What do you want to call your view? admin-home
? What do you want to call your controller? AdminHome
   create public/modules/admin/config/admin.client.routes.js
   create public/modules/admin/controllers/admin-home.client.controller.js
   create public/modules/admin/tests/admin-home.client.controller.test.js
   create public/modules/admin/views/admin-home.client.view.html

一旦你做了第一步，就是检查当你继续时：http://localhost:3000/#!/admin-home 你有效地加载了生成的视图。然后你去生成你的快速路线和控制器：

yo meanjs:express-route admin
yo meanjs:express-controller admin

现在乐趣来了。这个想法是告诉 Express 在您点击 /admin 时加载不同的布局视图集

//Content of app/controllers/admin.server.controller.js
'use strict';

exports.index = function(req, res){
    res.render('admin-index', {
        user: req.user || null,
        request: req
    });
};

//Content of app/routes/admin.server.routes.js
'use strict';

module.exports = function(app) {
    var admin = require('../../app/controllers/admin.server.controller');
    app.route('/admin').get(admin.index);
};

复制/粘贴：

app/views/index.server.view.html -> app/views/admin-index.server.view.html
app/views/layout.server.view.html ->app/views/admin-layout.server.view.html

编辑app/views/admin-index.server.view.html:

{% extends 'admin-layout.server.view.html' %}

{% block content %}
    <section data-ui-view></section>
{% endblock %}

编辑app/views/admin-layout.server.view.html:

[...]
{% for jsFile in jsFiles %}<script type="text/javascript" src="/{{jsFile}}"></script>{% endfor %}
[...]

注意{{jsFile}}之前的'/'

最后的接触。因为你的浏览器现在正在加载 /admin 而不是 / 你需要告诉 ui-router 模板的路径是绝对的而不是相对的。

//Content of public/modules/admin/config/admin.client.routes.js
'use strict';

//Setting up route
angular.module('admin').config(['$stateProvider',
    function($stateProvider) {
        // Admin state routing
        $stateProvider.
        state('admin-home', {
            url: '/admin-home',
            templateUrl: '/modules/admin/views/admin-home.client.view.html'
        });
    }
]);

注意 templateUrl 内容开头的“/”

现在去http://localhost:3000/admin/#!/admin-home测试你的管理区

【讨论】：

我什至不知道你可以使用 yo meanjs 生成器来创建管理路由。这是一个非常好的方法。 +1

【解决方案2】：

我不清楚你的问题。如果我是对的，您可能会询问有关将 SPA 附加到常规网页（仪表板）的问题。如果这样说，您可以为 AngularJS 应用程序添加另一个逻辑路径，然后您可以从单独的逻辑 URL 打开应用程序。例如（../dashboard/angularApp）

或者如果您询问如何使用 angularJS 实现仪表板，您可以查看这里有人的工作。

https://github.com/nickholub/angular-dashboard-app

【讨论】：

【解决方案3】：

根据我对问题的理解，您需要服务器仪表板和“销售”网站。

我通常做的是将仪表板页面放在另一个子域中，而将常规页面放在主域中。

例如：

dashboard.mysite.com --> 管理仪表板

www.mysite.com --> 销售页面，例如关于我们、常见问题等。

【讨论】：