开始

  1. ng new angular-contacts

初始化组件

  1. ng g component navbar
  2. ng g component sidebar
  3. ng g component dashboard

导入 bootstrap 和自定义样式

下载：

  1. npm i bootstrap

配置 .angular-cli.json：

  1. ...
  2. "styles": [
  3.   "../node_modules/bootstrap/dist/css/bootstrap.css",
  4.   "styles.css"
  5. ],
  6. ...

在 src/styles.css 文件中写入以下内容：

  1. /* You can add global styles to this file, and also import other style files */
  4. /*
  5.  * Base structure
  6.  */
  9. /* Move down content because we have a fixed navbar that is 50px tall */
  11. body {
  12.   padding-top: 50px;
  13. }
  17. /*
  18.  * Global add-ons
  19.  */
  21. .sub-header {
  22.   padding-bottom: 10px;
  23.   border-bottom: 1px solid #eee;
  24. }
  27. /*
  28.  * Top navigation
  29.  * Hide default border to remove 1px line.
  30.  */
  32. .navbar-fixed-top {
  33.   border: 0;
  34. }
  37. /*
  38.  * Sidebar
  39.  */
  42. /* Hide for mobile, show later */
  44. .sidebar {
  45.   display: none;
  46. }
  48. @media (min-width: 768px) {
  49.   .sidebar {
  50.     position: fixed;
  51.     top: 51px;
  52.     bottom: 0;
  53.     left: 0;
  54.     z-index: 1000;
  55.     display: block;
  56.     padding: 20px;
  57.     overflow-x: hidden;
  58.     overflow-y: auto;
  59.     /* Scrollable contents if viewport is shorter than content. */
  60.     background-color: #f5f5f5;
  61.     border-right: 1px solid #eee;
  62.   }
  63. }
  66. /* Sidebar navigation */
  68. .nav-sidebar {
  69.   margin-right: -21px;
  70.   /* 20px padding + 1px border */
  71.   margin-bottom: 20px;
  72.   margin-left: -20px;
  73. }
  75. .nav-sidebar>li>a {
  76.   padding-right: 20px;
  77.   padding-left: 20px;
  78. }
  80. .nav-sidebar>.active>a,
  81. .nav-sidebar>.active>a:hover,
  82. .nav-sidebar>.active>a:focus {
  83.   color: #fff;
  84.   background-color: #428bca;
  85. }
  89. /*
  90.  * Main content
  91.  */
  93. .main {
  94.   padding: 20px;
  95. }
  97. @media (min-width: 768px) {
  98.   .main {
  99.     padding-right: 40px;
  100.     padding-left: 40px;
  101.   }
  102. }
  104. .main .page-header {
  105.   margin-top: 0;
  106. }
  110. /*
  111.  * Placeholder dashboard ideas
  112.  */
  114. .placeholders {
  115.   margin-bottom: 30px;
  116.   text-align: center;
  117. }
  119. .placeholders h4 {
  120.   margin-bottom: 0;
  121. }
  123. .placeholder {
  124.   margin-bottom: 20px;
  125. }
  127. .placeholder img {
  128.   display: inline-block;
  129.   border-radius: 50%;
  130. }

重启。

导入路由