1. 本节说明

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

2. 搭建框架

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

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

  1. ng g c header
  2. ng g c carousel
  3. ng g c artile
  4. ng g c sidebar
  5. ng 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 */
  2. html,body{
  3. 	margin: 0;
  4. 	padding: 0;
  5. 	font-size: 12px;
  6. 	background-color: rgb(243,243,243) !important;
  7. }
  8. body{
  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. 				&nbsp;<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>&nbsp;
  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>
  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>
  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>&nbsp;&nbsp;
  10. 			<span>阅读数：37</span>&nbsp;&nbsp;
  11. 			<span>评论数：2</span>&nbsp;&nbsp;
  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>&nbsp;&nbsp;
  22. 			<span>阅读数：37</span>&nbsp;&nbsp;
  23. 			<span>评论数：2</span>&nbsp;&nbsp;
  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>&nbsp;&nbsp;
  34. 			<span>阅读数：37</span>&nbsp;&nbsp;
  35. 			<span>评论数：2</span>&nbsp;&nbsp;
  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>&nbsp;&nbsp;
  46. 			<span>阅读数：37</span>&nbsp;&nbsp;
  47. 			<span>评论数：2</span>&nbsp;&nbsp;
  48. 		</p>
  49. 	</div>
  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. }
  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. }
  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>

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

  1. 物理引擎Havok教程(一)搭建开发环境

    物理引擎Havok教程(一)搭建开发环境 网上关于Havok的教程实在不多,并且Havok学习起来还是有一定难度的,所以这里写了一个系列教程,希望可以帮到读者.这是第一期. 一.Havok物理引擎简单 ...

  2. SpringCloud系列二：Restful 基础架构（搭建项目环境、创建 Dept 微服务、客户端调用微服务）

    1.概念:Restful 基础架构 2.具体内容 对于 Rest 基础架构实现处理是 SpringCloud 核心所在,其基本操作形式在 SpringBoot 之中已经有了明确的讲解,那么本次为 了清 ...

  3. 02 - Unit01：服务器返回数据的json处理+搭建项目环境

    服务器返回数据的json处理+搭建项目环境 服务器返回数据的json处理 springMVC JSP响应流程 请求 -->DispatcherServlet -->HandlerMappi ...

  4. Java电商项目-1.构建数据库,搭建项目环境

    目录 到Github获取源码请点击此处 一. 数据库还原 二. Mybatis逆向生成工具的使用 三. 搭建项目环境 四. 在linux虚拟机上部署zookeeper, 搭建Dubbo服务. linu ...

  5. IDEA中搭建项目环境

    ladies and gentlemen,Welcome to my blog! 本文主要在IDEA中搭建项目环境. 有问题和指正,欢迎下方留言~ 1. 使用GitLab将项目下载下来   1.1 选 ...

  6. vue教程3-webpack搭建项目

    vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...

  7. ExtJS4 MVC开发教程：搭建开发环境

    原文地址:http://www.lihuai.net/qianduan/extjs/864.html 博主系列教程:http://www.lihuai.net/qianduan/extjs 在所有的J ...

  8. Hadoop基础教程之搭建开发环境及编写Hello World

    整个Hadoop是基于Java开发的,所以要开发Hadoop相应的程序就得用JAVA.在linux下开发JAVA还数eclipse方便. 1.下载 进入官网:http://eclipse.org/do ...

  9. 使用docker搭建项目环境

    # 清屏 clear # 查看当前文件夹下的列表 ls # 跳目录 cd ~ 代表当前用户文件夹 cd / 代表根目录 cd..返回上一级目录 cd #sudo 使用超级管理员创建文件夹 不加sudo ...

随机推荐

  1. C#可遍历的集合

    public class Product { /// <summary> /// 自增ID /// </summary> public int ID { get; set; } ...

  2. 微服务架构之spring cloud zipkin

    Spring Cloud Zipkin是微服务的链路跟踪组件,帮助详细了解一次request&response的总计时,及每个微服务的消耗时间.微服务名称.异常信息等等过程信息. (一) 版本 ...

  3. .NET 跨平台服务端资料

    OWIN Web API:  http://www.asp.net/web-api/overview/hosting-aspnet-web-api/use-owin-to-self-host-web- ...

  4. CountDownTimer的用法及原理

    1.主线程中使用 值得注意的是,CountDownTimer可以在主线程中直接使用.验证一下回调的执行线程.在主线程中执行如下代码 CountDownTimer countDownTimer = , ...

  5. svn提示out of date的解决方法

    步骤1. team–>update 步骤2. team–>Show Tree Conflict–>标记"冲突已解决" 步骤3. team–>commit

  6. GIT:如何管理本机的多个ssh密钥（多个远程仓库账号）

    最近在学习git,首先推荐一个个人认为很不错的git教程,学习后,从git新手变成了git入门了,仍需继续努力. 廖老师的git学习教程(其他git基础知识点,本篇博客就不做介绍了,自己看教程学习吧, ...

  7. minimal sparse ruler problem 最少尺子刻度问题

    一个长度13的尺子,如果在1位置刻点可以量出1和12,13三种刻度.那么至少刻几个点,可以直接量出1-13所有的长度,分别刻在哪几个位置? 注:必须是直接量.即在尺子上能找出一个1-13任意的整数长度 ...

  8. 乘风破浪：LeetCode真题_011_Container With Most Water

    乘风破浪:LeetCode真题_011_Container With Most Water 一.前言 下面我们继续进行编程练习,可以说对于实际问题的活学活用是非常重要的.比如我们这次的题目,就需要从中 ...

  9. vue开发知识点汇总

    网址: https://www.tuicool.com/articles/Zb2Qre2;

  10. BZOJ 1050 旅行comf 并查集+枚举下界

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1050 题目大意: 给你一个无向图,N(N<=500)个顶点, M(M<=5 ...