如何用angular写一个hello word
时间: 2023-08-12 20:04:09 浏览: 55
首先,你需要安装 Angular CLI,可以通过以下命令进行安装:
```
npm install -g @angular/cli
```
接着,使用以下命令创建一个新的 Angular 应用:
```
ng new my-app
```
进入到应用的根目录:
```
cd my-app
```
使用以下命令启动应用:
```
ng serve --open
```
现在,我们来创建一个组件来输出 "Hello World"。在应用的根目录下,使用以下命令创建一个新的组件:
```
ng generate component hello-world
```
打开 `hello-world.component.ts` 文件,添加以下代码:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-hello-world',
template: '<h1>Hello World</h1>',
})
export class HelloWorldComponent {}
```
现在,我们需要在根模块中引入该组件。打开 `app.module.ts` 文件,添加以下代码:
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@NgModule({
declarations: [AppComponent, HelloWorldComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
最后,打开 `app.component.html` 文件,添加以下代码:
```html
<app-hello-world></app-hello-world>
```
现在,你可以在浏览器中看到 "Hello World" 的输出了。