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 只是模块运行块中注入的菜单服务.

菜单项从模块配置中生成(填充).例如,如果查看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']
});

然后使用相应模块的config(run)块中的菜单项填充它们.例如:

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