angular怎么开发管理系统的左侧菜单

Posted 2023-03-25

参考技术A 一般来说，一个管理后台的构建的基本流程是：(1)选择一个开发语言->(2)选择一种数据库->(3)选择一个开发轮子(framework)->(4)在轮子上搭建前端框架->(5)实现业务逻辑。
一旦一个后台做出来以后，有了技术积累，以后其他的项目都是克隆版本，这样的流程的缺陷是：

开发语言选型被固化
技术人员的招聘、团队协作开发都必须依赖开发语言统一。
业务逻辑的实现无法统一标准
没有统一标准就很难书写规范的文档，技术人员离职很难做到顺利交接，同时系统里面的隐藏BUG很难通过标准测试发现。
时下Web前端技术的发展风生水起，我们可以尝试用WebAPP的思想去构架后台，将后台的前后端分离，前端交给AngularJS，后端交给任何一种语言框架，前后端通过标准协议接口通讯，这样后台构架的流程将是这样：(1)业务流程的数据库建模->(2)业务流程的协议文档制定->(3)前后端工程师协作开发完成后台

接下来我将阐述这套流程的实现原理和基本知识要点，后续文章将step-by-step去构建整套系统，需要注意的是，演示均只针对于开发环境，不会谈及生产环境部署，同时只关注于系统框架的标准化，对于使用到的各种语言技术结构可能会不太标准，请谅解。

基础知识

CRUD
后台的最终目的就是针对数据库的操作，而操作归纳下来无非就是 Create(新增),Read(读取),Update(更新),Delete(删除),这就是CRUD的意思,参见维基的解释
Restful
前后端分离，我们需要将CRUD的接口通过标准协议(WebAPI)来实现，Restful就是为这个协议而生的，参见老外的解释

将 Angular Material 下拉菜单移至左侧

【中文标题】将 Angular Material 下拉菜单移至左侧

【英文标题】：Move Angular Material Dropdown menu to the left

【发布时间】：2016-08-18 09:58:24

【问题描述】：

我正在使用 Angular 材质。我已经成功创建了一个导航栏和一个下拉菜单。

看起来像这样：

我想将DROPDOWN 移到左侧。现在，它出现在中心周围。

HTML 代码：

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px;float: left;">
    <h2>Material NavBar</h2>
    <md-menu>
        <md-button md-menu-origin ng-click="$mdOpenMenu()">Dropdown</md-button>
        <md-menu-content >
            <md-menu-item>
                <md-button>Help</md-button>
            </md-menu-item>
            <md-menu-item>
                <md-button>About</md-button>
            </md-menu-item>
        </md-menu-content>
    </md-menu>
    <md-button aria-label="Go Back">
        Go Back
    </md-button>
    <md-button>Item 1</md-button>
    <md-button>Item 2</md-button>
</md-toolbar>

如何修改代码以将DROPDOWN 移动到文本Material NavBar 旁边的左侧？

【参考方案1】：

您只需在代码中添加<span flex> </span>。

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px">
<h2>Material NavBar</h2>
<md-menu>
    <md-button md-menu-origin ng-click="$mdOpenMenu()">Dropdown</md-button>
    <md-menu-content >
        <md-menu-item>
            <md-button>Help</md-button>
        </md-menu-item>
        <md-menu-item>
            <md-button>About</md-button>
        </md-menu-item>
    </md-menu-content>
</md-menu>
<span flex></span>
<md-button aria-label="Go Back">
    Go Back
</md-button>
<md-button>Item 1</md-button>
<md-button>Item 2</md-button>

这是一个工作示例。 http://codepen.io/next1/pen/RaYNxw

【讨论】：

方向错误，应该在 left... ;) 所以在菜单之后添加那个 flex

我的错。再次检查。

这样一个简单的解决方案，但我被卡住了很长一段时间。天才！

始终使用 span 元素来适当对齐元素。

flex 是重要的概念。查看官方文档material.angularjs.org/latest/layout/children