用 ng new 创建的 Angular 项目，根目录下有一些文件，一般就是一些配置文件， 项目的主要代码是在 src 目录的下面，src 表示 source。

src 里的这个 main.ts 是应用的入口， 在这个文件里创建了一个 Angular 应用， 创建这个应用时候需要一个 AppModule，这是应用的 root 模块。

我们写的代码一般会放在 app 目录的下面。

目前这里有一个 app.module， 这个文件里定义的就是应用的 root 模块， 我们可以根据自己的需要去创建不同的模块。

模块里会包含一些东西，在这个 AppModule 里面包含了一个组件叫 AppComponent ， 打开 app.component ， 应用的界面都是由组件构成的，你可以根据需求去创建不同的组件。

组件可以是个类，这个类要用 @Component 装饰器装饰一下，给这个装饰器提供一个配置选项参数可以配置一下这个组件.. 里面可以设置组件的 selector ， 这里用的是一个元素选择器叫 app-root。

也就是这个组件会放在 app-root 这个元素上，打开 src 下面的 index.html ，你会发现这里用了一组 app-root。

templateUrl 可以设置组件的模板的位置， 这里用了一个 html 文档， 就是这个 app.component.html，

打开这个文件，这个文档里的内容，就是你在应用的首页上看到的那个欢迎界面。

删除掉这些内容， 添加一组标题元素， 里面输出一个 title ， 这里用了特别的格式可以输出组件里的数据， 把要显示的数据放在两组大括号里面。

保存一下 ... 回到浏览器，再预览一下现在的应用首页，页面上会显示项目的名字，ninghao-angular。

现在我们看到的这个界面的显示就是 AppComponent 这个组件。

这个组件要显示的就是一个标题元素，包装的是一个 title 属性的值。

打开 AppComponent ， 修改一下它的 title 属性的值。

现在界面上显示的就是修改之后的 title。

定义组件的时候，可以用 styleUrls 设置一下组件要用的样式文件的位置 ，打开 app.component.css， 设置一下 h1 元素的样式，先用一个 text-transform 属性，值设置成 uppercase，然后再用一个 letter-spacing ，添加点字间距，大小是 3px 保存一下这个样式文件.. 再去预览一下。

你会发现界面上显示的这个大标题样式的变化。