Angular实战项目（2）

2019-07-24 本文已影响80人魔王哪吒

Angular 打造企业级协作平台

image

项目工程

image.png

https://github.com/typicode

image.png

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

image.png

创建核心模块

image.png

ng g m core

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