碼上快樂

相關內容    簡體    繁體

Angular7教程-05-搭建項目環境

本文轉載自   查看原文   2018-11-18 12:50   1089    angular7/ angular/ 前端框架/ 前端

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>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Angular7教程-01-Angular開發環境配置 Angular7教程-02-Angular項目目錄及基本文件說明 Spring Boot -05- 多模塊結構項目構建與測試（詳細圖文教程）IDEA 版 Angular7教程-03-Angular常用操作(上) Angular7教程-04-Angular常用操作（下） Angular7教程-06-頁面與數據交互 2019年Angular7——安裝搭建路由 05-移動端開發教程-CSS3兼容處理 Angular入門到精通系列教程（4）- 開發環境搭建以及入手項目 Angular7 Drag and Drop
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM