haizlin / fe-interview

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.04k stars 3.24k forks source link

[angular] 第1878天 请说说在Angular中的自举是什么? #5840

Open haizhilin2013 opened 1 month ago

haizhilin2013 commented 1 month ago

第1878天 请说说在Angular中的自举是什么?

3+1官网

我也要出题

llccing commented 6 days ago

“自举”这个词在技术文档中可能不够直观。相比之下,“引导”或“启动”更能准确地传达这个过程的意义。在技术文档和开发者交流中,使用“引导”或“启动”会更容易理解。


在Angular框架中,引导(bootstrap)是指启动和初始化Angular应用程序的过程。这个过程包括以下几个步骤:

  1. 加载Angular库:浏览器首先加载Angular框架的核心库文件(如angular.jsangular.min.js)。

  2. 定义模块:Angular应用程序由一个或多个模块组成。每个模块通过@NgModule装饰器定义,包含组件、指令、管道和服务。

  3. 主模块(AppModule):每个Angular应用程序都有一个主模块,通常命名为AppModule。这是应用程序的根模块,包含应用程序的根组件。

  4. 根组件(AppComponent):根组件是应用程序的入口组件。通常在index.html文件中定义一个根元素(如<app-root></app-root>),由根组件控制。

  5. 引导(Bootstrap):在主模块中,通过bootstrap属性指定根组件。Angular会自动引导这个根组件,并将其插入到index.html中定义的根元素中。

  6. 启动应用程序:Angular通过platformBrowserDynamic().bootstrapModule(AppModule)来启动应用程序。这个方法会加载并编译主模块,然后启动应用程序。

以下是一个示例,展示了Angular应用程序的引导过程:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular App</title>
</head>
<body>
  <app-root></app-root> <!-- 根组件 -->
  <script src="main.js"></script> <!-- 编译后的JavaScript文件 -->
</body>
</html>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent] // 指定根组件
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `<h1>Hello, Angular!</h1>`
})
export class AppComponent { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

通过上述步骤,Angular应用程序就完成了引导过程,并在浏览器中启动和运行。使用“引导”或“启动”来描述这个过程,确实更直观和易于理解。