Angular最新教程-第五节编写第一个组件

讲了四节了，一行代码都没有敲，虽说磨刀不误砍柴工，但我们也是时候，上场砍点啥啦。

今天我们就来编写我们的第一个组件，效果图如下。



首先我们使用angular-cli的generate命令来帮我们自动化创建组件。

$ ng generate component site_status



通过分析效果图我们知道了我们有8个数据需要绑定到页面上。

我们先打开src\app\site-status\site-status.component.html



编写我们需要的页面元素。并绑定数据变量。

在ng1中，js我们大概会这么写。

var siteStatus  = {
users:'14978',
visitors:'20930244',
articles:'2538',
comments:'8075',
maxOnlineNum:'291',
maxOnlineTime:'17-04-25 17:23',
onlineNum:'144',
onlineUsers:'2'
};

但是在typescript中，要使用变量要先声明变量类型。

所以我们在src\app\site-status\site-status.component.ts中要先编写

siteStatus:{
users:string,
visitors:string,
articles:string,
comments:string,
maxOnlineNum:string,
maxOnlineTime:string,
onlineNum:string,
onlineUsers:string
};

声明siteStatus是一个对象，里面的属性也要声明类型。

然后在之后的函数中再给这个对象赋值。

当你不太确定属性类型时，你可以使用any。

当一个变量类型被声明成any时，他可以接受任意类型的数据，

有点类似var声明。

这节课我们先不讲解http请求这部分内容。

所以我们这里在构造函数中给这个变量赋值。

完整代码如下：



我们保存运行一下。（调试方法参照前几节课）

我们发现，运行界面并没有我们编写的这个组件，

因为我们还没有在项目中使用到这个组件。

这句话有点废话。但是我们可以明白一个事情，

我们编写过程只是一个声明过程，

在未被使用的时候，系统不会去加载运行他们。

后续使用打包优化的时候，没有使用到的组件，

都不会被打进发布包里面，保证了网站的整体较小。

这在后续章节中讲解。

这里我们在打开src\app\app.component.html，在这里面使用我们新定义的组件。



保存。



这时候就有了我们编写的内容了。但是效果和效果图不太一样，

所以我们给这个界面加入一些样式。

我们打开app\site-status\site-status.component.ts组件的ts文件，查看，

该组件关联的样式文件是

'./site-status.component.css'

在里面加入我们想要的样式。



加入样式之后（详细样式文件请查看源码），如下。



基本符合效果图了，但是在标题左侧还少了一个小图标。

所以我们到阿里巴巴矢量图库去下一个”仪表盘”的图标，

放到assets文件夹中，这个文件夹里面的文件会被一起打包的。

把图标加到html中并加上样式，完成和效果图一样的效果。



文中图标来自：http://www.iconfont.cn/search/index?searchType=icon&q=%E4%BB%AA%E8%A1%A8%E7%9B%98

效果图来自：http://www.angularjs.cn/

源代码：百度云 链接：http://pan.baidu.com/s/1i5pFlXz 密码：o1qw

码云：https://gitee.com/xiaohuOni/oniplan-ng

有码云的帮忙给个star，感谢。

这节课的内容就到这里完成了。

感谢您的阅读。

我是莽夫，希望你开心。

如果你觉得本文对你有帮助，请扫描文末二维码，支持博主原创。

希望大家关注我的个人公众号ionic_