2. 如何：基本的页面布局和路由选择

在开始之前，我们需要在你的电脑上启动并运行种子项目。

从Github克隆项目

git clone git@github.com:gothinkster/angular2-realworld-example-app.git

克隆了repo之后，运行npm install来安装必要的依赖关系

查看种子分支（名为m-9）

git checkout m-9

种子应用在开始时，你会看到一个共享文件夹，其中包含SharedModule和桶文件index.ts。在app.module.ts中导入SharedModule，使其可以被应用。种子应用是使用Angular的CLI工具生成的，然后我们为我们有点复杂的大型Web应用优化了文件结构。

要开始我们的项目，我们首先需要为Conduit应用构建基本的布局和路由。具体来说，我们需要设置路由器，设置好页眉和页脚，并创建一个主页。让我们从创建网站的页眉和页脚开始。

Angular风格指南规定，我们应该使用 “按功能文件夹 “的项目布局。例如，我们要在布局文件夹中创建Header和Footer组件，并在主页文件夹中创建Home组件。这就是Angular执行关注点分离的方式。

创建FooterComponent。你还需要创建shared文件夹和layout文件夹。

src/app/shared/layout/footer.component.html

<footer>
  <div class="container">
    <a class="logo-font" routerLink="/">conduit</a>
    <span class="attribution">
      &copy; {{ today | date: 'yyyy' }}.
      An interactive learning project from <a href="https://thinkster.io">Thinkster</a>.
      Code licensed under MIT.
    </span>
  </div>
</footer>

我们需要通过footer的组件类上的变量today来暴露当前日期。我们使用Angular的DatePipe来格式化当前的年份。

src/app/shared/layout/footer.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'layout-footer',
  templateUrl: './footer.component.html'
})
export class FooterComponent {
  today: number = Date.now();
}

接下来让我们为我们的网站创建头。

创建HeaderComponent

src/app/shared/layout/header.component.html

<nav class="navbar navbar-light">
  <div class="container">
    <a class="navbar-brand" routerLink="/">conduit</a>
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item">
        <a class="nav-link"
          routerLink="/">
          Home
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link">
          Sign in
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link">
          Sign up
        </a>
      </li>
    </ul>
  </div>
</nav>

src/app/shared/layout/header.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'layout-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  constructor() {}
}

允许这些组件在我们的应用程序中通过barrels轻松导入

在布局文件夹中创建一个barrell文件，并导出HeaderComponent和FooterComponent。
src/app/shared/layout/index.ts

export * from './footer.component';
export * from './header.component';

现在在shared文件夹中创建一个根barrell文件。导出我们的layout文件夹以方便访问。

src/app/shared/index.ts

export * from './shared-module';
+ export * from './layout';

完美！接下来让我们创建我们的主页。接下来让我们创建我们的主页。在我们的应用程序目录中创建一个主页文件夹。

创建HomeComponent

src/app/home/home.component.html

<div class="home-page">
  <div class="banner">
    <div class="container">
      <h1 class="logo-font">conduit</h1>
      <p>A place to share your <i>Angular</i> knowledge.</p>
    </div>
  </div>
  <div class="container page">
    <div class="row">
      <div class="col-md-9">
        <div class="feed-toggle">
          <ul class="nav nav-pills outline-active">
            <li class="nav-item">
              <a class="nav-link">
                 Your Feed
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
                 Global Feed
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-3">
        <div class="sidebar">
          <p>Popular Tags</p>
        </div>
      </div>
    </div>
  </div>
</div>

src/app/home/home.component.css

.nav-link {
  cursor:pointer;
}

而我们将这两者都导入到HomeComponent中。

src/app/home/home.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'home-page',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  constructor() {}
}

我们的Home组件将作为导航的基础。app.module是应用程序的根，我们添加的任何其他页面组件都将是子组件。在这里，我们声明我们的基础导航是app.module的一个子模块。

创建HomeModule

src/app/home/home.module.ts

import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { SharedModule } from '../shared'; 
const homeRouting: ModuleWithProviders = RouterModule.forChild([
  {
    path: '',
    component: HomeComponent
  }
]);
@NgModule({
  imports: [
    homeRouting,
    SharedModule
  ],
  declarations: [
    HomeComponent
  ],
  providers: []
})
export class HomeModule {}

现在让我们把它整合起来

将HomeModule、HeaderComponent和FooterComponent导入到AppModule中，并声明应用程序的rootRouting

我们需要声明HeaderComponent和FooterComponent，以便在AppComponent的模板中使用它们（下一步会出现）。

src/app/app.module.ts

 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
+import { HomeModule } from './home/home.module';
 import {
   SharedModule,
+  FooterComponent,
+  HeaderComponent,
 } from './shared';
+const rootRouting: ModuleWithProviders = RouterModule.forRoot([], { useHash: true });
 @NgModule({
   declarations: [
     AppComponent,
+    FooterComponent,
+    HeaderComponent
   ],
   imports: [
     BrowserModule,
     SharedModule,
+    HomeModule,
+    rootRouting,
   ],
   providers: [],
[...]

最后，我们只需要将HeaderComponent和FooterComponent放置在router-outlet的上方和下方，我们的路由将被渲染到那里。

将AppComponent模板替换为我们的布局组件和一个**router-outlet**

src/app/app.component.html

<layout-header></layout-header>
<router-outlet></router-outlet>
<layout-footer></layout-footer>

在你的浏览器中，你现在应该可以看到主页呈现在页眉和页脚组件之间了。

你可以在Github上查看有效代码，或者在本地检查分支：

git checkout m-8