目录结构分析

用angular cli新建项目之后，创建的这个项目下面的每个文件是干什么的呢？

对每个文件的用途有了一些了解之后，我们再来看看几个比较重要的知识点

app.module.ts、组件分析

定义 AppModule，这个根模块会告诉 Angular 如何组装该应用。 目前，它只声明了 AppComponent。 稍后它还会声明更多组件。

app.module.ts

//每个 Angular 应用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。
import { BrowserModule } from '@angular/platform-browser'; //浏览器解析的模块
import { NgModule } from '@angular/core'; //angular核心模块
import { AppComponent } from './app.component'; //根组件
//@NgModule()装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。
@NgModule({
    //（可声明对象表） 那些属于本 NgModule 的组件、指令、管道都要在这里引入。
    declarations: [
        //引入了AppComponent组件
        AppComponent
    ],
    //（导入表）引入当前模块需要依赖的其他模块 。
    imports: [
        //引入了浏览器解析模块
        BrowserModule
    ],
    //在本模块中声明的一些组件、指令和管道在本模块任何地方都可以使用， 导出的这些可声明对象就是该模块的公共 API。
    exports:[],
    //定义的服务 ：本模块被所有的服务 都需要在providers中指定， 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
    providers: [],
    //定义此 NgModule 中要编译的组件集，这样它们才可以动态加载到视图中。
    entryComponents:[],
    //应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
    bootstrap: [
        //这里定义AppComponent为主视图
        AppComponent
    ]
})
//根模块不需要导出任何东西
export class AppModule { }

app.component.ts

import { Component, OnInit } from '@angular/core';//引入angular核心
//@Component 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。这里可以看出AppComponent只是一个普通类，只有给它加上了 @Component 装饰器，它才变成了组件。
@Component({
    //在其他地方使用这个组件时的名称：<app-root></app-root>
    selector: 'app-root',
    //该组件的 HTML 模板文件相对于这个组件文件的地址(相对路径)
    templateUrl: './app.component.html',
    //该组件的 css样式文件相对于这个组件文件的地址(相对路径)
    styleUrls: ['./app.component.css'],
    //在组件中指定服务
    providers: []
})
export class AppComponent implements OnInit {
    //类的成员(title属性) 类型为string 
    public title: string = 'first-app';
    //构造函数
    constructor() {
    }
    //初始化生命周期函数
    ngOnInit() {
    }
}