Angular 框架入门教程：从安装到路由、服务与状态管理详解

一、引言

在前端开发领域，Angular 是一个强大且流行的框架。它由 Google 维护，基于 TypeScript，采用模块化设计，提供了组件化开发、依赖注入、路由、表单处理等丰富功能，旨在帮助开发者构建高效、可维护的单页应用程序（SPA），提升开发效率和用户体验。

二、安装 Angular

  1. 安装 Node.js 和 npm：Angular 依赖 Node.js 和 npm 运行。从 Node.js 官方网站下载并安装它们。
  2. 安装 Angular CLI：使用命令npm install -g @angular/cli安装 Angular CLI，安装完成后可用ng --version检查版本。

三、创建 Angular 项目

  1. 使用 Angular CLI 创建项目：ng new my-app，Angular CLI 会自动创建项目结构并安装依赖项。
  2. 运行项目：进入项目目录，执行cd my-app后再运行ng serve，开发服务器启动后可在浏览器中通过http://localhost:4200访问应用程序。

四、Angular 项目结构

1.项目目录结构

  1. e2e/：端到端测试目录。
  2. node_modules/：项目依赖的第三方模块。
  3. src/：项目源代码目录。
  4. .angular-cli.json：Angular CLI 的配置文件。
  5. package.json：项目的包管理文件。
  6. tsconfig.json：TypeScript 的配置文件。

2.主要文件介绍

  1. app.module.ts：定义应用程序的模块。
  2. app.component.ts：定义应用程序的根组件。
  3. index.html：应用程序的入口文件。
  4. main.ts：应用程序的启动文件。

五、Angular 组件

1.组件概念

  • 组件是包含 HTML 模板、TypeScript 代码和 CSS 样式的独立单元，负责显示数据、处理用户输入和与其他组件交互。

2.创建组件

  • 使用ng generate component my-component可创建新组件，Angular CLI 会在src/app/下创建包含模板、代码和样式文件的文件夹。

3.组件模板

  • 定义组件外观和布局，可使用 Angular 的模板语法显示数据、绑定事件和使用指令。例如：
<div>
  <h1>{{title}}</h1>
  <p>{{description}}</p>
  <button (click)="onClick()">Click me</button>
</div>

4.组件类

用 TypeScript 文件定义组件行为和逻辑，可定义属性、方法和生命周期钩子。例如：

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title = 'My Component';
  description = 'This is my component.';

  onClick() {
    console.log('Button clicked!');
  }
}

六、Angular 模块

  1. 模块概念：在 Angular 中，模块是组织代码的方式，将相关组件、服务、指令等组合在一起，形成独立功能单元，提高代码可维护性和可扩展性，方便复用。
    • declarations：声明模块中包含的组件、指令和管道。
    • imports：导入其他模块以使用其中功能。
    • providers：提供服务，可在模块中的组件注入使用。
    • exports：导出模块中的部分内容供其他模块使用。
  2. 模块代码示例：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule
  ],
  exports: [MyComponent]
})
export class MyModule { }

七、Angular 路由配置方法

1.路由概念

  • 路由是 Angular 应用程序的导航机制，定义不同 URL 路径和对应的组件，让用户通过 URL 访问不同页面。

2.配置路由

  • 使用RouterModule.forRoot()方法配置路由。例如：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } 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 { }

3.路由参数

  • 可在路由中定义参数，在组件中通过注入ActivatedRoute服务获取参数值。例如：
const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      const id = params['id'];
      console.log(id);
    });
  }
}

4.路由导航守卫

  • 可控制用户导航行为，如在用户未登录时阻止访问某些页面。Angular 提供多种导航守卫，如CanActivate、CanActivateChild、CanDeactivate等。例如：
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    if (isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}
  • 在路由配置中使用导航守卫
const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

5.懒加载模块

  • 对于大型应用程序，可使用懒加载模块提高性能，只有在用户访问特定路由时才加载模块。
  • 创建懒加载模块：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';

const routes: Routes = [
  { path: '', component: LazyComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  declarations: [LazyComponent]
})
export class LazyModule { }
  • 在主路由配置中使用懒加载模块：
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'lazy', loadChildren: () => import('./lazy.module').then(m => m.LazyModule) }
];

八、Angular 服务

1.服务概念

  • 服务是可复用代码块，可封装业务逻辑、数据访问等通用功能，在不同组件间共享。

2.创建服务

  • 使用ng generate service my-service创建服务，Angular CLI 会在src/app/下创建服务的 TypeScript 文件。

3.注入服务

  • 在组件中通过依赖注入获取服务实例。例如：
import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private myService: MyService) { }
}

4.使用服务

  • 服务可提供数据存储、网络请求等功能。例如：
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  private data: string[] = [];

  addData(item: string) {
    this.data.push(item);
  }

  getData() {
    return this.data;
  }
}
  • 在组件中使用服务：
import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private myService: MyService) { }

  addItem() {
    const newItem = 'New item';
    this.myService.addData(newItem);
    console.log(this.myService.getData());
  }
}

九、Angular 表单处理

1.模板驱动表单

  • 通过在模板中使用表单指令实现表单验证和提交。例如：
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input type="text" name="username" ngModel required>
  <input type="password" name="password" ngModel required>
  <button type="submit">Submit</button>
</form>
  • 在组件中处理表单提交：
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  onSubmit(form: any) {
    if (form.valid) {
      console.log(form.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

2.响应式表单

  • 在组件类中创建表单模型实现表单验证和提交。例如：
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  myForm = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });

  onSubmit() {
    if (this.myForm.valid) {
      console.log(this.myForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}
  • 在模板中绑定表单模型：
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="username">
  <input type="password" formControlName="password">
  <button type="submit">Submit</button>
</form>

十、Angular 状态管理

1.状态管理概念

  • 在复杂应用程序中，多个组件可能需要共享和同步数据状态，状态管理用于管理应用程序状态，确保数据一致性和可维护性。

2.NgRx 状态管理库

  • NgRx 是流行的 Angular 状态管理库，基于 Redux 理念，提供可预测、可维护的方式管理应用程序状态，包含actions（定义动作）、reducers（根据动作更新状态）、effects（处理异步操作并触发动作）、selectors（从状态中选择特定数据）。例如：
  • 定义状态模型：
export interface AppState {
  counter: number;
}

export const initialState: AppState = {
  counter: 0
};
  • 定义动作：
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export class IncrementAction implements Action {
  readonly type = INCREMENT;
}

export class DecrementAction implements Action {
  readonly type = DECREMENT;
}
  • 定义 reducer：
import { AppState, initialState } from './app.state';
import { INCREMENT, DECREMENT } from './app.actions';

export function reducer(state = initialState, action: any): AppState {
  switch (action.type) {
    case INCREMENT:
      return {...state, counter: state.counter + 1 };
    case DECREMENT:
      return {...state, counter: state.counter - 1 };
    default:
      return state;
  }
}
  • 在模块中配置 NgRx：
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { reducer } from './app.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ appState: reducer })
  ]
})
export class AppModule { }

十一、总结

本文介绍了 Angular 框架的基本概念、安装和使用方法，包括项目结构、组件、模块、路由配置、服务、表单处理和状态管理等方面。通过学习本文，可对 Angular 框架有初步了解，并能使用 Angular CLI 创建、开发和维护 Angular 应用程序。Angular 是功能强大的前端框架，若想深入学习，可参考 Angular 的官方文档和其他相关资源。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/900531.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

excel中，将时间戳(ms或s)转换成yyyy-MM-dd hh:mm.ss或毫秒格式

excel中，将时间戳(ms或s)转换成yyyy-MM-dd hh:mm.ss或毫秒格式

问题 在一些输出为时间戳的文本中&#xff0c;按照某种格式显示更便于查看。 如下&#xff0c;第一列为时间戳(s)&#xff0c;第二列是转换后的格式。 解决方案&#xff1a; 在公式输入框中输入&#xff1a;yyyy/mm/dd hh:mm:ss TEXT((A18*3600)/8640070*36519, "yyy…
阅读更多...
Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks

Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks

Abstract 图像到图像转换是一类视觉和图形问题&#xff0c;其目标是使用对齐图像对的训练集来学习输入图像和输出图像之间的映射。 然而&#xff0c;对于许多任务&#xff0c;配对训练数据将不可用。 我们提出了一种在没有配对示例的情况下学习将图像从源域 X 转换到目标域 Y …
阅读更多...
Android 15自定义设置导航栏与状态栏，EdgeToEdge适配

Android 15自定义设置导航栏与状态栏，EdgeToEdge适配

背景&#xff1a;android api 35&#xff0c;activity设置EdgeToEdge.enable((ComponentActivity) this)前提下 一、设置导航栏与状态栏颜色 设置的状态栏颜色&#xff0c;只需要设置fitsSystemWindows跟setOnApplyWindowInsetsListener xml设置&#xff1a; 代码&#xff1a;…
阅读更多...
没有AWS账号能不能在手机上使用AWS服务吗？

没有AWS账号能不能在手机上使用AWS服务吗？

关于“没有AWS账号能不能在手机上使用AWS服务”这个问题&#xff0c;答案是不行的。要使用AWS&#xff08;亚马逊云服务&#xff09;提供的云服务&#xff0c;无论是在电脑还是手机上&#xff0c;都必须先创建一个AWS账号。AWS提供的各种云计算资源&#xff0c;比如EC2&#xf…
阅读更多...
51单片机——OLED显示图片

51单片机——OLED显示图片

取模软件&#xff1a;链接:https://pan.baidu.com/s/1UcrbS7nU4bsawNxsaaULfQ 提取码:gclc 1、如果图片大小和格式不合适&#xff0c;可以先用Img2Lcd软件进行调整图片大小&#xff0c;一般取模软件使用的是.bmp图片&#xff0c;可以进行输出.bmp格式。软件界面如下&#xff1…
阅读更多...
ubuntu编译kaldi和vosk

ubuntu编译kaldi和vosk

文章目录 前言一、开源框架的选取二、kaldi编译三、编译vosk方案一方案二 前言 由于工作需要语音识别的功能&#xff0c;环境是在linux arm版上&#xff0c;所以想先在ubuntu上跑起来看一看&#xff0c;就找了一下语音识别的开源框架&#xff0c;选中了vosk这个开源库&#xf…
阅读更多...
java控制台打印乘法口诀表

java控制台打印乘法口诀表

目录 前言具体代码完整代码 前言 背乘法口诀表我没记错话&#xff0c;应该是我们在上小学二年级的时候&#xff0c;相信大家对乘法表相当熟悉&#xff0c;那你知道如何用java打印这个漂亮的表吗&#xff1f;下面咱们一起来学习学习。 具体代码 数字乘法表 关键代码&#xf…
阅读更多...
ffmpeg视频滤镜:腐蚀滤镜

ffmpeg视频滤镜:腐蚀滤镜

滤镜简述 erosion 官网链接> FFmpeg Filters Documentation 这个滤镜会在视频上应用腐蚀操作&#xff0c;腐蚀操作是形态学中一种操作&#xff0c;接触过opencv的同学应该很熟悉。滤镜主要有如下作用&#xff1a; 去除噪声&#xff1a;腐蚀可以帮助去除图像中的小颗粒噪…
阅读更多...
大尺寸反射式液晶显示模块行业分析：预计2030年全球市场规模将达到2,020.21百万美元

大尺寸反射式液晶显示模块行业分析：预计2030年全球市场规模将达到2,020.21百万美元

大尺寸反射式液晶显示模块&#xff08;Large-Size Reflective LCD Module&#xff09;是指采用反射显示技术的液晶显示屏&#xff0c;主要依赖自然光或环境光反射来显示内容&#xff0c;减少了对背光的依赖。这类显示屏常用于户外显示、公共信息系统、可穿戴设备及低能耗电子设…
阅读更多...
GANDALF: 基于图的Transformer与数据增强主动学习框架，具有可解释特征的多标签胸部X光分类|文献速递-基于生成模型的数据增强与疾病监测应用

GANDALF: 基于图的Transformer与数据增强主动学习框架，具有可解释特征的多标签胸部X光分类|文献速递-基于生成模型的数据增强与疾病监测应用

Title 题目 GANDALF: Graph-based transformer and Data Augmentation Active Learning Framework with interpretable features for multi-label chest Xrayclassification GANDALF: 基于图的Transformer与数据增强主动学习框架&#xff0c;具有可解释特征的多标签胸部X光分…
阅读更多...
【Unity 安装教程】

【Unity 安装教程】

Unity 中国官网地址链接 Unity - 实时内容开发平台 | 3D、2D、VR & AR可视化https://unity.cn/首先我们想要安装Unity之前&#xff0c;需要安装Unity Hub&#xff1a; Unity Hub 是 Unity Technologies 开发的一个集成软件&#xff0c;它为使用 Unity 引擎的开发者提供了一…
阅读更多...
Linux巡检利器xsos的安装和使用

Linux巡检利器xsos的安装和使用

一、 一般项目基本完成的时候&#xff0c;后期运维工作的重点就是及时的&#xff0c;合理的频率巡检了&#xff0c;巡检的目的主要是及时发现各种各样的问题 那么&#xff0c;自己编写shell脚本是大部分人的第一选择&#xff0c;这里有个比较麻烦的地方&#xff0c;shell脚本…
阅读更多...
ctfshow(259-＞261)--反序列化漏洞--原生类与更多魔术方法

ctfshow(259-＞261)--反序列化漏洞--原生类与更多魔术方法

Web259 进入界面&#xff0c;回显如下&#xff1a; highlight_file(__FILE__);$vip unserialize($_GET[vip]); //vip can get flag one key $vip->getFlag();题干里还提示了网站有一个flag.php界面&#xff0c;源代码如下&#xff1a; $xff explode(,, $_SERVER[HTTP_X…
阅读更多...
开源限流组件分析（三）：golang-time/rate

开源限流组件分析（三）：golang-time/rate

文章目录 本系列前言提供获取令牌的API数据结构基础方法tokensFromDurationdurationFromTokensadvance 获取令牌方法reverseN其他系列API 令人费解的CancelAt是bug吗 取消后无法唤醒其他请求 本系列 开源限流组件分析&#xff08;一&#xff09;&#xff1a;juju/ratelimit开源…
阅读更多...
Apache Paimon Catalog

Apache Paimon Catalog

Paimon Catalog可以持久化元数据&#xff0c;当前支持两种类型的metastore&#xff1a; 文件系统&#xff08;默认&#xff09;&#xff1a;将元数据和表文件存储在文件系统中。hive&#xff1a;在 hive metastore中存储元数据。用户可以直接从 Hive 访问表。 2.2.1 文件系统…
阅读更多...
分布式IO模拟量模块：多领域应用的高效能解决方案

分布式IO模拟量模块：多领域应用的高效能解决方案

分布式IO模拟量模块是分布式IO系统中的重要组件&#xff0c;用于实现现场设备或过程的模拟量信号的采集、监视和控制。该模块通常与现场总线耦合器配合使用&#xff0c;能够接收来自现场设备的模拟量信号&#xff08;如电流、电压等&#xff09;&#xff0c;并将其转换为数字信…
阅读更多...
STM32-Cube定时器TIM

STM32-Cube定时器TIM

一、内部时钟源 1、创建项目 File → New → STM32 project选择STM32F103C8T6单片机&#xff0c;命名TIM 2、配置单片机 1.打开USART1&#xff0c;方便我们与电脑连接查看数据 开启UART1并开启中断。 2、设置时钟源 开启外部高速晶振 将时钟频率设置为72MHz 设置调试模…
阅读更多...
利用飞腾派进行OpenCV开发

利用飞腾派进行OpenCV开发

实验目标&#xff1a; 完成飞腾平台OpenCV开发。 实验大纲&#xff1a; Mat数据结构加载、显示、保存图像读写像素RGB图像分离彩色图转灰度图 Mat数据结构 Mat是一个类&#xff0c;由两个数据部分组成&#xff1a;矩阵头(大小,通道,数据类型等)和数据块(像素 值)。创建示例…
阅读更多...
uniapp uview 上传图片,数据以formData + File 形式传输

uniapp uview 上传图片,数据以formData + File 形式传输

期望 后端期望前端给的传参为 formData 形式, 同时文件的数据类型为File 形式. 解决过程 将文件处理为 File 格式 uview 中的 upload 组件点击上传之后不是标准的 File 形式,点击上传单个文件之后的控制台信息如下: [{"url": "blob:http://localhost:8081/…
阅读更多...
华为云实战杂记

华为云实战杂记

配置nginx服务器 首先我们拿到一台服务器时&#xff0c;并不知道系统是否存在Nginx我们可以在Linux命令行执行如下命令查看 find / -name nginx* find / -name nginx* 查找所有名字以nginx开头的文件或者目录&#xff0c;我们看看系统里面都有哪些文件先&#xff0c;这样可以快…
阅读更多...
最新文章

Copyright @ 2022~2023