How to integrate angular admin theme to meanjs

[NSLog0]

Hi, How to use http://ngmodules.org/modules/blur-admin to integrate with meanjs I generated module call systemAdmin and I want to use /blur-admin in this module. Anyone who has experience on it ?

Thank you.

[roboflank]

Hey @avatarr , can you try to use it separately and call the apis from the meanjs server?

[NSLog0]

@denzelwamburu I can call api from server and but I want to put all admin ui to systemadmins module and call api to other module instead put admin section to each folder because I want to separate layout.server.view.html and index.server.view.html from core module

[roboflank]

you want to use it as the main interface?

[NSLog0]

I want to have 2 mains interface admin module and core module

[NSLog0]

I undenstand to register angular module (injection) but I don't undestand how to separate layout for example If I call to " /" core module will render own layout, If I call to "systemadmin/" I want to render own layout

I tied to make it like this https://github.com/meanjs/mean/blob/master/modules/core/server/controllers/core.server.controller.js#L27

make it to systemadmin , but I'm not sure it a correctly way, So if I can't separate layout I think I can't to call 3rd like http://ngmodules.org/modules/blur-admin

[kuldipem]

@avatarr , You can created an another separate server route before app.route('/*').get(core.renderIndex); at core.server.routes.js like app.route('/admin/*').get(core.renderAdminIndex);

and don't forget to define renderAdminIndex() with your defined admin layout. I hope it will work for you.

[NSLog0]

@kuldipem I have a problem with angular route

.state('systemadmin', {
    abstract: true,
    url: '/systemadmin',
    template: '<div> test <div ui-view> </div> </div>'
    })
    .state('systemadmin.user', {
      url: '/user',
      template: '<p> test sub </p>'
    })

If I define abstract: true on parent route when access url /systemadmin then I got error "Page Not Found", If I remove abstract: true it work fine

ps. I create route and layout as you told me is work. Thank you

[kuldipem]

You can't access abstract route you have to define another route like .state('systemadmin.dashboard', { url: '/', template: '<p> dashboard </p>' })

[NSLog0]

Thank you @kuldipem It's work

$stateProvider
      .state('admins', {
        abstract: true,
        url: '/admins',
        templateUrl: 'modules/admins/client/views/admin.index.client.view.html'
      })
      .state('admins.index', {
        url: '',
        templateUrl: 'modules/admins/client/views/dashborad/admin.dashborad.client.view.html',
        controller: 'AdminsIndexController',
        controllerAs: 'vm',
        data: {
          roles: ['agent', 'admin', 'partner'],
          pageTitle: 'Admins Home'
        }
      })
      .state('admins.users', {
        url: '/users',
        templateUrl: 'modules/admins/client/views/users/admin.user.index.client.view.html',
        controller: 'AdminsUserController',
        controllerAs: 'vm',
        data: {
          roles: ['agent', 'admin', 'partner'],
          pageTitle: 'Admins User list'
        }
      });

But If on a /admins/users and then refresh page I got blank page ,No error on console or on page, I never come across this bug before , Do you have any keyword to search ?

[kuldipem]

No, Sorry.

[NSLog0]

@kuldipem Thank you very much I can continue to work.

Waiting some have a same problem

[kybarg]

@avatarr To fully separate admin and public frontend you need to do some tweaks to mean.js.

1. Copy contents from modules/**/client to modules/**/client/admin and modules/**/client/public
2. In each module move contents form admin folders to parent folders
3. Separate client section into two objects admin and public at config/assets/default.js
4. Make changes to config/lib/express.js: Replace

   app.locals.jsFiles = config.files.client.js;
   app.locals.cssFiles = config.files.client.css;

   With

   app.locals.jsFiles = {
   admin: config.files.client.admin.js,
   public: config.files.client.public.js
   };
   app.locals.cssFiles = {
   admin: config.files.client.admin.css,
   public: config.files.client.public.css
   };

5. In config/config.js replace

   
   // Setting Globbed js files
   config.files.client.js = getGlobbedPaths(assets.client.lib.js, 'public/').concat(getGlobbedPaths(assets.client.js, ['public/']));
   
   // Setting Globbed css files
   config.files.client.css = getGlobbedPaths(assets.client.lib.css, 'public/').concat(getGlobbedPaths(assets.client.css, ['public/']));

with
```js
  // Setting Globbed js files
  config.files.client.admin = {
    js: getGlobbedPaths(assets.client.admin.lib.js, 'public/').concat(getGlobbedPaths(assets.client.admin.js, ['public/'])),
    css: getGlobbedPaths(assets.client.admin.lib.css, 'public/').concat(getGlobbedPaths(assets.client.admin.css, ['public/']))
  };

  config.files.client.public = {
    js: getGlobbedPaths(assets.client.public.lib.js, 'public/').concat(getGlobbedPaths(assets.client.public.js, ['public/'])),
    css: getGlobbedPaths(assets.client.public.lib.css, 'public/').concat(getGlobbedPaths(assets.client.public.css, ['public/']))
  };

6. In modules/core/server/routes/core.server.routes.js place app.route('/admin*').get(core.renderAdminIndex); right before app.route('/*').get(core.renderIndex);

7. In modules/core/server/controllers/core.server.controller.js place before exports.renderIndex = function (req, res) { ...

   /**
   * Render the main application page
   */
   exports.renderAdminIndex = function (req, res) {
   var safeUserObject = null;
   if (req.user) {
   safeUserObject = {
     displayName: validator.escape(req.user.displayName),
     provider: validator.escape(req.user.provider),
     username: validator.escape(req.user.username),
     created: req.user.created.toString(),
     roles: req.user.roles,
     profileImageURL: req.user.profileImageURL,
     email: validator.escape(req.user.email),
     lastName: validator.escape(req.user.lastName),
     firstName: validator.escape(req.user.firstName),
     additionalProvidersData: req.user.additionalProvidersData
   };
   }
   
   res.render('modules/core/server/views/admin/index', {
   user: JSON.stringify(safeUserObject),
   sharedConfig: JSON.stringify(config.shared)
   });
   };

   Maybe forgot something, so feel free to ask me.

[NSLog0]

@kybarg thank you so much . Now I use admin folder like other module just use angular route to saparate and assets because is base on bootstrap but your comment I will try to adapt with my code.

So I saw that app.route('/admin*').get(core.renderAdminIndex) is use ('/admin*') or ('/admin/*') I have tried to use ('/admin/*') on previous version is duplicate with ('/*') is loaded ('/*') instead ('/admin/*')

[kybarg]

@avatarr My core.server.routes.js

'use strict';

module.exports = function (app) {
  // Root routing
  var core = require('../controllers/core.server.controller');

  // Define error pages
  app.route('/server-error').get(core.renderServerError);

  // Return a 404 for all undefined api, module or lib routes
  app.route('/:url(api|modules|lib)/*').get(core.renderNotFound);

  // Define application route
  app.route('/admin*').get(core.renderAdminIndex);

  app.route('/*').get(core.renderIndex);
};

[ghost]

i am struggling to change the default bootstrap theme with blur admin theme as well. Could you help me how to do it ? I'm a newbie in meanjs.