how meanjs implement admin dashboard

问题

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 ?

回答1:

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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/25179307/how-meanjs-implement-admin-dashboard

标签

angularjs

meanjs