Angular究竟是什么？该怎么掌握并运用？接下来由我带你从基础到更深入的分析-CSDN博客

本文链接：https://blog.csdn.net/qq_49548132/article/details/140123968

Angular18

Angular 教程与代码示例

Angular 是由 Google 开发的一个用于构建动态 Web 应用的开源框架它提供了全面的解决方案，涵盖了从单页面应用程序到复杂企业级应用程序的开发需求本文将通过详细的文章和示例代码，带你从基础到高级，掌握 Angular 的核心概念和使用方法

Angular介绍

Angular 是一个强大的框架，适用于构建复杂的前端应用程序它的模块化设计和丰富的功能，使得开发者能够更加高效地构建和维护代码本文将由我带你深入了解 Angular 的基础和高级用法，通过实际的代码示例，让你能够快速上手并应用到自己的项目中

Angular 基础

1. 创建 Angular 应用

首先，确保你已经安装了 Node.js 和 npm 使用 Angular CLI 快速创建一个 Angular 应用

npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app
ng serve

2. Angular 组件

Angular 应用是由组件组成的，每个组件封装了一个 UI 模块以下是一个基本的 Angular 组件示例

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome to Angular</h1>
  `,
  styles: [`
    h1 { color: #2c3e50; }
  `]
})
export class AppComponent {}

3. 数据绑定与指令

数据绑定

Angular 提供了多种数据绑定方式，包括插值、属性绑定、事件绑定和双向绑定以下是一个简单的数据绑定示例

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <input [value]="title" (input)="title = $event.target.value" />
  `,
})
export class AppComponent {
  title = 'Hello Angular';
}

使用指令

Angular 提供了许多内置指令，用于在模板中添加逻辑处理以下是使用 *ngIf 和 *ngFor 指令的示例

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="isVisible">
      <p>Content is visible</p>
    </div>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
    <button (click)="toggleVisibility()">Toggle Visibility</button>
  `,
})
export class AppComponent {
  isVisible = true;
  items = ['Item 1', 'Item 2', 'Item 3'];

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

4. 服务与依赖注入

Angular 中的服务用于封装业务逻辑和数据访问使用依赖注入机制，可以在组件中轻松使用服务以下是创建和使用服务的示例

// src/app/data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return ['Data 1', 'Data 2', 'Data 3'];
  }
}

// src/app/app.component.ts
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let data of dataList">{{ data }}</li>
    </ul>
  `,
})
export class AppComponent {
  dataList: string[];

  constructor(private dataService: DataService) {
    this.dataList = this.dataService.getData();
  }
}

5. 路由

Angular 的路由模块用于在应用中导航和管理不同的视图以下是配置和使用路由的示例

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

// src/app/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 { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="">Home</a>
      <a routerLink="about">About</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {}