HiDocs
Search K

Appearance

1.目录结构 ​

image-20230912091927565

上面四个文件是根组件，下面的app.module.ts是根模块（angular的组件的组装应用规则，非常重要的一个文件）

image-20230912092027070

文件内容：使用的组件、依赖的模块、需要的服务、视图根组件

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

//BrowserModule，浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
//Angular核心模块
import { NgModule } from '@angular/core';
//根组件
import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/header/header.component';

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

//根模块不需要导出任何东西，   因为其它组件不需要导入根模块
export class AppModule {}

2.创建组件 ​

（1）使用命令行创建 ——> 非常方便

在根目录中：

bash
ng g component components/news

这样的话会自动在app文件夹里面创建components文件夹、news文件夹和组件的四个文件

并且也会自动在app.module.ts中引入

image-20230912093505985

（2）手动创建文件，自己编写

3.使用组件 ​

跟组件里面引入新闻组件

注意：这里由于引入的配置选项写在了公共模块文件里面app.module.ts，所以这里就直接引入即可，不用向vue一样使用选项了！

image-20230912093658551

注意：但是引入的标签名不是随意的，而是组件的特定名称，需要去文件中进行查看：

image-20230912094137579

注意：一旦我们在app.module.ts里面声明引入了组件，那么在这个模块的任意组件里面都可以使用这个组件，不一定非要在根组件里面使用

比如我们也可以在news组件里面使用header组件！组件与组件之间相互进行调用！

4.定义数据并使用在模版中 ​

title前面的public可以省略，但是注意一定不要加var，let等关键字，因为类里面是不存在var、let和function关键字的，定义属性和函数都是直接进行定义的！

image-20230912113927310

使用数据的时候直接通过模板语法进行使用

image-20230912114216383