[Aprendizaje angular] Día 1: configurar el entorno, usar andamios para crear y ejecutar el proyecto

Paso 1: Instalar andamios angulares

npm install @angular/cli

Paso 2: cree un proyecto utilizando andamios angulares

ng new xxx


创建成功！！！

Paso 3: Ejecutar el proyecto

Ejecutar bajo la ruta del proyectong serve --open

--open表示会自动打开浏览器

项目运行完成！！！

Paso 4: Comprender la estructura del proyecto

Paso 5: intente crear un componente de demostración

1、在app文件夹下创建demo组件文件夹，包括html、less以及ts三个文件。

2、在demo.component.ts文件中编写组件代码

Aquí puede usar extensiones para completar la función de escribir rápidamente código de plantilla. Como se muestra abajo:

注意修改组件名称！！！

/*demo.component.ts*/
import {
    
     Component, OnInit } from '@angular/core';

@Component({
    
    
    //组件名
    selector: 'app-demo',
    //当前组件关联的html地址
    templateUrl: './demo.component.html',
    //当前组件关联的css地址
    styleUrls: ['./demo.component.less']
})
export class DemoComponent implements OnInit {
    
    
    constructor() {
    
     }

    ngOnInit(): void {
    
     }
}

<!--demo.component.html-->
<h1>Hello World</h1>

/*demo.component.less*/
h1{
    
    
    color: red;
}

这样组件设计就完成了！！！

接下来就是在app.module.ts文件中对组件进行注册：

import {
    
     NgModule } from '@angular/core';
import {
    
     BrowserModule } from '@angular/platform-browser';

import {
    
     AppRoutingModule } from './app-routing.module';
import {
    
     AppComponent } from './app.component';
import {
    
     DemoComponent } from './demo/demo.component';

@NgModule({
    
    
  declarations: [
    AppComponent,DemoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
    
     }

最后在app.component.html中对demo组件进行展示：

<!--app.component.html-->
<app-demo></app-demo>
<app-demo></app-demo>
<app-demo></app-demo>

组件创建和展示成功！！！

Lo anterior es el primer día: construya el entorno, use el scaffolding para crear y ejecutar el contenido del proyecto Angular y preste atención a la columna " Aprendizaje angular ".
Compartiré los problemas comunes en mis proyectos habituales y el conocimiento de la prueba escrita y la entrevista contigo en CSDN, y progresaremos juntos.