MEAN.js 菜单是如何工作的？

Question

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

代码以分配给此的空菜单对象开始

this.menus = {}

然后在文件底部，调用this.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/

Answer 1

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