Angular7教程-05-搭建项目环境

1. 本节说明

本节以及后面的内容我们将会通过搭建一个简单的博客程序来对angular进行介绍，项目使用前端框架是bootstrap.版本v3.3.7，另外需要安装jquery.关于bootstrap,jquery的安装方法第一篇中有讲解，不再赘述。本节内容由于搭建页面框架的关系，主要是bootstrap的内容，与angular关系不太大。最后的效果如下：

2. 搭建框架

首先，我们将上面的页面大致分为5个区域，分别是头部（header)，轮播图（carousel)，文章区域(article)，侧边栏（sidebar),底部（footer）。

进入到项目目录，分别创建这5个组件：

ng g c header
 ng g c carousel
 ng g c artile
 ng g c sidebar
 ng g c footer

3. 编写模板文件和CSS文件

主要是bootstrap和css的内容，下面贴出文件的源码，不再做详细解释：

3.1. app.component.html

3.2. 全局样式文件 style.css

/* You can add global styles to this file, and also import other style files */
 html,body{margin: 0;padding: 0;font-size: 12px;background-color: rgb(243,243,243) !important;
 }
 body{padding-top: 70px;
 }

3.3. header.component.html

3.4. carousel.component.html

图片一
图片二
图片三
PreviousNext
 

3.5. article.component.html

Angular常用操作
本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容，打算在整个angular教程结束后再单独介绍...
2018-11-18 21:15:  阅读数：37  评论数：2  
Angular常用操作
本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容，打算在整个angular教程结束后再单独介绍...
2018-11-18 21:15:  阅读数：37  评论数：2  
Angular常用操作
本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容，打算在整个angular教程结束后再单独介绍...
2018-11-18 21:15:  阅读数：37  评论数：2  
Angular常用操作
本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容，打算在整个angular教程结束后再单独介绍...
2018-11-18 21:15:  阅读数：37  评论数：2  

3.6. article.component.css

.content-wrap{box-shadow: 0 0 3px rgb(220, 220, 220);background: white;
 }
 .article{padding: 10px;margin: 5px 0px;border-bottom: 1px solid rgb(240,240,240);
 }.article h3{font-size: 18px;font-weight: bold;color: #333;font-family: "SF Pro Display",Roboto,Noto,Arial,"PingFang SC",sans-serif;
 }
 .zy{font-size: 14px;color: #999;letter-spacing: 0.5px;font-family: "SF Pro Display",Roboto,Noto,Arial,"PingFang SC",sans-serif;
 }.info{color: #6b6b6b;margin-top: 10px;
 }

3.7. sidebar.component.html

热门文章
JDK环境变量配置
JDK环境变量配置，首先从官网下载对应版本..
JDK环境变量配置
JDK环境变量配置，首先从官网下载对应版本..
JDK环境变量配置
JDK环境变量配置，首先从官网下载对应版本..
JDK环境变量配置
JDK环境变量配置，首先从官网下载对应版本..
 

3.8. sidebar.component.css

.hot h4{margin-top: 0;
 }
 .hot .media-body h4{color: #333;font-size: 16px;
 }
 .hot .media-body p{color: #999;font-size:12px;
 }

3.9. footer.component.html

转载于:https://www.cnblogs.com/dwllm/p/9977568.html