使用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应用

启动时加载了哪一个页面？

启动时加载了哪些脚本？

这些脚本作了什么事？