1. 本节说明
本节以及后面的内容我们将会通过搭建一个简单的博客程序来对angular进行介绍，项目使用前端框架是bootstrap.版本v3.3.7，另外需要安装jquery.关于bootstrap,jquery的安装方法第一篇中有讲解，不再赘述。本节内容由于搭建页面框架的关系，主要是bootstrap的内容，与angular关系不太大。最后的效果如下：
2. 搭建框架
首先，我们将上面的页面大致分为5个区域，分别是头部（header)，轮播图（carousel)，文章区域(article)，侧边栏（sidebar),底部（footer）。
进入到项目目录，分别创建这5个组件：
1ng g c header 2ng g c carousel 3ng g c artile 4ng g c sidebar 5ng g c footer
3. 编写模板文件和CSS文件
主要是bootstrap和css的内容，下面贴出文件的源码，不再做详细解释：
3.1. app.component.html
1<app-header></app-header> 2<div class="container"> 3 <div class="row"> 4 <div class="col-md-9"> 5 <app-carousel></app-carousel> 6 <app-article></app-article> 7 </div> 8 <div class="col-md-3"> 9 <app-sidebar></app-sidebar> 10 </div> 11 </div> 12</div> 13<app-footer></app-footer>
3.2. 全局样式文件 style.css
1/* You can add global styles to this file, and also import other style files */ 2html,body{ 3 margin: 0; 4 padding: 0; 5 font-size: 12px; 6 background-color: rgb(243,243,243) !important; 7} 8body{ 9 padding-top: 70px; 10}
3.3. header.component.html
1<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 2 <div class="container"> 3 <div class="navbar-header"> 4 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex"> 5 <span class="icon-bar"></span> 6 <span class="icon-bar"></span> 7 <span class="icon-bar"></span> 8 </button> 9 <a href="" class="navbar-brand">博客家</a> 10 </div> 11 <div class="collapse navbar-collapse navbar-ex"> 12 <ul class="nav navbar-nav"> 13 <li><a href="#">首页</a></li> 14 <li><a href="#">联系我们</a></li> 15 <li><a href="#">关于我们</a></li> 16 </ul> 17 <form class="navbar-form navbar-left"> 18 <div class="form-group"> 19 <input type="text" class="form-control" placeholder="搜索内容"> 20 </div> 21 <button type="submit" class="btn btn-default">Search</button> 22 </form> 23 <div class="navbar-nav navbar-right"> 24 <button class="navbar-btn btn btn-info">登录</button> 25 <button class="navbar-btn btn btn-defualt">注册</button> 26 </div> 27 <!-- 28 <ul class="nav navbar-nav navbar-right"> 29 <li class="dropdown"> 30 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 31 aria-haspopup="true" aria-expanded="false"> 32 <span class="glyphicon glyphicon-user"></span> <span class="caret"></span></a> 33 <ul class="dropdown-menu"> 34 <li><a href="#">我的博客</a></li> 35 <li><a href="#">我的收藏</a></li> 36 <li><a href="#">站内信</a></li> 37 <li role="separator" class="divider"></li> 38 <li><a href="#">个人中心</a></li> 39 <li><a href="#">帐号设置</a></li> 40 </ul> 41 </li> 42 </ul> 43 --> 44 </div> 45 </div> 46</nav>
3.4. carousel.component.html
1<div id="carousel-ex" class="carousel slide" data-ride="carousel"> 2 <ol class="carousel-indicators"> 3 <li data-target="carousel-ex" data-slide-to="0" class="active"></li> 4 <li data-target="carousel-ex" data-slide-to="1"></li> 5 <li data-target="carousel-ex" data-slide-to="2"></li> 6 </ol> 7 8 <div class="carousel-inner listbox"> 9 <div class="item active"> 10 <img src="https://via.placeholder.com/900X300" alt=""> 11 <div class="carousel-caption"> 12 图片一 13 </div> 14 </div> 15 <div class="item"> 16 <img src="https://via.placeholder.com/900X300" alt=""> 17 <div class="carousel-caption"> 18 图片二 19 </div> 20 </div> 21 <div class="item"> 22 <img src="https://via.placeholder.com/900X300" alt=""> 23 <div class="carousel-caption"> 24 图片三 25 </div> 26 </div> 27 </div> 28 29 <a href="#carousel-ex" class="left carousel-control" role="button" data-slide="prev"> 30 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 31 <span class="sr-only">Previous</span> 32 </a> 33 <a href="#carousel-ex" class="right carousel-control" role="button" data-slide="next"> 34 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 35 <span class="sr-only">Next</span> 36 </a> 37</div>
3.5. article.component.html
1<div class="content-wrap"> 2 <div class="article"> 3 <h3 class="title">Angular常用操作</h3> 4 <p class="zy"> 5 本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容， 6 打算在整个angular教程结束后再单独介绍... 7 </p> 8 <p class="info"> 9 <span>2018-11-18 21:15:</span> 10 <span>阅读数：37</span> 11 <span>评论数：2</span> 12 </p> 13 </div> 14 <div class="article"> 15 <h3 class="title">Angular常用操作</h3> 16 <p class="zy"> 17 本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容， 18 打算在整个angular教程结束后再单独介绍... 19 </p> 20 <p class="info"> 21 <span>2018-11-18 21:15:</span> 22 <span>阅读数：37</span> 23 <span>评论数：2</span> 24 </p> 25 </div> 26 <div class="article"> 27 <h3 class="title">Angular常用操作</h3> 28 <p class="zy"> 29 本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容， 30 打算在整个angular教程结束后再单独介绍... 31 </p> 32 <p class="info"> 33 <span>2018-11-18 21:15:</span> 34 <span>阅读数：37</span> 35 <span>评论数：2</span> 36 </p> 37 </div> 38 <div class="article"> 39 <h3 class="title">Angular常用操作</h3> 40 <p class="zy"> 41 本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容， 42 打算在整个angular教程结束后再单独介绍... 43 </p> 44 <p class="info"> 45 <span>2018-11-18 21:15:</span> 46 <span>阅读数：37</span> 47 <span>评论数：2</span> 48 </p> 49 </div> 50 51</div>
3.6. article.component.css
1.content-wrap{ 2 box-shadow: 0 0 3px rgb(220, 220, 220); 3 background: white; 4} 5.article{ 6 padding: 10px; 7 margin: 5px 0px; 8 border-bottom: 1px solid rgb(240,240,240); 9} 10 11.article h3{ 12 font-size: 18px; 13 font-weight: bold; 14 color: #333; 15 font-family: "SF Pro Display",Roboto,Noto,Arial,"PingFang SC",sans-serif; 16} 17.zy{ 18 font-size: 14px; 19 color: #999; 20 letter-spacing: 0.5px; 21 font-family: "SF Pro Display",Roboto,Noto,Arial,"PingFang SC",sans-serif; 22} 23 24.info{ 25 color: #6b6b6b; 26 margin-top: 10px; 27}
3.7. sidebar.component.html
1<div class="panel panel-info hot"> 2 <div class="panel-heading"> 3 热门文章 4 </div> 5 <div class="panel-body"> 6 <div class="media"> 7 <div class="media-left"> 8 <a href="#"> 9 <img src="https://via.placeholder.com/64" alt="" class="media-object"> 10 </a> 11 </div> 12 <div class="media-body"> 13 <h4 class="media-heading">JDK环境变量配置</h4> 14 <p>JDK环境变量配置，首先从官网下载对应版本..</p> 15 </div> 16 </div> 17 <div class="media"> 18 <div class="media-left"> 19 <a href="#"> 20 <img src="https://via.placeholder.com/64" alt="" class="media-object"> 21 </a> 22 </div> 23 <div class="media-body"> 24 <h4 class="media-heading">JDK环境变量配置</h4> 25 <p>JDK环境变量配置，首先从官网下载对应版本..</p> 26 </div> 27 </div> 28 <div class="media"> 29 <div class="media-left"> 30 <a href="#"> 31 <img src="https://via.placeholder.com/64" alt="" class="media-object"> 32 </a> 33 </div> 34 <div class="media-body"> 35 <h4 class="media-heading">JDK环境变量配置</h4> 36 <p>JDK环境变量配置，首先从官网下载对应版本..</p> 37 </div> 38 </div> 39 <div class="media"> 40 <div class="media-left"> 41 <a href="#"> 42 <img src="https://via.placeholder.com/64" alt="" class="media-object"> 43 </a> 44 </div> 45 <div class="media-body"> 46 <h4 class="media-heading">JDK环境变量配置</h4> 47 <p>JDK环境变量配置，首先从官网下载对应版本..</p> 48 </div> 49 </div> 50 </div> 51</div>
3.8. sidebar.component.css
1.hot h4{ 2 margin-top: 0; 3} 4.hot .media-body h4{ 5 color: #333; 6 font-size: 16px; 7} 8.hot .media-body p{ 9 color: #999; 10 font-size:12px; 11}
3.9. footer.component.html
1<div class="container"> 2 <hr> 3 <footer> 4 <div class="row"> 5 <div class="col-lg-12">footer部分</div> 6 </div 7 </footer> 8</div>