Angular笔记二——目录结构分析与使用组件

Angular目录结构分析

标注星号的必须要知道，其他的了解一下就可以了。

app.moudule.ts详解

/* 这个文件是Angular根模块，会告诉Angular如何组装应用 */


// BrowserMoudule，浏览器解析模块
import {
    
     BrowserModule } from '@angular/platform-browser';
// Angular核心模块
import {
    
     NgModule } from '@angular/core';
// 根组件
import {
    
     AppComponent } from './app.component';

/* @NgModule装饰器，@NgModule接受一个元数据对象，告诉Angular如何编译和启动应用 */
@NgModule({
    
    
  declarations: [ // 配置当前项目运行的组件
    AppComponent
  ],
  imports: [ // 配置当前模块运行进行依赖的其他模块
    BrowserModule
  ],
  providers: [], // 配置项目所需要的服务
  bootstrap: [AppComponent] // 指定应用的主视图（称为根组件）通过引导根AppModule来启动引用，这里一般写的是根组件
})
// 跟模块不需要导出任何东西，因为其他组件不需要导入根模块
export class AppModule {
    
     }

Angular创建组件

使用命令创建组件。

ng g component components/news

在根目录下敲入上述代码，表示创建一个文件夹conponents，并在其中添加组件news。

组件使用

此时我们就可以使用我们刚才创建的news组件。

绑定数据

新创建一个header组件。

绑定数据title，并使用：