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-搭建项目环境的更多相关文章

  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. Vue.js学习(常用指令)

    Vue.js的指令是以v-开头,它们用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性. 本文参考:htt ...

  2. 几个 h5页面效果和 自动 app 生成网站 微页

    用MAKA.易企秀.兔展就够了,MAKA和兔展用户体验好些,易企秀广告有点丑,不过模板多一些. 至于交互类工具,iH5.Mugeda.Epub360这三个里面选一个就行. -------------- ...

  3. Forword与sendRedirect的区别

    二.本质区别 解释一 一句话,转发是服务器行为,重定向是客户端行为.为什么这样说呢,这就要看两个动作的工作流程: 转发过程:客户浏览器发送http请求——>web服务器接受此请求——>调用 ...

  4. centos虚拟机网卡配置

    连接模式为NAT

  5. [Swift] 创建一个对象

    创建一个对象 先写一个People类 // // People.swift // Class // // Created by YouXianMing on 15/3/18. // Copyright ...

  6. Android SDK和ADT无法更新的解决办法

    重要的东西要标红: 经过另外一台电脑测试,按照第二步设置好hosts后,可以一并解决 SDK 和 ADT的更新,无需单独设置SDK Manager. 这里还是写出如何设置SDK Manager以作记录 ...

  7. Handlebars.js中集合(list)通过中括号的方式取值

    有这么一个需求,在一个table中,tr是通过each取值,取出的值要与table标题相对应,如何实现?例如: <table> <thead> <tr> {{#ea ...

  8. matlab 黑白格子

    有一个生成黑白格子的函数 40 这个参数是改变大小的 img=checkerboard(40)<0.5; figure; imshow(img,[])

  9. angularJs的作用域和依赖注入

    一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找  &rootScope这是全局作用域 <!DOCTYPE HTML&g ...

  10. 51nod 1967路径定向(dfs、欧拉回路)

    1967 路径定向 基准时间限制:1.2 秒 空间限制:262144 KB 分值: 80 难度:5级算法题 给出一个有向图,要求给每条边重定向,使得定向后出度等于入度的点最多,输出答案和任意一种方案 ...