Component(组件)是Angular中的一种新特性,按照官方说是AngularJS1中指令(Directive)的新版本。其实就个人理解而看,Component是一种让我们自定义各种能被浏览器识别的标签,就和html5中的<div>,<video>标签类似。不过Angular中的Component能够通过一个标签完成更多的功能,也能够针对该标签进行css样式的定制。
Day1中,我们已经能够让用Angular实现的hello world程序运行了,那么接下来的工作中,我们开始往该程序添加Component,来完成一些基本的功能。
首先,我们需要打开命令台工具,这里我使用的是Cmder(一款能够取代WIN CMD的神器):
要使用Angular-cli来创建Component,我们需要进入到src目录:
我们可以使用命令:ng generate conponent name 来创建一个新的component,等运行成功后,我们可以看到我们的项目结构发生了变化:
可以看到在app/src目录下,自动添加了hello-world-1文件夹,该文件夹中共有四个文件,分别是:该component的样式文件,基于html的视图,【然后这个文件目前不知道是干啥的】,最后是该component的控制器。
我们目前只需要修改.html文件和控制器的代码就可以了。
对于hello-world-1 这个component而言,它的功能就是向屏幕输出:hello world。也就是我只要写了<hello-world-1></hello-world-1>这样的代码,浏览器就知道:“哦,又要我输出一次hello world了”,浏览器二话不说就会按照你定义好的样式在屏幕上输出一个hello world。这就是我对于component的理解!
现在,我们来对hello-world进行修改,首先在component.html文件中,定义我们需要在该组件内显示的内容,代码如下:
可以看出,该部分完全使用html来实现,因此你需要有一定的html基础。在这里,我只需要简单的显示一个文本就可以了。
接下来,我们对样式进行修改:
控制器暂时先不用修改,就这样我们自定义的一个componet就大功告成了,bubibi,我们来看一下运行效果吧~~~
为了让hello-world运行,我们需要对/src/app.component.html进行修改:
在该文件中,直接添加我们自定义的标签就可以了~
今天就差不多到这里了,由于前几天和室友出去春游去了,在外面没有网络,因此没有更新文章。但是很感激前几天为我点赞的朋友,提醒了我该更新文章了。