Angular入门实战Day02

注：以下内容来源教程 https://www.bilibili.com/video/BV1bt411e71b/?spm_id_from=333.337.search-card.all.click&vd_source=d24d4d209aa65e8fc37220ced9cbcf2f

---

一、Angular 目录结构

• node_modules：存放 npm install 安装的第三方模块。
• src：项目源文件存放位置。
• app：存放组件、服务以及模块，还有 app.module.ts 根模块。
• assets：存放静态资源。
• index.html：主页面的入口。
• main.ts：应用的主要入口点。
• style.css：全局样式文件。
• package.sjon：项目配置文件，其中定义了项目名称、项目版本以及项目所需要的各种依赖。

二、Angular 核心文件

1.根模块 app.module.ts

告诉 Angular 如何组装应用。

// NgModule：Angular 核心模块
import { NgModule } from '@angular/core';
// BrowserModule：浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';

// AppComponent：根组件
import { AppComponent } from './app.component';

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

2.根组件

组件由三个文件构成：

• 带有@Component装饰器的TypeScript类。
• HTML模板。
• 样式文件。
  app.component.spec.ts 为测试文件。
  

// 引入核心模块里面的 Component
import { Component } from '@angular/core';

// @Component装饰器：接受一个元数据对象
@Component({
  selector: 'app-root', // 使用这个组件的名称
  templateUrl: './app.component.html', // 这个组件的 html
  styleUrls: ['./app.component.css'] // 这个组件的 css
})
// 导出根组件
export class AppComponent {
  title = 'angularDemo01'; // 定义属性，前面不需要加 var、let之类的，因为前面其实省略了 public
}

自定义组件：

• 使用命令 ng g 组件名 路径。

• 使用命令创建的组件会自动加入到 app.module.ts 根模块中。
  
• 在其他组件中使用自定义组件：
  
  

三、绑定数据

Angular 使用 {{}} 来实现数据的绑定。