使用Angular CLI生成的项目结构解说

项目结构

组件，是整个应用的基础。下图是组件的必备元素。



@Component：组件元数据装饰器，简称装饰器。装饰器告诉Angular框架如何处理一个TypeScript类。装饰器包含多个属性，属性的值叫做元数据。Angular会根据元数据的值渲染组件并执行组件的逻辑。

通过组件自带的模板来定义组件的外观。模板以HTML的形式存在，告诉Angular如何渲染组件。模板看起来很像HTML，但是可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。

控制器就是一个普通的Typescript类，它会被component这个装饰器装饰，控制器包含组件所有的属性和方法，绝大多数的页面逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯：模板展现控制器的数据，控制器处理模板上发生的事件。

代码讲解

import { Component } from '@angular/core';

@Component({
selector: 'app-root',//css选择器的名称，可以在模板中使用。
templateUrl: './app.component.html',//指向组件使用的模板文件
styleUrls: ['./app.component.css']//指向组件用到的样式文件
})
export class AppComponent { //AppComponent 是一个标准的typescript类
title = 'app';
}

@Component可以看成一个注解，注解了AppComponent类是一个组件。通过这个注解，Angular知道应该将AppComponent类当作一个组件来处理。

模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
declarations: [//声明组件，管道和指令
AppComponent,
],
imports: [//引用的组件
BrowserModule
FormModule,
HttpModule
],
providers: [],//在这里声明服务
bootstrap: [AppComponent]//声明了模块的主组件
})
export class AppModule { }

@NgModule()装饰器

启动Angular应用

启动时加载了哪个页面？

启动时加载了哪些脚本？

这些脚本做了什么事？