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_