how meanjs implement admin dashboard

Question

meanjs use angularjs for front end mvc , and is a SPA application , so when the admin dashboard is diffrent than the front end page , what is the best way to implement admin dashboard ? perhaps two access points ?

In MEANjs the admin functionality consists of two parts. ACL backend which restricts API calls to users that have admin roles and then the front end angular routing restrictions which check the user's roles before displaying admin pages. Did you want to implement both or just the angular logic? — Daniel Kobe, Dec 20 '15 at 07:54

score 3 · Answer 1 · answered Apr 13 '15 at 13:33

I've been looking for a way to achieve this also and I'm posting here the result of my search. First create your new module:

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

Once you did that first step is to check that when you go on : http://localhost:3000/#!/admin-home you effectively load the generated view. Then you go generating your express route and controller:

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

Now here come the fun. The idea is to tell Express to load different set of layout views when you're hitting /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);
};

Copy/paste:

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

Edit app/views/admin-index.server.view.html:

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

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

Edit app/views/admin-layout.server.view.html:

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

Notice the '/' before {{jsFile}}

Final touch. Because your browser is now loading /admin instead / you need to tell ui-router that the path to the templates are absolute and not relative.

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

Notice the '/' at the begining of templateUrl content

Now test your admin zone by going to http://localhost:3000/admin/#!/admin-home

I did not even know you could use the yo meanjs generator to create the admin routes. THIS is a really good way of doing it. +1 — Luke Kroon, Jul 13 '16 at 08:05

score 0 · Answer 2 · answered Aug 13 '14 at 19:36

I am not clear your question. If I am right, you probably asks about attaching SPA to regular webpage(dashboard). If say so, you can add another logical path for AngularJS application then you can open the application from the separate logical URL. For example( ../dashboard/angularApp)

Or if you ask about how implement dashboard by using angularJS, here is someone's work you can check it.

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

score 0 · Answer 3 · answered Dec 20 '15 at 06:14

Based on my understanding on the question, you need to server dashboard and "sales" site.

What I usually do is put the dashboard pages in another subdomain and the regular pages in the main domain.

eg:

dashboard.mysite.com --> admin dashboard

www.mysite.com --> sales pages like about us, faq etc..

how meanjs implement admin dashboard

3 Answers3

Linked