How average admin control panel implementations
I was looking for a way to achieve this and I am posting my search result here. First, create a 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've taken this first step, make sure that when you continue with: http: // localhost: 3000 / #! / Admin-home , you are effectively loading the generated view. Then you will start generating your express route and controller:
yo meanjs:express-route admin
yo meanjs:express-controller admin
Now here's the fun. The idea is to tell Express to load different kinds of layouts when you click/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 %}
[...]
Note the '/' before {{jsFile}}
Finishing touch. Since your browser is now loading / administering instead / you need to tell u-router that the path to templates is 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 beginning of the templateUrl content
Now check your admin area by going to http://localhost:3000/admin/#!/admin-home
source to share
I do not understand your question. If I am correct, you are probably asking about connecting the SPA to a regular webpage (dashboard). If so, you can add another logical path for the AngularJS app, then you can open the app from a separate logical URL. For example (../dashboard/angularApp)
Or if you are asking about how to implement a toolbar using angularJS, here is someone working, you can check it out.
source to share
Based on my understanding of the question, you need a server control panel and a sales site.
What I usually do is put the dashboard pages on a different subdomain and regular pages on the main domain.
eg:
dashboard.mysite.com -> admin dashboard
www.mysite.com → sales pages, e.g. about us, faq, etc.
source to share