已发布·持续改进
Framework · 2016 年发布
Angular 是由 Google 主导、基于 TypeScript 的 Web 框架,内置路由、表单和 HTTP 通信,适合构建大型、易维护的 Web 应用。
Angular 是使用 TypeScript 构建 Web 应用的前端框架。它于 2016 年首次发布,由 Google 的 Angular 团队以开源方式开发。虽然名字相近,但它与 2010 年推出的 AngularJS 是两个不同的框架。界面由模板和 TypeScript 类组成的组件构成,变化的状态通过信号(signal)追踪,通用逻辑则放进通过依赖注入(DI)提供的服务中共享。
路由、表单、HttpClient、国际化和测试工具都以官方包的形式提供,因此 Angular 在需要多个团队长期维护的大型企业应用和后台管理界面中尤为常见。统一的项目结构和代码生成工具让各个项目大同小异,新加入的开发者也能很快读懂代码。服务端渲染(SSR)和静态站点生成(SSG)同样可以用这套工具完成。
最快的入门方式是先安装 Node.js,再用 Angular CLI 创建项目,并通过 ng serve 启动开发服务器。官方网站 angular.dev 提供可以直接在浏览器中操作的交互式教程,以及按主题整理的详细指南。Angular 代码由类、类型和装饰器组成,先掌握 TypeScript 基础会让学习轻松很多。
每个组件通过 imports 直接引入自己用到的组件和指令,无需额外的模块,就能把界面拆成小而独立的部分。
用 signal、computed 和 effect 声明状态与派生值,Angular 会精确追踪哪些值发生了变化,只更新受影响的部分。
路由、响应式表单、HttpClient、国际化和服务端渲染都是官方包,不必再花时间挑选核心库。
Angular CLI 以统一的流程完成项目创建、代码生成、开发服务器、测试和经过优化的生产构建。
Angular CLI 运行在 Node.js 之上。从 nodejs.org 安装 LTS 版本,并确认 node 和 npm 能显示版本号。支持的 Node.js 版本可在 angular.dev 的版本兼容表中查看。
node --version && npm --version用 npm 全局安装 Angular CLI。安装完成后即可使用 ng 命令,运行 ng version 可以查看已安装的版本。
npm install -g @angular/cli用 ng new 创建新项目并启动开发服务器。回答关于样式表格式和是否启用 SSR 的问题后,浏览器会打开 http://localhost:4200。
ng new my-app && cd my-app && ng serve --open@Component 装饰器把一个类变成组件,也就是界面的一部分。selector 是在 HTML 中使用的标签名,模板中的 {{ }} 用于显示值,(click) 把事件绑定到方法。signal 像函数一样调用即可读取,用 update 修改;值改变后,Angular 会自动更新视图。
src/app/app.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name() }}!</h1>
<button (click)="increment()">Clicked {{ count() }} times</button>
`,
})
export class App {
protected readonly name = signal('Angular');
protected readonly count = signal(0);
increment() {
this.count.update((value) => value + 1);
}
}
npm install -g @angular/cli
ng new hello-angular
cd hello-angular
ng serve --open共六章,带你从安装一步步了解 Angular 的核心概念。
在这里提问、分享经验,交流关于 Angular 的看法。
还没有讨论。来发起第一个吧。
0 条评论
登录 · 登录后即可发表评论。
来发表第一条评论吧。