Angular7教程

Stella981
• 阅读 357

1. 本节说明

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

Angular7教程

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>
点赞
收藏
评论区
推荐文章
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Easter79 Easter79
1年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
Wesley13 Wesley13
1年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实
helloworld_34035044 helloworld_34035044
7个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue