meanjs如何实现管理仪表板

时间:2014-08-07 09:48:25

标签: angularjs meanjs

meanjs使用angularjs作为前端mvc,并且是SPA应用程序,因此当管理仪表板与前端页面不同时,实现管理仪表板的最佳方法是什么?也许有两个接入点?

2 个答案:

答案 0 :(得分:3)

我一直在寻找实现这一目标的方法,我在这里发布搜索结果。 首先创建新模块:

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}}

之前的'/'

最后的触摸。因为您的浏览器现在正在加载/管理员/您需要告诉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

测试您的管理区域

答案 1 :(得分:0)

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

或者如果您通过使用angularJS询问如何实现仪表板,这里有人的工作,您可以检查它。

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