> For the complete documentation index, see [llms.txt](https://moluo.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://moluo.gitbook.io/notes/bian-cheng-xue-xi/qian-duan/angular-da-zao-qi-ye-ji-xie-zuo-ping-tai/1.2.-huan-jing-da-jian.md).

# 1.2.环境搭建

ng --style=scss ng g m core 模块生成

## UI整体布局

### 新建header、footer 、sidebar 组件

```bash
ng g c core/header --spec=false
ng g c core/footer --spec=false
ng g c core/sidebar --spec=false
```

### 编辑模板

src/app/app.component.html

```markup
<nz-layout>

  <nz-sider>
    <app-sidebar></app-sidebar>
  </nz-sider>

    <nz-header>
      <app-header></app-header>
    </nz-header>

    <nz-content>
      <router-outlet></router-outlet>
    </nz-content>

    <nz-footer>
      <app-footer></app-footer>
    </nz-footer>

</nz-layout>
```

### 定义样式

整体UI样式常使用到flex布局，该部分之后补充。相关文档请见<https://www.runoob.com/w3cnote/flex-grammar.html>

src/styles.css

```css
main{
    flex:1;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-content:flex-start;
    align-item:center;
}
```

npm install --save 包名：软件依赖 npm install --dev 开发过程需要依赖

json-server：用于快速搭建rest api npm install -g json-server

json-server ./mock/data.json

@angular/cli安装失败处理方式 npm unistall -g @angular/cli npm cathe clean npm install -g @angular/cli

ng g c core/header --spec=false ng g c core/footer --spec=false ng g c core/sidebar --spec=false

共享模块 登录模块 项目模块 任务模块 日历模块

非特性模块 服务模块 reducer模块 effects模块

src/assets

ng new taskmgr -si --style=scss --skip-install（跳过包安装） ng g m core ng g m shared

constructor(@Optional() @skipSelt() parent:CoreModule){ if(parent){ throw new Error('模块已经存在，不能再次加载') } }

exports:\[CommonModule]

core

cnpn i --save @angular/material

MdSidenavModule