Angular学习笔记:Day2 Make A Component

Component(组件)是Angular中的一种新特性,按照官方说是AngularJS1中指令(Directive)的新版本。其实就个人理解而看,Component是一种让我们自定义各种能被浏览器识别的标签,就和html5中的<div>,<video>标签类似。不过Angular中的Component能够通过一个标签完成更多的功能,也能够针对该标签进行css样式的定制。

Day1中,我们已经能够让用Angular实现的hello world程序运行了,那么接下来的工作中,我们开始往该程序添加Component,来完成一些基本的功能。

首先,我们需要打开命令台工具,这里我使用的是Cmder(一款能够取代WIN CMD的神器):

项目结构图

要使用Angular-cli来创建Component,我们需要进入到src目录:

创建component

我们可以使用命令:ng generate conponent name 来创建一个新的component,等运行成功后,我们可以看到我们的项目结构发生了变化:

hello-world-1 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文件中,定义我们需要在该组件内显示的内容,代码如下:

hello-world 视图

可以看出,该部分完全使用html来实现,因此你需要有一定的html基础。在这里,我只需要简单的显示一个文本就可以了。

接下来,我们对样式进行修改:

hello-world 样式

控制器暂时先不用修改,就这样我们自定义的一个componet就大功告成了,bubibi,我们来看一下运行效果吧~~~

为了让hello-world运行,我们需要对/src/app.component.html进行修改:

app.html

在该文件中,直接添加我们自定义的标签就可以了~

hello-world运行结果

今天就差不多到这里了,由于前几天和室友出去春游去了,在外面没有网络,因此没有更新文章。但是很感激前几天为我点赞的朋友,提醒了我该更新文章了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容