Angular 从零开始，快速上手
本帖最后由 御坂主机 于 2024-7-3 18:29 编辑1. 概述
Angular 是一个功能强大的前端框架，用于构建动态的单页应用程序（SPA）。它由 Google 开发和维护，广泛应用于现代 Web 开发中。本篇技术贴将带领您从零开始，快速上手 Angular，了解其基本概念和核心功能。
1.1 安装和配置
在开始使用 Angular 之前，需要先安装相关工具和配置开发环境。
1.1.1 安装 Node.js 和 npm
Angular 依赖于 Node.js 和 npm（Node Package Manager）。首先，下载并安装 Node.js，这将同时安装 npm。可以在 (https://nodejs.org/) 获取最新版本。
1.1.2 安装 Angular CLI
Angular CLI 是一个命令行工具，用于初始化、开发和维护 Angular 应用程序。通过 npm 安装 Angular CLI：
npm install -g @angular/cli
1.1.3 创建新项目
使用 Angular CLI 创建一个新的 Angular 项目：
ng new my-angular-app
在创建过程中，Angular CLI 将会询问您一些配置选项，如是否添加 Angular 路由和使用哪种样式格式。根据您的需求选择即可。
1.1.4 启动开发服务器
进入项目目录并启动开发服务器：
cd my-angular-app
ng serve
打开浏览器并访问 http://localhost:4200，您将看到 Angular 默认的欢迎页面，这表示您的开发环境已成功搭建。
2. Angular 基本概念
了解 Angular 的基本概念有助于更好地理解和使用这个框架。
2.1 组件
组件是 Angular 应用程序的基本构建块。每个组件由 HTML 模板、CSS 样式和 TypeScript 逻辑代码组成。
2.1.1 创建组件
使用 Angular CLI 创建一个新组件：
ng generate component my-component
这将生成一个新的组件文件夹，其中包含四个文件：HTML 模板、CSS 样式、TypeScript 逻辑代码和测试文件。
2.1.2 使用组件
在父组件的模板中使用新创建的组件：
<app-my-component></app-my-component>
2.2 模块
模块用于组织应用程序的不同部分。每个 Angular 应用程序至少有一个根模块（AppModule）。
2.2.1 声明组件
在模块文件中声明新创建的组件：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';
@NgModule({
declarations: [
AppComponent,
MyComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap:
})
export class AppModule { }
2.3 服务
服务用于封装应用程序的业务逻辑和数据访问层，通常通过依赖注入来使用。
2.3.1 创建服务
使用 Angular CLI 创建一个新服务：
ng generate service my-service
2.3.2 注入服务
在组件中注入和使用服务：
import { Component, OnInit } 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 implements OnInit {
constructor(private myService: MyService) { }
ngOnInit(): void {
this.myService.getData().subscribe(data => {
console.log(data);
});
}
}
3. 路由
Angular 路由用于在不同视图之间导航。
3.1 配置路由
在应用程序模块中配置路由：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponent } from './my-component/my-component.component';
const routes: Routes = [
{ path: 'my-component', component: MyComponent }
];
@NgModule({
imports: ,
exports:
})
export class AppRoutingModule { }
3.2 使用路由链接
在模板中使用路由链接进行导航：
<a routerLink="/my-component">Go to My Component</a>
<router-outlet></router-outlet>
4. 总结
本文详细介绍了如何从零开始，快速上手 Angular。通过安装和配置开发环境，了解组件、模块和服务的基本概念，以及配置和使用路由，您已经掌握了 Angular 的基础知识。接下来，可以根据项目需求深入学习和探索更多高级功能，如表单处理、HTTP 客户端、状态管理等。希望本文能为您的 Angular 开发之旅提供一个良好的起点。
------------------------------------------------------------------------------------------------------------------------------------------
========御 坂 主 机========
>> VPS主机 服务器 前沿资讯 行业发布 技术杂谈 <<
>> 推广/合作/找我玩TG号 : @Misaka_Offical <<
-------------------------------------------------------------------------------------------------------------------------------------------
页:
[1]