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`

<app-header></app-header>

<div class="container">

	<div class="row">

		<div class="col-md-9">

			<app-carousel></app-carousel>

			<app-article></app-article>

		</div>

		<div class="col-md-3">

			<app-sidebar></app-sidebar>

		</div>

	</div>

</div>

<app-footer></app-footer>

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`

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

	<div class="container">

		<div class="navbar-header">

			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex">

				<span class="icon-bar"></span>

				<span class="icon-bar"></span>

				<span class="icon-bar"></span>

			</button>

			<a href="" class="navbar-brand">博客家</a>

		</div>

		<div class="collapse navbar-collapse navbar-ex">

			<ul class="nav navbar-nav">

				<li><a href="#">首页</a></li>

				<li><a href="#">联系我们</a></li>

				<li><a href="#">关于我们</a></li>

			</ul>

			<form class="navbar-form navbar-left">

				<div class="form-group">

					<input type="text" class="form-control" placeholder="搜索内容">

				</div>

				&nbsp;<button type="submit" class="btn btn-default">Search</button>

			</form>

			<div class="navbar-nav navbar-right">

				<button class="navbar-btn btn btn-info">登录</button>&nbsp;

				<button class="navbar-btn btn btn-defualt">注册</button>

			</div>

			<!--

			<ul class="nav navbar-nav navbar-right">

				<li class="dropdown">

					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"

					aria-haspopup="true" aria-expanded="false">

					<span class="glyphicon glyphicon-user"></span> <span class="caret"></span></a>

					<ul class="dropdown-menu">

						<li><a href="#">我的博客</a></li>

						<li><a href="#">我的收藏</a></li>

						<li><a href="#">站内信</a></li>

						<li role="separator" class="divider"></li>

						<li><a href="#">个人中心</a></li>

						<li><a href="#">帐号设置</a></li>

					</ul>

				</li>

			</ul>

			-->

		</div>

	</div>

</nav>

3.4. `carousel.component.html`

<div id="carousel-ex" class="carousel slide" data-ride="carousel">

	<ol class="carousel-indicators">

		<li data-target="carousel-ex" data-slide-to="0" class="active"></li>

		<li data-target="carousel-ex" data-slide-to="1"></li>

		<li data-target="carousel-ex" data-slide-to="2"></li>

	</ol>

	<div class="carousel-inner listbox">

		<div class="item active">

			<img src="https://via.placeholder.com/900X300" alt="">

			<div class="carousel-caption">

				图片一

			</div>

		</div>

		<div class="item">

			<img src="https://via.placeholder.com/900X300" alt="">

			<div class="carousel-caption">

				图片二

			</div>

		</div>

		<div class="item">

			<img src="https://via.placeholder.com/900X300" alt="">

			<div class="carousel-caption">

				图片三

			</div>

		</div>

	</div>

	<a href="#carousel-ex" class="left carousel-control" role="button" data-slide="prev">

		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

		<span class="sr-only">Previous</span>

	</a>

	<a href="#carousel-ex" class="right carousel-control" role="button" data-slide="next">

		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

		<span class="sr-only">Next</span>

	</a>

</div>

3.5. `article.component.html`

<div class="content-wrap">

	<div class="article">

		<h3 class="title">Angular常用操作</h3>

		<p class="zy">

			本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容，

			打算在整个angular教程结束后再单独介绍...

		</p>

		<p class="info">

			<span>2018-11-18 21:15:</span>&nbsp;&nbsp;

			<span>阅读数：37</span>&nbsp;&nbsp;

			<span>评论数：2</span>&nbsp;&nbsp;

		</p>

	</div>

	<div class="article">

		<h3 class="title">Angular常用操作</h3>

		<p class="zy">

			本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容，

			打算在整个angular教程结束后再单独介绍...

		</p>

		<p class="info">

			<span>2018-11-18 21:15:</span>&nbsp;&nbsp;

			<span>阅读数：37</span>&nbsp;&nbsp;

			<span>评论数：2</span>&nbsp;&nbsp;

		</p>

	</div>

	<div class="article">

		<h3 class="title">Angular常用操作</h3>

		<p class="zy">

			本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容，

			打算在整个angular教程结束后再单独介绍...

		</p>

		<p class="info">

			<span>2018-11-18 21:15:</span>&nbsp;&nbsp;

			<span>阅读数：37</span>&nbsp;&nbsp;

			<span>评论数：2</span>&nbsp;&nbsp;

		</p>

	</div>

	<div class="article">

		<h3 class="title">Angular常用操作</h3>

		<p class="zy">

			本节来介绍angular中的操作以及TypeScript语法的简单介绍。关于TypeScript语法的更为详细的内容，

			打算在整个angular教程结束后再单独介绍...

		</p>

		<p class="info">

			<span>2018-11-18 21:15:</span>&nbsp;&nbsp;

			<span>阅读数：37</span>&nbsp;&nbsp;

			<span>评论数：2</span>&nbsp;&nbsp;

		</p>

	</div>

</div>

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`

<div class="panel panel-info hot">

	<div class="panel-heading">

		热门文章

	</div>

	<div class="panel-body">

		<div class="media">

			<div class="media-left">

				<a href="#">

					<img src="https://via.placeholder.com/64" alt="" class="media-object">

				</a>

			</div>

			<div class="media-body">

				<h4 class="media-heading">JDK环境变量配置</h4>

				<p>JDK环境变量配置，首先从官网下载对应版本..</p>

			</div>

		</div>

		<div class="media">

			<div class="media-left">

				<a href="#">

					<img src="https://via.placeholder.com/64" alt="" class="media-object">

				</a>

			</div>

			<div class="media-body">

				<h4 class="media-heading">JDK环境变量配置</h4>

				<p>JDK环境变量配置，首先从官网下载对应版本..</p>

			</div>

		</div>

		<div class="media">

			<div class="media-left">

				<a href="#">

					<img src="https://via.placeholder.com/64" alt="" class="media-object">

				</a>

			</div>

			<div class="media-body">

				<h4 class="media-heading">JDK环境变量配置</h4>

				<p>JDK环境变量配置，首先从官网下载对应版本..</p>

			</div>

		</div>

		<div class="media">

			<div class="media-left">

				<a href="#">

					<img src="https://via.placeholder.com/64" alt="" class="media-object">

				</a>

			</div>

			<div class="media-body">

				<h4 class="media-heading">JDK环境变量配置</h4>

				<p>JDK环境变量配置，首先从官网下载对应版本..</p>

			</div>

		</div>

	</div>

</div>

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`

<div class="container">

	<hr>

	<footer>

		<div class="row">

			<div class="col-lg-12">footer部分</div>

		</div

	</footer>

</div>

Angular7教程-05-搭建项目环境的更多相关文章

物理引擎Havok教程(一)搭建开发环境
物理引擎Havok教程(一)搭建开发环境网上关于Havok的教程实在不多,并且Havok学习起来还是有一定难度的,所以这里写了一个系列教程,希望可以帮到读者.这是第一期. 一.Havok物理引擎简单 ...
SpringCloud系列二：Restful 基础架构（搭建项目环境、创建 Dept 微服务、客户端调用微服务）
1.概念:Restful 基础架构 2.具体内容对于 Rest 基础架构实现处理是 SpringCloud 核心所在,其基本操作形式在 SpringBoot 之中已经有了明确的讲解,那么本次为了清 ...
02 - Unit01：服务器返回数据的json处理+搭建项目环境
服务器返回数据的json处理+搭建项目环境服务器返回数据的json处理 springMVC JSP响应流程请求 -->DispatcherServlet -->HandlerMappi ...
Java电商项目-1.构建数据库,搭建项目环境
目录到Github获取源码请点击此处一. 数据库还原二. Mybatis逆向生成工具的使用三. 搭建项目环境四. 在linux虚拟机上部署zookeeper, 搭建Dubbo服务. linu ...
IDEA中搭建项目环境
ladies and gentlemen,Welcome to my blog! 本文主要在IDEA中搭建项目环境. 有问题和指正,欢迎下方留言~ 1. 使用GitLab将项目下载下来 1.1 选 ...
vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
ExtJS4 MVC开发教程：搭建开发环境
原文地址:http://www.lihuai.net/qianduan/extjs/864.html 博主系列教程:http://www.lihuai.net/qianduan/extjs 在所有的J ...
Hadoop基础教程之搭建开发环境及编写Hello World
整个Hadoop是基于Java开发的,所以要开发Hadoop相应的程序就得用JAVA.在linux下开发JAVA还数eclipse方便. 1.下载进入官网:http://eclipse.org/do ...
使用docker搭建项目环境
# 清屏 clear # 查看当前文件夹下的列表 ls # 跳目录 cd ~ 代表当前用户文件夹 cd / 代表根目录 cd..返回上一级目录 cd #sudo 使用超级管理员创建文件夹不加sudo ...

随机推荐

css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？
auto 你可以理解为一种自动/自适应的概念比如现在项目需要一个宽度为960px的整体布局居中根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...
一键清理 Nexus 中无用的 Docker 镜像
现许多团队使用 Nexus 来管理 Docker 镜像,产品不断迭代,镜像仓库占用的磁盘空间也越来越大.由于 Nexus 的控制台并未提供批量操作镜像功能,清理镜像十分不便.本文分享一个清理 Nexu ...
Get a “step-by-step” evaluation in Mathematica
Is it possible in Mathematica to get a step-by-step evaluation of some functions; that's to say, out ...
String str = "1,2,3,4,5,6" 如何将这个字符串转换成int数组
String str = "1,2,3,4,5,6"; string[] strS = str.Split(','); int[] num = new int[strS.Lengt ...
4星|《助推（实践版）》：英国政府用AB测试检验政策效果的经验
助推:小行动如何推动大变革(实践版)(诺贝尔经济学奖得主理查德•塞勒的助推实践) 作者作为学者说服英国政府实施助推策略的经过,提到一些具体主推策略. 所谓的助推,很像IT业流行的AB测试,对政策的执行 ...
ZT extern "C"的用法解析
extern "C"的用法解析 1.引言 C++语言的创建初衷是“a better C”,但是这并不意味着C++中类似C语言的全局变量和函数所采用的编译和连接方式与C语言完全相同. ...
css3-鼠标经过产品列表图片放大显示文字（兼容IE9以上不含IE9）
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...
快速搭建redis单机版和redis集群版
单机版第一步:需要安装redis所需的C语言环境,若虚拟机联网,则执行 yum install gcc-c++ 第二步:redis的源码包上传到linux系统第三步:解压缩redis tar ...
108.UIView关于布局和约束的方法(AutoLayout)
http://blog.csdn.net/wangyanchang21/article/details/52270136 关于布局(UIViewHierarchy) 1.layoutSubviews ...
2594. [WC2006]水管局长数据加强版【LCT+最小生成树】
Description SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到一 ...

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

1. 本节说明

2. 搭建框架

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

3.1. app.component.html

3.2. 全局样式文件 style.css

3.3. header.component.html

3.4. carousel.component.html

3.5. article.component.html

3.6. article.component.css

3.7. sidebar.component.html

3.8. sidebar.component.css

3.9. footer.component.html