《Angular2入门系列基础》——angular2组件入门（一）

【前言】

     从angular2架构方面看包括8个部分：模块（modules）,组件（Components）模板（Templates）元数据（Metadata）数据绑定（Data Binding）指令（Directives）服务（Services）依赖注入（Dependency Injection）；稍稍讲解一下组件！

【内容】

 Angular应用是由组件组成的。组件是由html和组件类组成，组件类控制了视图。如下所示的代码：

import { Component } from '@angular/core';   //导入组件@Component({  selector: 'my-app',   //html中的标签  template: `<h1>Hello {{name}}</h1>`    //模板})export class AppComponent { name = 'World'; }     //供享用的类

1.每个组件都以@Component装饰器函数开始，它接受一个元数据对象参数。该元素对象描述了 HTML 模板和组件类是如何一起工作的。

   科普：元数据：元数据被定义为：描述数据及其环境的数据。

2.selector属性为 Angular 指定了在index.html中的自定义<my-app>标签里显示该组件。

3.template属性定义了<h1>标题里的一条消息。 该消息以 “Hello” 开始，以 Angular插值绑定表达式{{name}}结束。 在运行时，Angular 用组件的name属性值替换{{name}}。 插值绑定是 Angular 的特征之一。

在index.html页面中就可以直接使用my-app标签：

<my-app><h1>Loading....... <h1></my-app>

当运行之后就会出现如下的效果图：

【总结】

     其实angular2的架构思想真的是非常巧妙，但是作为新手，我只能在慢慢学习体会中逐步加深理解，希望这篇博文对正在学习angular2的你有用！