Angular实战项目（2）

达达前端

发布于 2019-07-25 17:06:40

9170

发布于 2019-07-25 17:06:40

文章被收录于专栏：达达前端达达前端

Angular 打造企业级协作平

image

项目工程

image.png

image.png

image.png

https://github.com/typicode

image.png

image.png

ng new taskmgr -si --style=scss installing ng

image.png

image.png

创建核心模块

image.png

image.png

ng g m core

image.png

image.png

image.png

UI布局

创建 ng g c core/header --spec=false

ng g c core/footer --spec=false

ng g c core/sidebar --spec=false

<div class="site">
    <header>
      <app-header (toggle)="sidenav.toggle()" (toggleDarkTheme)="switchDarkTheme($event)"></app-header>
    </header>
    <main>
      <router-outlet></router-outlet>
    </main>
    <footer>
      <app-footer></app-footer>
    </footer>
  </div>

html, body, app-root, md-sidenav-container, .site {
  margin: 0;
  width: 100%;
  height: 100%;
}
.site {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}

main {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.full-width {
  width: 100%;
}

.fill-remaining-space {
  // 使用 flexbox 填充剩余空间
  // @angular/material 中的很多控件使用了 flex 布局
  flex: 1 1 auto;
}