MEAN.js菜单是如何工作的

how does MEAN.js menu work?

本文关键字：工作 何工作 js 菜单 MEAN      更新时间：2023-11-11

在menus.client.service.js文件中，我试图了解MEAN.js框架中的菜单如何填充的结构

代码从分配给该的空菜单对象开始

this.menus = {}

然后在文件的底部，这个.addMenu（'topbar'）函数被称为

    // Add new menu object by menu id
    this.addMenu = function(menuId, isPublic, roles) {
        console.log('pre-this.menus') 
        console.log(this.menus) // empty object
        // Create the new menu
        this.menus[menuId] = {
            isPublic: isPublic || false,
            roles: roles || this.defaultRoles,
            items: [],
            shouldRender: shouldRender
        };
        console.log('post-this.menus')
        console.log(this.menus[menuId]) //complete populated menu with submenus i.e "List Articles", "New Article"
        // Return the menu object
        return this.menus[menuId];
    };

通过这一个函数，似乎还有两个函数被称为

this.addMenuItem和this.addsubMenuItem

但我不知道这是怎么发生的，因为我没有在文件中看到它们被明确调用。

我想我错过了一个重要的概念。我还查看了header.client.controller.js文件，但它所做的只是调用getMenu函数并将其分配给$scope.menu

$scope.menu = Menus.getMenu('topbar');

以下是完整的非功能文件代码

jsfiddle：http://jsfiddle.net/4c5gc0aq/

menus.client.service.js只是插入模块运行块中的Menus服务。

菜单项是从模块配置中生成（填充）的。例如，如果您查看articles.client.config.js，您将看到如何为每个模块填充菜单：

'use strict';
// Configuring the Articles module
angular.module('articles').run(['Menus',
    function(Menus) {
        // Add the articles dropdown item
        Menus.addMenuItem('topbar', {
            title: 'Articles',
            state: 'articles',
            type: 'dropdown'
        });
        // Add the dropdown list item
        Menus.addSubMenuItem('topbar', 'articles', {
            title: 'List Articles',
            state: 'articles.list'
        });
        // Add the dropdown create item
        Menus.addSubMenuItem('topbar', 'articles', {
            title: 'Create Articles',
            state: 'articles.create',
            roles: ['admin']
        });
    }
]);

我从0.4.0版本中得到了这个例子，但我相信它在早期版本中非常相似。

在menus.client.service.js的底部，您还可以定义更多菜单，如侧菜单，或为具有特定角色的用户（如管理员）显示的基于角色的菜单：

this.addMenu('top-admin', {
    isPublic: false,
    roles: ['admin']
});
this.addMenu('top-user', {
    isPublic: false,
    roles: ['user']
});

然后在相应模块的配置（运行）块中用菜单项填充它们。例如：

// Add the articles dropdown item
Menus.addMenuItem('top-admin', {
    title: 'Articles',
    state: 'articles',
    type: 'dropdown'
});
// Add the dropdown list item
Menus.addSubMenuItem('top-admin', 'articles', {
    title: 'List Articles',
    state: 'articles.list'
});
相关文章：