Angular实战项目（2）

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

image.png image.png image.png image.png image.png image.png image.png

Flex布局

image.png

Angular Material

image.png

materialdesignblog.com

兼容性好，可扩展性强，测试性好，对主题的支持好
目前组件仍不算丰富
project\r1egot\taskmgr

npm i --save @angular/material@2.0.0-beta.7

image.png image.png image.png

---

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客

博客