Angular基础入门2——开发环境的搭建

Ø import{Component}from'@angular/core';这是一个import，他从@angular/core的核心模块里面引入了一个叫做Component的装饰器。

Ø @Component({
 selector:'app-root',
 templateUrl:'./app.component.html',
 styleUrls:['./app.component.css']
})用这个装饰器定义了一个组件，以及组件的元数据。这里用到了一个概念叫做组件元数据装饰器，所有的组件都必须使一个@Component装饰器来注解，前面带一个@符的东西叫做装饰器，

Ø exportclassAppComponent{
 title='app';
}就是一个标准的TypeScript类，这个类叫做控制器，他里面只有一个属性叫做title，控制器是指一个被@Component装饰器装饰的类，他包含与模板相关的属性和方法，与页面相关的大部分逻辑都是编写在这个控制器里面的，我们看到这个控制器里面有一个title属性，这个属性里面的值最终会展示到浏览器的页面中。在这里类里面一点框架的痕迹都没有，实际上AppComponent就是一个普通的TypeScript类，直到我们告诉Angular，他是一个组件，要告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，在TypeScript中，我们用装饰器来附加元数据，装饰器里面的属性就叫元数据，通过@Component装饰器把这些元数据附加到AppComponent这个类上面，Angular就知道了，我要把他编程Angular框架中的一个组件。@Component()这个东西就叫做组件元数据装饰器。元数据会告诉Angular如何把这个AppComponent类处理成一个Angular的组件。

好，接下来我们来看一下这几个元数据

Ø selector：是css的选择器，这个属性说明这个组件可以通过<app-root></app-root>这样的html标签来调用。在前面的index.html文件中，他里面就有这样一个<app-root>标签，他的意思是在这个地方来展现<app-root>这个标签中的内容。

Ø templateUrl：指定了一个html文件作为组件内容的模板，最终在index.html文件上<app-root>这个标签的位置，将展示这个模板html文件里面的内容。这是与组件相关的第二个概念，叫模板，如果没有模板，一个组件就不能叫做组件，模板是组件的必备属性，模板，也就是这个html定义了用户最终看到的页面的布局和内容。

Ø styleUrls：指向了一组css样式文件，你可以在样式文件中编写这个组件模板用到的css样式

<h1>
 Welcometo{{title}}!
</h1> 

其中双大括号括起来的title属性，这里用到了Angular里面的另一个概念，叫做数据绑定，Angular的数据绑定是模板的各个部分与控制器的各个部分互相作用的一种机制，我们往html中添加绑定标记来告诉Angular，如何把二者给联系起来，就是把模板和控制器联系起来，这个用双大扩号括起来的title属性就是最常见的将组件中的值绑定到模板中的方法，叫做插值表达式，在实际运行时，Angular框架会用AppComponent类中的title属性的值替换掉双大括号里面的titile，后面我们会频繁的用这个表达式来显示数据，后面我们还会介绍其他三种其他方式，叫属性绑定，事件绑定和双向绑定。

好，以上我们就看了命令行工具为我们生成的Component，他只是生成了组件的必备要素。

接下来我们先看一下组件的其他一些可选的元素，如输入属性，提供器和生命周期钩子。