Angular学习笔记：Day2 Make A Componen

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运行结果

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