Angular组件介绍

1.背景介绍

Angular组件的必备元素

1.组件元数据装饰器：@Component()

告诉angular如何处理TS类，里面包含多个属性，这些属性的值叫元数据，angular根据这些元数据来渲染组件并执行逻辑。

2.模板：Template。通过组件的模板来定义组件的外观， 渲染组件。一般在模板中使用angular的数据绑定语法来呈现控制器中的数据

3.控制器：Controller。控制器就是组件的TS类，被装饰器装饰，包含组件所有的属性和方法。模板展现控制器的数据，控制器处理模板上发生的事件。

2.知识剖析

首先创建一个组件：ng g component user

会自动在src/app目录下面创建user文件夹，里面有4个这个组件的文件：组件定义文件ts,css文件，html模板，自动化测试文件

查看ts文件，里面的selector有个配置：'app-user',在别的地方使用这个组件的时候，写上这个标签就能被渲染。

在angular-cli.json里面的prefix可以修改app前缀，换成自定义的名字或者去掉。

app.component.ts介绍

首先从angular核心模块里引入一个Component的装饰器

下面是组件元数据装饰器@component，所有的组件必须使用一个装饰器@Component来注解

最下面的的export class AppComponent是TS类，告诉app.component是一个组件。在TS中，我们用装饰器附加元数据到类上。元数据会告诉angular如何讲TS类处理成组件。

元数据

selector:这个组件可以通过app标签来调用，展示这个组件模板的内容。

templateUrl：定义组件的html文件为模板

styleUrls：组件的css文件

控制器下面有个属性叫title，这个属性的值会被展示到浏览器的页面中。

app.module.ts介绍

一个模块也是一个带着装饰器的TS类。最上边是一组import，引入模块需要的包，然后用@NgModule装饰器声明模块

在声明中，首先用declarations属性声明模块中有什么组件，指令，管道。其次，imports属性声明还需要什么模块，这里声明了三个angular框架提供的模块，当你引用这些模块后，你就可以使用这些模块提供的指令和服务providers:默认情况下是空的，用来声明模块中提供了什么服务

providers:默认情况下是空的，用来声明模块中提供了什么服务

bootstrap属性声明了模块的主组件是什么

3.常见问题

启动时加载了哪个页面？

启动时加载了哪些脚本？

这些脚本做了什么事？

4.解决方案

打开angular-cli.json

有一个叫“apps”这样的数组，数组中的对象有一个index属性和main属性。

默认情况下index属性指向src/index.html，它是启动时加载的页面。

main属性指向src/main.ts文件，它是启动时加载的脚本。

main.ts是整个应用的起点

开头我们要导入必要的库‘./polyfills.ts’,以便运行在老版本浏览器中

从浏览器模块中导入platformBrowserDynami方法，告诉angular使用哪个模块来启动整个应用

导入angular核心模块中提供的enableProdMode方法，用来关闭开发者模式

导入AppMoudle，也就是命令行工具生成的整个应用的主模块

最后调用bootstrapModule方法传入AppModule作为启动模块来启动应用

AppModule作为主模块会首先加载，然后分析AppModule需要依赖那些模块并加载这些模块，比如app.module.ts中BrowserModule模块，加载这个模块以后会分析这个模块还需要什么模块再去加载，依次类推，直道加载完所有所需的依赖。

加载完后会在index.html中寻找启动模块AppModule指定的主组件AppComponent对应的CSS选择器app-root，这时候会用app.component.html替换掉这个app标签。

在整个过程完成之前，页面会展示app标签中的内容，也就是“loading”这个字符串。

angular里component怎么使用全局的样式?

比如要加入bootstrap里面的css文件，

5.参考文献

大漠穷秋的博客：https://my.oschina.net/mumu/blog">https://my.oschina.net/mumu/blog

PPT：http://chowhengguang.oschina.io/demo/PPT9.html

Angular组件介绍.mp4_腾讯视频